Skip to content

Commit

Permalink
fix: Home > Project Settings > Integrations- Integrations category la…
Browse files Browse the repository at this point in the history
…bels do not inform user of related results (elastic#190235)

Closes:
elastic/observability-accessibility#136

### Description

`Home` > `Project Settings` > `Integrations`- Integrations category
labels do not inform user of related results.

### Steps to recreate

Pre-requisite:
Screen reader is activated

1. Navigate to the `Serverless Observability Solution `instance.
2. Click `Project Settings` in lower Left Nav
3. Select `Integrations`
4. Keyboard navigate to the Browse Integrations list
5. Tab through the list

### What was changed:?

1. The `aria-label` attribute has been set for the associated
`EuiFacetButton` component

### Screen: 

#### a11y tree:
<img width="990" alt="image"
src="https://github.com/user-attachments/assets/4c83314e-a980-4a44-9191-b070ffa621ed">

#### DOM:
<img width="990" alt="image"
src="https://github.com/user-attachments/assets/8a4c02cd-9688-499e-982f-a6a22c91d62c">
  • Loading branch information
alexwizp authored Aug 9, 2024
1 parent a8aa215 commit 41eaf8c
Showing 1 changed file with 8 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,14 @@ export function CategoryFacets({
id={category.id}
quantity={category.count}
onClick={() => onCategoryChange(category)}
aria-label={i18n.translate('xpack.fleet.epmList.facetButton.ariaLabel', {
defaultMessage:
'{key}, {count} {count, plural, one { integration } other { integrations }}',
values: {
key: category.title,
count: category.count,
},
})}
>
{category.title}
</EuiFacetButton>
Expand Down

0 comments on commit 41eaf8c

Please sign in to comment.