mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
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:
parent
01cf91240d
commit
930f0e7cbc
4 changed files with 6 additions and 5 deletions
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue