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:
Alexey Antonov 2024-07-11 11:30:14 +03:00 committed by GitHub
parent 189fc763f5
commit d0d3847c7e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 1 deletions

View file

@ -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',
});

View file

@ -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}`}