fix: [Security > Get Started][SCREEN READER]: Accordion arrow buttons…

… to expand/collapse sections need unique accessible labels Closes: elastic/security-team#8929
alexwizp · Apr 16, 2024 · a9edafd · a9edafd
1 parent cba0e7f
commit a9edafd
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 22 deletions.
diff --git a/...ns/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx b/...ns/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx
@@ -26,11 +26,7 @@ import type {
   StepId,
   Step,
 } from '../types';
-import {
-  ALL_DONE_TEXT,
-  COLLAPSE_STEP_BUTTON_LABEL,
-  EXPAND_STEP_BUTTON_LABEL,
-} from '../translations';
+import { ALL_DONE_TEXT, EXPAND_STEP_BUTTON_LABEL } from '../translations';
 
 import { StepContent } from './step_content';
 import { useCheckStepCompleted } from '../hooks/use_check_step_completed';
@@ -149,7 +145,8 @@ const CardStepComponent: React.FC<{
               color="primary"
               onClick={toggleStep}
               iconType={isExpandedStep ? 'arrowUp' : 'arrowDown'}
-              aria-label={isExpandedStep ? COLLAPSE_STEP_BUTTON_LABEL : EXPAND_STEP_BUTTON_LABEL}
+              aria-label={EXPAND_STEP_BUTTON_LABEL(title ?? '')}
+              aria-expanded={isExpandedStep}
               size="xs"
               css={toggleButtonStyles}
               isDisabled={!hasStepContent}

diff --git a/...lugins/security_solution/public/common/components/landing_page/onboarding/translations.ts b/...lugins/security_solution/public/common/components/landing_page/onboarding/translations.ts
@@ -269,16 +269,8 @@ export const ALL_DONE_TEXT = i18n.translate(
   }
 );
 
-export const COLLAPSE_STEP_BUTTON_LABEL = i18n.translate(
-  'xpack.securitySolution.onboarding.togglePanel.collapseStepButton.label',
-  {
-    defaultMessage: 'Collapse',
-  }
-);
-
-export const EXPAND_STEP_BUTTON_LABEL = i18n.translate(
-  'xpack.securitySolution.onboarding.togglePanel.expandStepButton.label',
-  {
-    defaultMessage: 'Expand',
-  }
-);
+export const EXPAND_STEP_BUTTON_LABEL = (title: string) =>
+  i18n.translate('xpack.securitySolution.onboarding.togglePanel.expandStepButton.ariaLabel', {
+    defaultMessage: 'Expand "{title}"',
+    values: { title },
+  });
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -37302,7 +37302,6 @@
     "xpack.securitySolution.onboarding.togglePanel.done.title": "Étape terminée",
     "xpack.securitySolution.onboarding.togglePanel.empty.description": "Activez une bascule pour poursuivre votre expérience \"Démarrer\" organisée",
     "xpack.securitySolution.onboarding.togglePanel.empty.title": "Hmm, on dirait qu’il n’y a rien ici",
-    "xpack.securitySolution.onboarding.togglePanel.expandStepButton.label": "Développer",
     "xpack.securitySolution.onboarding.togglePanel.markAsDoneTitle": "Marquer comme terminé",
     "xpack.securitySolution.onboarding.togglePanel.productBadge.analytics": "Analyse",
     "xpack.securitySolution.onboarding.togglePanel.productBadge.cloud": "Cloud",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -37271,7 +37271,6 @@
     "xpack.securitySolution.onboarding.togglePanel.done.title": "ステップ完了",
     "xpack.securitySolution.onboarding.togglePanel.empty.description": "トグルをオンにすると、キュレーションされた「基本操作」エクスペリエンスを続行できます",
     "xpack.securitySolution.onboarding.togglePanel.empty.title": "何もないようです",
-    "xpack.securitySolution.onboarding.togglePanel.expandStepButton.label": "拡張",
     "xpack.securitySolution.onboarding.togglePanel.markAsDoneTitle": "完了に設定",
     "xpack.securitySolution.onboarding.togglePanel.productBadge.analytics": "分析",
     "xpack.securitySolution.onboarding.togglePanel.productBadge.cloud": "クラウド",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -37314,7 +37314,6 @@
     "xpack.securitySolution.onboarding.togglePanel.done.title": "步骤已完成",
     "xpack.securitySolution.onboarding.togglePanel.empty.description": "打开切换按钮，继续您策展的“开始使用”体验",
     "xpack.securitySolution.onboarding.togglePanel.empty.title": "嗯，那里似乎没有任何内容",
-    "xpack.securitySolution.onboarding.togglePanel.expandStepButton.label": "展开",
     "xpack.securitySolution.onboarding.togglePanel.markAsDoneTitle": "标记为已完成",
     "xpack.securitySolution.onboarding.togglePanel.productBadge.analytics": "分析",
     "xpack.securitySolution.onboarding.togglePanel.productBadge.cloud": "云",