Adding aria attributes required for interactive elements eslint rule #8973

bhavyarm · 2025-08-21T12:54:20Z

This PR adds a eslint rule which ensures that interactive elements need to have their aria attributes set.

Please note this rule has already been added in Kibana but only for observability. See https://github.com/elastic/kibana/tree/main/packages/kbn-eslint-plugin-eui-a11y. We want to migrate this rule to EUI so it be implemented easily EUI wide.

packages/eslint-plugin/src/index.ts

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts

alexwizp · 2025-08-21T14:51:04Z

please also update packages/eslint-plugin/README.md file

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts

packages/eslint-plugin/changelogs/upcoming/8973.md

packages/eslint-plugin/README.md

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts

…nents without label prop

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts

packages/eslint-plugin/README.md

weronikaolejniczak

Awesome contribution, thank you, @bhavyarm! 👏🏻 I have a couple of thoughts, I tried using GH suggestions to speed up the review process. Curious what you think!

packages/eslint-plugin/changelogs/upcoming/8973.md

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts

elasticmachine · 2025-09-08T20:19:25Z

💚 Build Succeeded

History

💚 Build #1161 succeeded 973f4e8
💚 Build #1156 succeeded bee33ad
💚 Build #1151 succeeded cdc0bf5
💚 Build #1130 succeeded 6223d70
💚 Build #1128 succeeded a4cbdc2
💚 Build #1107 succeeded 911ce09

cc @bhavyarm

elasticmachine · 2025-09-08T20:32:56Z

💚 Build Succeeded

Buildkite Build
Commit: 92054d7

History

💚 Build #4654 succeeded 973f4e8
💚 Build #4650 succeeded bee33ad
💚 Build #4645 succeeded cdc0bf5
💚 Build #4630 succeeded 6223d70
💚 Build #4628 succeeded a4cbdc2
💚 Build #4614 succeeded 911ce09

cc @bhavyarm

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([elastic#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([elastic#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([elastic#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([elastic#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([#8973](elastic/eui#8973))

) > [!CAUTION] > ⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]>

…tic#237317) > [!CAUTION] > ⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]> (cherry picked from commit b419244) # Conflicts: # x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([elastic#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([elastic#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([elastic#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([elastic#8973](elastic/eui#8973))

…tic#237317) > [!CAUTION] > ⚠️ **Changes / translations were made by GenAI**. I’ve reviewed them carefully, but your code owners’ expert eyes will ensure they’re 100% right. ## Summary This PR applies the auto-fix for the newly introduced `@elastic/eui/no-unnamed-interactive-element` Ensure that appropriate aria-attributes are set for `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSelectWithWidth`,`EuiSuperSelect`,`EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs`. Without this rule, screen reader users lose context, keyboard navigation can be confusing. ## Changes 1. 🎯 Added missing ARIA attributes to elements flagged by `@elastic/eui/no-unnamed-interactive-element` — accessibility leveled up! ## Related - [elastic/eui#8843](elastic/eui#8973) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Pete Harverson <[email protected]> Co-authored-by: Cristina Amico <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]> Co-authored-by: Paulina Shakirova <[email protected]>

bhavyarm added 2 commits August 20, 2025 11:12

adding eslint a11y rule for interactive elements needing aria labels

8daf53b

fixing type errors

986e5ec

bhavyarm requested a review from alexwizp August 21, 2025 13:40

alexwizp reviewed Aug 21, 2025

View reviewed changes

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts Outdated Show resolved Hide resolved

bhavyarm added 2 commits August 21, 2025 16:17

addressing review comments

4f204f5

learning and incorporating review comments

d506bb7

alexwizp reviewed Aug 28, 2025

View reviewed changes

addressing review comments about components with label prop and compo…

a4cbdc2

…nents without label prop

bhavyarm force-pushed the addingAriaRequiredInteractiveRule branch from e6e3a57 to a4cbdc2 Compare August 29, 2025 16:42

alexwizp reviewed Aug 29, 2025

View reviewed changes

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts Outdated Show resolved Hide resolved

making review comment changes

8f1548e

bhavyarm marked this pull request as ready for review September 2, 2025 13:53

bhavyarm requested a review from a team as a code owner September 2, 2025 13:53

bhavyarm changed the title ~~[wip]Adding aria attributes required for interactive elements eslint rule~~ Adding aria attributes required for interactive elements eslint rule Sep 3, 2025

weronikaolejniczak reviewed Sep 3, 2025

View reviewed changes

packages/eslint-plugin/README.md Show resolved Hide resolved

bhavyarm self-assigned this Sep 3, 2025

bhavyarm added the accessibility label Sep 3, 2025

weronikaolejniczak reviewed Sep 3, 2025

View reviewed changes

addressing review comments

27a115c

bhavyarm force-pushed the addingAriaRequiredInteractiveRule branch from bee33ad to 27a115c Compare September 4, 2025 21:02

bhavyarm requested review from alexwizp and weronikaolejniczak September 5, 2025 12:58

weronikaolejniczak approved these changes Sep 5, 2025

View reviewed changes

adding jsdocs and fixing linting errors

e7fa987

bhavyarm force-pushed the addingAriaRequiredInteractiveRule branch from c0555c6 to e7fa987 Compare September 8, 2025 19:59

Merge branch 'main' into addingAriaRequiredInteractiveRule

92054d7

bhavyarm merged commit e2d7f59 into elastic:main Sep 8, 2025
5 checks passed

weronikaolejniczak mentioned this pull request Sep 15, 2025

[EUI] Upgrade EUI to v106.6.0 elastic/kibana#235106

Merged

alexwizp mentioned this pull request Sep 22, 2025

fix: exclude EuiButtonEmpty from the @elastic/eui/no-unnamed-interactive-element rule. #9046

Merged

alexwizp mentioned this pull request Oct 6, 2025

fix violations of @elastic/eui/no-unnamed-interactive-element elastic/kibana#237317

Merged

Adding aria attributes required for interactive elements eslint rule #8973

Adding aria attributes required for interactive elements eslint rule #8973

Uh oh!

Conversation

bhavyarm commented Aug 21, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexwizp commented Aug 21, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Sep 8, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 8, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants