mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
fix: [Obs Cases][SCREEN READER] Icons and repeated controls need unique accessible labels: 0003 (#188005)
Closes: https://github.com/elastic/observability-dev/issues/3640
# Description
Observability has a lot of icons that are used for controls and table
row actions. These icons often have the same aria-label repeated across
rows. While this meets the letter of SC 1.3.1: Info and Relationships,
the repeated generic labels do not usually answer question what users
are editing, or what users are deleting. We want to provide clear labels
for each row to make the implicit relationships sighted users depend on,
explicit for screen reader users.
# What was changed?:
1. `aria-label` attribute was updated for `CasesTable` -> `ActionColumn`
# Screen
<img width="1546" alt="image"
src="014f613f
-91b6-4bbb-a8f0-04a4e30ff3ba">
This commit is contained in:
parent
189fc763f5
commit
d0d3847c7e
2 changed files with 9 additions and 1 deletions
|
@ -153,6 +153,14 @@ export const ACTIONS = i18n.translate('xpack.cases.allCases.actions', {
|
|||
defaultMessage: 'Actions',
|
||||
});
|
||||
|
||||
export const ACTIONS_BUTTON_ARIA_LABEL = (title: string) =>
|
||||
i18n.translate('xpack.cases.allCases.actions.button.ariaLabel', {
|
||||
defaultMessage: 'Actions for "{title}" column',
|
||||
values: {
|
||||
title,
|
||||
},
|
||||
});
|
||||
|
||||
export const NO_TAGS_AVAILABLE = i18n.translate('xpack.cases.allCases.noTagsAvailable', {
|
||||
defaultMessage: 'No tags available',
|
||||
});
|
||||
|
|
|
@ -174,7 +174,7 @@ const ActionColumnComponent: React.FC<{ theCase: CaseUI; disableActions: boolean
|
|||
<EuiButtonIcon
|
||||
onClick={tooglePopover}
|
||||
iconType="boxesHorizontal"
|
||||
aria-label={i18n.ACTIONS}
|
||||
aria-label={i18n.ACTIONS_BUTTON_ARIA_LABEL(theCase.title)}
|
||||
color="text"
|
||||
key={`case-action-popover-button-${theCase.id}`}
|
||||
data-test-subj={`case-action-popover-button-${theCase.id}`}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue