diff --git a/packages/eui/changelogs/upcoming/9133.md b/packages/eui/changelogs/upcoming/9133.md new file mode 100644 index 00000000000..70ba2046209 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9133.md @@ -0,0 +1,3 @@ +**Accessibility** + +- Fixes accessibility violation by adding an `aria-label` to `EuiBetaBadge` span with `role="button"` diff --git a/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap index 671bde35970..82916258e56 100644 --- a/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap +++ b/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap @@ -134,6 +134,7 @@ exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = ` data-test-subj="DTS" > = ({ } } else { if (tooltipContent) { + // Ensure every ARIA button, has an accessible name + const ariaLabel = (() => { + if (title) return title; + if (typeof label === 'string') return label; + return undefined; + })(); + return ( = ({ role="button" css={cssStyles} className={classes} + aria-label={ariaLabel} {...rest} > {icon || label}