From 184446c08c6fa9180268be165388aceffbd385f5 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 29 Apr 2024 12:50:24 +0300 Subject: [PATCH] fix: [Security > Get Started][SCREEN READER]: Accordion arrow buttons to expand/collapse sections need unique accessible labels (#180907) Closes: https://github.com/elastic/security-team/issues/8929 ## Description The Getting Started page has several accordions with arrow buttons to expand and collapse the sections. These buttons have generic "Expand" accessible labels that do not provide enough information to screen readers and voice activation technologies. We should update the accessible labels to include the section name. ### Steps to recreate 1. Open the [QA environment](https://console.qa.cld.elstc.co/) and create a new Security serverless project if none exist 2. Once your Security project is created, open it and turn on a screen reader of your choice 3. Load the Getting Started page (should be by default, but just in case) 4. Tab through the accordion sections and verify each one says "Expand" when the arrow button takes focus ### What was done?: 1. The `aria-expanded` attribute was added to the toggle-button. 2. The `aria-label` was updated to display the title part. 3. The `COLLAPSE_STEP_BUTTON_LABEL` translation was removed. ### Screen image --- .../onboarding/card_step/index.tsx | 9 +++------ .../landing_page/onboarding/translations.ts | 18 +++++------------- .../translations/translations/fr-FR.json | 2 -- .../translations/translations/ja-JP.json | 2 -- .../translations/translations/zh-CN.json | 2 -- 5 files changed, 8 insertions(+), 25 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx index fe5b628a07fd2..2e6886af03afa 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx +++ b/x-pack/plugins/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/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/translations.ts index c263e52182175..bad766fc41a4d 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/translations.ts +++ b/x-pack/plugins/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 index 8fb5b6c8f221a..fca439cd4c77f 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -37257,11 +37257,9 @@ "xpack.securitySolution.onboarding.task.viewAlerts": "Afficher les alertes", "xpack.securitySolution.onboarding.task.viewAlerts.callout.title": "afficher les alertes", "xpack.securitySolution.onboarding.task.viewDashboards.callout.title": "afficher les tableaux de bord", - "xpack.securitySolution.onboarding.togglePanel.collapseStepButton.label": "Réduire", "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 index ca392e88b3a51..ef5d31f62c682 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -37226,11 +37226,9 @@ "xpack.securitySolution.onboarding.task.viewAlerts": "アラートを表示", "xpack.securitySolution.onboarding.task.viewAlerts.callout.title": "アラートを表示", "xpack.securitySolution.onboarding.task.viewDashboards.callout.title": "ダッシュボードを表示", - "xpack.securitySolution.onboarding.togglePanel.collapseStepButton.label": "縮小", "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 index d690125c9de2b..494fc72f0396e 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -37269,11 +37269,9 @@ "xpack.securitySolution.onboarding.task.viewAlerts": "查看告警", "xpack.securitySolution.onboarding.task.viewAlerts.callout.title": "查看告警", "xpack.securitySolution.onboarding.task.viewDashboards.callout.title": "查看仪表板", - "xpack.securitySolution.onboarding.togglePanel.collapseStepButton.label": "折叠", "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": "云",