fix: [Integrations > Install integration only][SCREEN READER]: Change…

… default button accessible labels must contain the visual label (elastic#180166) Closes: elastic/security-team#9008 ## Description The `Change defaults` buttons have accessible labels that are different than the visible label. The accessible label needs to include the visible label and should also have an `aria-expanded="true | false"` attribute for screen reader usability. Screenshot below. ### Steps to recreate 1. Create a new Security Serverless project if none exist 2. When the project is ready, open it and go to Integrations, under the Project Settings in the lower left navigation 3. Search for Kubernetes in the Integrations, and click on the card 4. Click "Add Kubernetes" to load the prompt page 5. Click "Add integration only (skip agent installation)" 6. Turn on the screen reader of your choice 7. Press `Tab` until the first "Change defaults" button has keyboard focus 8. Verify this button text is not announced. Text is "Hide kubernetes/metrics inputs" or something similar. ### What was done? 1. Required `a11y` attributes were added ### Screen #### a11y tree ![image](https://github.com/elastic/kibana/assets/20072247/47af9636-2ddb-4988-bab6-fe20bb14b76c)
jennypavlova · Apr 8, 2024 · 0527f48 · 0527f48
1 parent ce4c245
commit 0527f48
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 32 deletions.
diff --git a/...icy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx b/...icy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx
@@ -7,7 +7,6 @@
 
 import React, { useState, Fragment, memo, useMemo } from 'react';
 import styled from 'styled-components';
-import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiFlexGroup,
@@ -17,6 +16,7 @@ import {
   EuiHorizontalRule,
   EuiSpacer,
   EuiButtonEmpty,
+  htmlIdGenerator,
 } from '@elastic/eui';
 
 import type {
@@ -128,6 +128,8 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
       [packageInputStreams, packagePolicyInput.streams]
     );
 
+    const titleElementId = useMemo(() => htmlIdGenerator()(), []);
+
     return (
       <>
         {/* Header / input-level toggle */}
@@ -138,7 +140,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
                 <EuiFlexGroup alignItems="center" gutterSize="s">
                   <EuiFlexItem grow={false}>
                     <EuiText>
-                      <h4>{packageInput.title || packageInput.type}</h4>
+                      <h4 id={titleElementId}>{packageInput.title || packageInput.type}</h4>
                     </EuiText>
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -179,27 +181,8 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{
                   onClick={() => setIsShowingStreams(!isShowingStreams)}
                   iconType={isShowingStreams ? 'arrowUp' : 'arrowDown'}
                   iconSide="right"
-                  aria-label={
-                    isShowingStreams
-                      ? i18n.translate(
-                          'xpack.fleet.createPackagePolicy.stepConfigure.hideStreamsAriaLabel',
-                          {
-                            defaultMessage: 'Hide {type} inputs',
-                            values: {
-                              type: packageInput.type,
-                            },
-                          }
-                        )
-                      : i18n.translate(
-                          'xpack.fleet.createPackagePolicy.stepConfigure.showStreamsAriaLabel',
-                          {
-                            defaultMessage: 'Show {type} inputs',
-                            values: {
-                              type: packageInput.type,
-                            },
-                          }
-                        )
-                  }
+                  aria-expanded={isShowingStreams}
+                  aria-labelledby={titleElementId}
                 >
                   {
                     <FormattedMessage

diff --git a/.../fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx b/.../fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx
@@ -536,7 +536,7 @@ describe('when on the package policy create page', () => {
 
         test('should disable submit button on invalid form with empty package var', async () => {
           await act(async () => {
-            fireEvent.click(renderResult.getByLabelText('Show logfile inputs'));
+            fireEvent.click(renderResult.getByText('Change defaults'));
           });
 
           await act(async () => {
@@ -553,7 +553,7 @@ describe('when on the package policy create page', () => {
 
         test('should submit form with changed package var', async () => {
           await act(async () => {
-            fireEvent.click(renderResult.getByLabelText('Show logfile inputs'));
+            fireEvent.click(renderResult.getByText('Change defaults'));
           });
 
           await act(async () => {

diff --git a/...t/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.test.tsx b/...t/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.test.tsx
@@ -233,7 +233,7 @@ describe('edit package policy page', () => {
     });
 
     await act(async () => {
-      fireEvent.click(renderResult.getByLabelText('Show logfile inputs'));
+      fireEvent.click(renderResult.getByText('Change defaults'));
     });
 
     await act(async () => {

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -17605,10 +17605,8 @@
     "xpack.fleet.createPackagePolicy.multiPageTitle": "Configurer l'intégration de {title}",
     "xpack.fleet.createPackagePolicy.pageTitleWithPackageName": "Ajouter l'intégration {packageName}",
     "xpack.fleet.createPackagePolicy.stepConfigure.errorCountText": "{count, plural, one {# erreur} other {# erreurs}}",
-    "xpack.fleet.createPackagePolicy.stepConfigure.hideStreamsAriaLabel": "Masquer les entrées {type}",
     "xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyDataRetentionText": "Par défaut, tous les logs et toutes les données d'indicateurs sont stockés au niveau \"hot\". {learnMore} sur la modification de la politique de conservation des données pour cette intégration.",
     "xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyNamespaceHelpLabel": "Modifiez l'espace de nom par défaut hérité de la politique d'agent sélectionnée. Ce paramètre modifie le nom du flux de données de l'intégration. {learnMore}.",
-    "xpack.fleet.createPackagePolicy.stepConfigure.showStreamsAriaLabel": "Afficher les entrées {type}",
     "xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsDescriptionText": "{count, plural, one {# agent est enregistré} other {# agents sont enregistrés}} avec la politique d'agent sélectionnée.",
     "xpack.fleet.createPackagePolicy.transformInstallWithCurrentUserPermissionCallout": "Ce package a {count, plural, one {une ressource de transformation qui sera créée et démarrée} other {# ressources de transformation qui seront créées et démarrées}} avec les mêmes rôles que l'utilisateur responsable de l'installation du package.",
     "xpack.fleet.currentUpgrade.confirmDescription": "Cette action provoquera l'annulation de la mise à niveau de {nbAgents, plural, one {# agent} other {# agents}}",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -17582,10 +17582,8 @@
     "xpack.fleet.createPackagePolicy.multiPageTitle": "{title}統合を設定",
     "xpack.fleet.createPackagePolicy.pageTitleWithPackageName": "{packageName}統合の追加",
     "xpack.fleet.createPackagePolicy.stepConfigure.errorCountText": "{count, plural, other  {# 件のエラー}}",
-    "xpack.fleet.createPackagePolicy.stepConfigure.hideStreamsAriaLabel": "{type}入力を非表示",
     "xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyDataRetentionText": "デフォルトでは、すべてのログとメトリックがホットティアに格納されます。この統合のデータ保持ポリシーの変更については、{learnMore}してください。",
     "xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyNamespaceHelpLabel": "選択したエージェントポリシーから継承されたデフォルト名前空間を変更します。この設定により、統合のデータストリームの名前が変更されます。{learnMore}。",
-    "xpack.fleet.createPackagePolicy.stepConfigure.showStreamsAriaLabel": "{type}入力を表示",
     "xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsDescriptionText": "{count, plural, other  {# 個のエージェント}}が選択したエージェントポリシーで登録されています。",
     "xpack.fleet.createPackagePolicy.transformInstallWithCurrentUserPermissionCallout": "このパッケージには、パッケージをインストールするユーザーと同じロールで作成、開始される{count, plural, one {1個の変換アセット} other {# 変換アセット}}があります。",
     "xpack.fleet.currentUpgrade.confirmDescription": "{nbAgents, plural, other {# 個のエージェント}}のアップグレードがキャンセルされます",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -17609,10 +17609,8 @@
     "xpack.fleet.createPackagePolicy.multiPageTitle": "设置 {title} 集成",
     "xpack.fleet.createPackagePolicy.pageTitleWithPackageName": "添加 {packageName} 集成",
     "xpack.fleet.createPackagePolicy.stepConfigure.errorCountText": "{count, plural, other {# 个错误}}",
-    "xpack.fleet.createPackagePolicy.stepConfigure.hideStreamsAriaLabel": "隐藏 {type} 输入",
     "xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyDataRetentionText": "默认情况下，所有日志和指标数据存储在热层中。{learnMore}如何更改此集成的数据保留策略。",
     "xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyNamespaceHelpLabel": "更改从选定代理策略继承的默认命名空间。此设置将更改集成的数据流的名称。{learnMore}。",
-    "xpack.fleet.createPackagePolicy.stepConfigure.showStreamsAriaLabel": "显示 {type} 输入",
     "xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsDescriptionText": "{count, plural, other {# 个代理}}已注册到选定代理策略。",
     "xpack.fleet.createPackagePolicy.transformInstallWithCurrentUserPermissionCallout": "此软件包具有 {count, plural, one {一个转换资产} other {# 个转换资产}}，它们将使用与安装软件包的用户相同的角色创建并启动。",
     "xpack.fleet.currentUpgrade.confirmDescription": "此操作会取消升级 {nbAgents, plural, other {# 个代理}}",