Skip to content
Closed
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/9028.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**
Comment thread
alexwizp marked this conversation as resolved.
Outdated

- Fixed duplicated announcements for checked options in `EuiSelectableListItem`.
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,34 @@ export interface EuiScreenReaderOnlyProps {
* For keyboard navigation, force content to display visually upon focus/focus-within.
*/
showOnFocus?: boolean;

/**
* Optional CSS class(es) to apply to the outermost element of the component.
* This allows for custom styling or theming.
*/

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding these JSDoc 馃檶馃徎

className?: string;

/**
* Optional HTML id attribute for the outermost element.
* Can be used for linking with labels, aria attributes, or targeting the element.
*/
id?: string;
}

export const EuiScreenReaderOnly: FunctionComponent<
EuiScreenReaderOnlyProps
> = ({ children, className, showOnFocus }) => {
> = ({ children, className, showOnFocus, id }) => {
const classes = classNames(className, children.props.className);

const props = useMemo(
() => ({
id: id || children.props.id,
className: classes.length ? classes : undefined,
css: showOnFocus
? styles['euiScreenReaderOnly-showOnFocus']
: styles.euiScreenReaderOnly,
}),
[classes, showOnFocus]
[id, children.props.id, classes, showOnFocus]
);

return cloneElementWithCss(children, props);
Expand Down
20 changes: 12 additions & 8 deletions packages/eui/src/components/filter_group/filter_group.a11y.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -253,20 +253,24 @@ describe('EuiFilterGroup multiselect example', () => {
cy.realPress('Tab');
cy.repeatRealPress('ArrowDown', 3);
cy.realPress('Enter');

cy.get('li[aria-selected="true"]')
.find('span.euiSelectableListItem__text')
.should(
'have.text',
'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.'
);
.should('have.text', 'Dmitri Shostakovich');
cy.get('li[aria-selected="true"]')
.find('.css-gb1zbv-euiScreenReaderOnly')
.should('have.text', '- To exclude this option, press Enter.');

cy.realPress('ArrowDown');
cy.repeatRealPress('Enter');

cy.get('li[aria-selected="true"]')
.find('span.euiSelectableListItem__text')
.should(
'have.text',
'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.'
);
.should('have.text', 'Felix Mendelssohn-Bartholdy');
cy.get('li[aria-selected="true"]')
.find('.css-gb1zbv-euiScreenReaderOnly')
.should('have.text', '- To uncheck this option, press Enter.');

cy.checkAxe();
});

Expand Down
Loading