fix: [Serverless Left Nav][SCREEN READER]: Buttons to expand/collapse sub-menus need unique accessible labels (#179554)

Closes: https://github.com/elastic/security-team/issues/8928

## Description
The square four dot menus to expand/collapse the submenus for
Dashboards, Rules, et al. have the same accessible label and no
indication if the sub-menu is expanded or collapsed. These can be
improved with unique `aria-label` attributes and adding an
`aria-expanded=true | false"` attribute. Screenshot below.

### 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. Tab through the left navigation and verify each button announces the
same general label name on focus

### What was changed?: 

1. The required `aria-expanded` attribute has been added for the
`NavigationItemOpenPanel`.
2. The message for the `aria-label` attribute has been updated to
reflect the changed requirements.

### Screen
#### a11y tree: 

<img width="616" alt="image"
src="8bf7fb1c-ff77-4cd6-b448-81c4ebc3905e">
This commit is contained in:
Alexey Antonov 2024-03-28 16:07:06 +02:00 committed by GitHub
parent 01cf91240d
commit 930f0e7cbc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 6 additions and 5 deletions

View file

@ -96,6 +96,8 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
}
}, [openPanel, closePanel, item, selectedNode]);
const isExpanded = selectedNode?.path === path;
return (
<EuiFlexGroup alignItems="center" gutterSize="xs">
<EuiFlexItem style={{ flexBasis: isIconVisible ? '80%' : '100%' }}>
@ -115,15 +117,17 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
{isIconVisible && (
<EuiFlexItem grow={0} style={{ flexBasis: '15%' }}>
<EuiButtonIcon
display={selectedNode?.path === path ? 'base' : 'empty'}
display={isExpanded ? 'base' : 'empty'}
size="s"
color="text"
onClick={onIconClick}
iconType="spaces"
iconSize="m"
aria-label={i18n.translate('sharedUXPackages.chrome.sideNavigation.togglePanel', {
defaultMessage: 'Toggle panel navigation',
defaultMessage: 'Toggle "{title}" panel navigation',
values: { title },
})}
aria-expanded={isExpanded}
data-test-subj={buttonDataTestSubj}
/>
</EuiFlexItem>

View file

@ -6166,7 +6166,6 @@
"sharedUXPackages.card.noData.title": "Ajouter Elastic Agent",
"sharedUXPackages.chrome.sideNavigation.betaBadge.label": "Bêta",
"sharedUXPackages.chrome.sideNavigation.recentlyAccessed.title": "Récent",
"sharedUXPackages.chrome.sideNavigation.togglePanel": "Afficher/Masquer le panneau de navigation",
"sharedUXPackages.codeEditor.ariaLabel": "Éditeur de code",
"sharedUXPackages.codeEditor.enterKeyLabel": "Entrée",
"sharedUXPackages.codeEditor.escapeKeyLabel": "Échap",

View file

@ -6156,7 +6156,6 @@
"sharedUXPackages.card.noData.title": "Elasticエージェントの追加",
"sharedUXPackages.chrome.sideNavigation.betaBadge.label": "ベータ",
"sharedUXPackages.chrome.sideNavigation.recentlyAccessed.title": "最近",
"sharedUXPackages.chrome.sideNavigation.togglePanel": "パネルナビゲーションを切り替える",
"sharedUXPackages.codeEditor.ariaLabel": "コードエディター",
"sharedUXPackages.codeEditor.enterKeyLabel": "Enter",
"sharedUXPackages.codeEditor.escapeKeyLabel": "Esc",

View file

@ -6169,7 +6169,6 @@
"sharedUXPackages.card.noData.title": "添加 Elastic 代理",
"sharedUXPackages.chrome.sideNavigation.betaBadge.label": "公测版",
"sharedUXPackages.chrome.sideNavigation.recentlyAccessed.title": "最近",
"sharedUXPackages.chrome.sideNavigation.togglePanel": "切换面板导航",
"sharedUXPackages.codeEditor.ariaLabel": "代码编辑器",
"sharedUXPackages.codeEditor.enterKeyLabel": "Enter",
"sharedUXPackages.codeEditor.escapeKeyLabel": "Esc",