Skip to content

[EuiSelectable][EuiComboBox] Fix duplicated screen reader announcements of option name and checked state #9850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
alexwizp wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[EuiSelectable][EuiComboBox] Fix duplicated screen reader announcements of option name and checked state #9850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
74cbaca
[EuiSelectable] Remove redundant "Checked option." screen reader anno…
alexwizp Jul 28, 2026
4f494fa
Add changelog entry
alexwizp Jul 28, 2026
ba274dd
[EuiSelectable][EuiComboBox] Move option title attribute to the text …
alexwizp Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/eui/changelogs/upcoming/9850.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**Accessibility**

- Improved the accessibility of `EuiSelectable` by removing the redundant "Checked option." screen reader text from checked options, which caused screen readers to announce the checked state twice (the state is already conveyed via `aria-checked`/`aria-selected`)
- Improved the accessibility of `EuiSelectable` and `EuiComboBox` by moving the `title` attribute from the option element to its inner text element. On the option, it became the option's accessible description, causing screen readers to announce the option name twice
18 changes: 9 additions & 9 deletions packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,13 +180,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-0"
role="option"
style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
title="Titan"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Titan"
>
Titan
</span>
Expand All @@ -201,13 +201,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-1"
role="option"
style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
title="Enceladus"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Enceladus"
>
Enceladus
</span>
Expand All @@ -222,13 +222,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-2"
role="option"
style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
title="Mimas"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Mimas"
>
Mimas
</span>
Expand All @@ -243,13 +243,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-3"
role="option"
style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
title="Dione"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Dione"
>
Dione
</span>
Expand All @@ -264,13 +264,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-4"
role="option"
style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
title="Iapetus"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Iapetus"
>
Iapetus
</span>
Expand All @@ -285,13 +285,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-5"
role="option"
style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
title="Phoebe"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Phoebe"
>
Phoebe
</span>
Expand All @@ -306,13 +306,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-6"
role="option"
style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
title="Rhea"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Rhea"
>
Rhea
</span>
Expand All @@ -327,13 +327,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-7"
role="option"
style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
</span>
Expand All @@ -348,13 +348,13 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
id="generated-id__option-8"
role="option"
style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
title="Tethys"
>
<span
class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
>
<span
class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
title="Tethys"
>
Tethys
</span>
Expand Down
7 changes: 6 additions & 1 deletion packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
// uses the original `options` array for the index to ensure a stable `id`, otherwise `aria-activedescendant`
// loses focus on selecting an option (due to actively removing it from the list)
id={rootId(`_option-${options.indexOf(option)}`)}
title={hasNativeTruncation && !toolTipContent ? label : undefined}
key={option.key ?? option.label}
prepend={option.prepend}
append={
Expand Down Expand Up @@ -289,6 +288,12 @@ export class EuiComboBoxOptionsList<T> extends Component<
contentProps={{
className: 'euiComboBoxOption__content',
}}
textProps={{
// `title` must not be set on the option element itself - it would
// become the option's accessible description, causing screen readers
// to announce the option name twice
title: hasNativeTruncation && !toolTipContent ? label : undefined,
}}
onClick={() => {
if (onOptionClick) {
onOptionClick(option);
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/filter_group/filter_group.a11y.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ describe('EuiFilterGroup multiselect example', () => {
.find('span.euiSelectableListItem__text')
.should(
'have.text',
'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.'
'Dmitri Shostakovich. To exclude this option, press Enter.'
);
});
cy.realPress('ArrowDown');
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/list_item_layout/_list_item_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export type EuiListItemLayoutSharedProps = CommonProps &
/**
* Props applied to the label text element.
*/
textProps?: CommonProps;
textProps?: CommonProps & HTMLAttributes<HTMLElement>;
prependProps?: CommonProps;
appendProps?: CommonProps;
tooltipProps?: Omit<EuiToolTipProps, 'children'>;
Expand Down
12 changes: 6 additions & 6 deletions packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ exports[`EuiSelectable custom options with data 1`] = `
id="generated-id_listbox_option-0"
role="option"
style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
title="Titan"
>
<span
class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
Expand All @@ -48,6 +47,7 @@ exports[`EuiSelectable custom options with data 1`] = `
</span>
<span
class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
title="Titan"
>
<span>
VI
Expand All @@ -66,7 +66,6 @@ exports[`EuiSelectable custom options with data 1`] = `
id="generated-id_listbox_option-1"
role="option"
style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
title="Enceladus"
>
<span
class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
Expand All @@ -82,6 +81,7 @@ exports[`EuiSelectable custom options with data 1`] = `
</span>
<span
class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
title="Enceladus"
>
<span>
II
Expand All @@ -100,7 +100,6 @@ exports[`EuiSelectable custom options with data 1`] = `
id="generated-id_listbox_option-2"
role="option"
style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
<span
class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
Expand All @@ -116,6 +115,7 @@ exports[`EuiSelectable custom options with data 1`] = `
</span>
<span
class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
<span>
XVII
Expand Down Expand Up @@ -180,7 +180,6 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
id="generated-id_listbox_option-0"
role="option"
style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
title="Titan"
>
<span
class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
Expand All @@ -196,6 +195,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
</span>
<span
class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
title="Titan"
>
Titan
</span>
Expand All @@ -210,7 +210,6 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
id="generated-id_listbox_option-1"
role="option"
style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
title="Enceladus"
>
<span
class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
Expand All @@ -226,6 +225,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
</span>
<span
class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
title="Enceladus"
>
Enceladus
</span>
Expand All @@ -240,7 +240,6 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
id="generated-id_listbox_option-2"
role="option"
style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
<span
class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
Expand All @@ -256,6 +255,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
</span>
<span
class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
</span>
Expand Down
Loading