feat(eslint-plugin): add new @elastic/eui/tooltip-focusable-anchor rule #9051
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alexwizp
commented
Sep 23, 2025
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one |
Contributor
Author
There was a problem hiding this comment.
Note
I've unified license header across all files in eslint-plugin package. I found that we used 3 different texts in that package which is not correct
alexwizp
commented
Sep 23, 2025
| ### `@elastic/eui/require-aria-label-for-modals` | ||
|
|
||
| Ensures that EUI modal components (`EuiModal`, `EuiFlyout`, `EuiFlyoutResizable` ,`EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. | ||
| Ensure that EUI modal components (`EuiModal`, `EuiFlyout`, `EuiFlyoutResizable` ,`EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs. |
Contributor
Author
There was a problem hiding this comment.
Note
In some places we use Ensures in some Ensures. I've fixed it so it's consistent.
alexwizp
commented
Sep 23, 2025
| Generally, tooltips should provide short, **non-essential**, contextual information, usually naming or describing with more detail. If you need interactive content or anything other than text, we recommend using [EuiPopover](../containers/popover.mdx) instead. | ||
|
|
||
| :::accessibility Accessibility requirements | ||
|
|
Contributor
Author
There was a problem hiding this comment.
Note
I think that message not clear enough cause I see a lot of cases where we use Tooltips with non-interactive anchor element.
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
|
weronikaolejniczak
approved these changes
Sep 23, 2025
Contributor
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
There was a problem hiding this comment.
LGTM! 🟢 Thank you for the cleanup as well, @alexwizp!
alexwizp
added a commit
to elastic/kibana
that referenced
this pull request
Oct 9, 2025
…rule (#236721) Closes: #204767 Closes: #221091 **Summary** This PR fixes accessibility violations related to EuiTooltip usage across the codebase. **Details** 1. Ensures that all `EuiTooltip` components are anchored to elements that can receive keyboard focus. 2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`, `EuiText`) used as tooltip anchors so they are keyboard-focusable. **Why** Tooltips anchored to non-focusable elements were not accessible to keyboard users. These changes improve compliance with accessibility guidelines and ensure a better experience for all users. **More context** Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint. See elastic/eui#9051 for more details --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 9, 2025
…rule (elastic#236721) Closes: elastic#204767 Closes: elastic#221091 **Summary** This PR fixes accessibility violations related to EuiTooltip usage across the codebase. **Details** 1. Ensures that all `EuiTooltip` components are anchored to elements that can receive keyboard focus. 2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`, `EuiText`) used as tooltip anchors so they are keyboard-focusable. **Why** Tooltips anchored to non-focusable elements were not accessible to keyboard users. These changes improve compliance with accessibility guidelines and ensure a better experience for all users. **More context** Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint. See elastic/eui#9051 for more details --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 7088e5c)
alexwizp
added a commit
to alexwizp/kibana
that referenced
this pull request
Oct 9, 2025
…rule (elastic#236721) Closes: elastic#204767 Closes: elastic#221091 **Summary** This PR fixes accessibility violations related to EuiTooltip usage across the codebase. **Details** 1. Ensures that all `EuiTooltip` components are anchored to elements that can receive keyboard focus. 2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`, `EuiText`) used as tooltip anchors so they are keyboard-focusable. **Why** Tooltips anchored to non-focusable elements were not accessible to keyboard users. These changes improve compliance with accessibility guidelines and ensure a better experience for all users. **More context** Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint. See elastic/eui#9051 for more details --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 7088e5c) # Conflicts: # src/platform/packages/private/kbn-index-editor/src/components/file_clashes.tsx # src/platform/packages/private/kbn-index-editor/src/components/flyout_content.tsx # src/platform/packages/shared/kbn-apm-ui-shared/src/components/timestamp/index.tsx # src/platform/packages/shared/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx # src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/columns/get_columns.tsx # src/platform/plugins/shared/workflows_management/public/components/workflows_empty_state/workflows_empty_state.tsx # x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx # x-pack/platform/plugins/shared/ingest_pipelines/public/application/sections/pipelines_list/flyout_content/details_panel.tsx # x-pack/platform/plugins/shared/ingest_pipelines/public/application/sections/pipelines_list/table.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/schema_editor/field_status.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/processors/processor_metrics.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_management/classic.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_management/wired.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/idle_routing_stream_entry.tsx # x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/badge/sync_badge.tsx # x-pack/solutions/observability/plugins/apm/public/components/shared/trace_waterfall/bar_details.tsx # x-pack/solutions/observability/plugins/observability/common/components/elapsed_timestamp_tooltip.tsx # x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/fleet_extensions/common.tsx # x-pack/solutions/security/plugins/security_solution/public/management/components/console_argument_selectors/custom_scripts_selector/custom_script_selector.tsx # x-pack/solutions/security/plugins/security_solution/public/management/components/console_argument_selectors/pending_actions_selector/pending_actions_selector.tsx # x-pack/solutions/security/plugins/security_solution/public/reports/components/ai_value/compare_percentage_badge.tsx
kibanamachine
added a commit
to elastic/kibana
that referenced
this pull request
Oct 9, 2025
…SLint rule (#236721) (#238227) # Backport This will backport the following commits from `main` to `9.2`: - [Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)](#236721) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-09T11:21:50Z","message":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)\n\nCloses: https://github.com/elastic/kibana/issues/204767\nCloses: https://github.com/elastic/kibana/issues/221091\n\n**Summary**\n\nThis PR fixes accessibility violations related to EuiTooltip usage\nacross the codebase.\n\n**Details**\n\n1. Ensures that all `EuiTooltip` components are anchored to elements\nthat can receive keyboard focus.\n2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`,\n`EuiText`) used as tooltip anchors so they are keyboard-focusable.\n\n**Why**\n\nTooltips anchored to non-focusable elements were not accessible to\nkeyboard users. These changes improve compliance with accessibility\nguidelines and ensure a better experience for all users.\n\n**More context**\nFix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint.\nSee elastic/eui#9051 for more details\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"7088e5c0994a2206251cc55ad8abf684797cdcde","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:Fleet","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","backport:version","v9.2.0","v9.1.5","v9.3.0"],"title":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule","number":236721,"url":"https://github.com/elastic/kibana/pull/236721","mergeCommit":{"message":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)\n\nCloses: https://github.com/elastic/kibana/issues/204767\nCloses: https://github.com/elastic/kibana/issues/221091\n\n**Summary**\n\nThis PR fixes accessibility violations related to EuiTooltip usage\nacross the codebase.\n\n**Details**\n\n1. Ensures that all `EuiTooltip` components are anchored to elements\nthat can receive keyboard focus.\n2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`,\n`EuiText`) used as tooltip anchors so they are keyboard-focusable.\n\n**Why**\n\nTooltips anchored to non-focusable elements were not accessible to\nkeyboard users. These changes improve compliance with accessibility\nguidelines and ensure a better experience for all users.\n\n**More context**\nFix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint.\nSee elastic/eui#9051 for more details\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"7088e5c0994a2206251cc55ad8abf684797cdcde"}},"sourceBranch":"main","suggestedTargetBranches":["9.2","9.1"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/236721","number":236721,"mergeCommit":{"message":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)\n\nCloses: https://github.com/elastic/kibana/issues/204767\nCloses: https://github.com/elastic/kibana/issues/221091\n\n**Summary**\n\nThis PR fixes accessibility violations related to EuiTooltip usage\nacross the codebase.\n\n**Details**\n\n1. Ensures that all `EuiTooltip` components are anchored to elements\nthat can receive keyboard focus.\n2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`,\n`EuiText`) used as tooltip anchors so they are keyboard-focusable.\n\n**Why**\n\nTooltips anchored to non-focusable elements were not accessible to\nkeyboard users. These changes improve compliance with accessibility\nguidelines and ensure a better experience for all users.\n\n**More context**\nFix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint.\nSee elastic/eui#9051 for more details\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"7088e5c0994a2206251cc55ad8abf684797cdcde"}}]}] BACKPORT--> Co-authored-by: Alexey Antonov <[email protected]>
alexwizp
added a commit
to elastic/kibana
that referenced
this pull request
Oct 10, 2025
…SLint rule (#236721) (#238242) # Backport This will backport the following commits from `main` to `9.1`: - [Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)](#236721) <!--- Backport version: 10.0.2 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-09T11:21:50Z","message":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)\n\nCloses: https://github.com/elastic/kibana/issues/204767\nCloses: https://github.com/elastic/kibana/issues/221091\n\n**Summary**\n\nThis PR fixes accessibility violations related to EuiTooltip usage\nacross the codebase.\n\n**Details**\n\n1. Ensures that all `EuiTooltip` components are anchored to elements\nthat can receive keyboard focus.\n2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`,\n`EuiText`) used as tooltip anchors so they are keyboard-focusable.\n\n**Why**\n\nTooltips anchored to non-focusable elements were not accessible to\nkeyboard users. These changes improve compliance with accessibility\nguidelines and ensure a better experience for all users.\n\n**More context**\nFix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint.\nSee elastic/eui#9051 for more details\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"7088e5c0994a2206251cc55ad8abf684797cdcde","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:Fleet","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","backport:version","v9.2.0","v9.1.5","v9.3.0"],"title":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule","number":236721,"url":"https://github.com/elastic/kibana/pull/236721","mergeCommit":{"message":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)\n\nCloses: https://github.com/elastic/kibana/issues/204767\nCloses: https://github.com/elastic/kibana/issues/221091\n\n**Summary**\n\nThis PR fixes accessibility violations related to EuiTooltip usage\nacross the codebase.\n\n**Details**\n\n1. Ensures that all `EuiTooltip` components are anchored to elements\nthat can receive keyboard focus.\n2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`,\n`EuiText`) used as tooltip anchors so they are keyboard-focusable.\n\n**Why**\n\nTooltips anchored to non-focusable elements were not accessible to\nkeyboard users. These changes improve compliance with accessibility\nguidelines and ensure a better experience for all users.\n\n**More context**\nFix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint.\nSee elastic/eui#9051 for more details\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"7088e5c0994a2206251cc55ad8abf684797cdcde"}},"sourceBranch":"main","suggestedTargetBranches":["9.1"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/238227","number":238227,"state":"OPEN"},{"branch":"9.1","label":"v9.1.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/236721","number":236721,"mergeCommit":{"message":"Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint rule (#236721)\n\nCloses: https://github.com/elastic/kibana/issues/204767\nCloses: https://github.com/elastic/kibana/issues/221091\n\n**Summary**\n\nThis PR fixes accessibility violations related to EuiTooltip usage\nacross the codebase.\n\n**Details**\n\n1. Ensures that all `EuiTooltip` components are anchored to elements\nthat can receive keyboard focus.\n2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`,\n`EuiText`) used as tooltip anchors so they are keyboard-focusable.\n\n**Why**\n\nTooltips anchored to non-focusable elements were not accessible to\nkeyboard users. These changes improve compliance with accessibility\nguidelines and ensure a better experience for all users.\n\n**More context**\nFix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint.\nSee elastic/eui#9051 for more details\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"7088e5c0994a2206251cc55ad8abf684797cdcde"}}]}] BACKPORT-->
tsullivan
pushed a commit
that referenced
this pull request
Oct 15, 2025
rylnd
pushed a commit
to rylnd/kibana
that referenced
this pull request
Oct 17, 2025
…rule (elastic#236721) Closes: elastic#204767 Closes: elastic#221091 **Summary** This PR fixes accessibility violations related to EuiTooltip usage across the codebase. **Details** 1. Ensures that all `EuiTooltip` components are anchored to elements that can receive keyboard focus. 2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`, `EuiText`) used as tooltip anchors so they are keyboard-focusable. **Why** Tooltips anchored to non-focusable elements were not accessible to keyboard users. These changes improve compliance with accessibility guidelines and ensure a better experience for all users. **More context** Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint. See elastic/eui#9051 for more details --------- Co-authored-by: kibanamachine <[email protected]>
acstll
added a commit
to elastic/kibana
that referenced
this pull request
Oct 23, 2025
- `@elastic/eui`: `v107.0.0` ⏩ `v107.0.1` - `@elastic/eslint-plugin-eui`: `v2.4.0` ⏩ `v2.5.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) --- ## Changes Related to elastic/eui#9100 - Updated snapshot f90ae29 - Added missing `aria-label` for `EuiBetaBadge` - [Reporting] 6d10edd - [ML] ce58009 - Added new translation key, ran `node scripts/i18n_check` — is there anything else that should be done in this regard? ## Package updates ### `@elastic/eui` [`v107.0.1`](https://github.com/elastic/eui/releases/v107.0.1) **Bug fixes** - Fixed `prismjs` theme in `EuiCodeBlock` to improve highlighting for the `yaml` language ([#9089](elastic/eui#9089)) - Fixed a visual bug on `EuiTable` where the border for rows in dark mode wasn't applied correctly ([#9115](elastic/eui#9115)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.2 ([#9102](elastic/eui#9102)) **Accessibility** - Fixed incorrect role attribute on `EuiIcon` and `EuiBetaBadge` ([#9100](elastic/eui#9100)) - Make `EuiBasicTable` respect user's reduced motion setting by not animating when in loading state. ([#9095](elastic/eui#9095)) ### `@elastic/eslint-plugin-eui` [`v2.5.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v250) - Added new `accessible-interactive-element` rule. ([#9093](elastic/eui#9093)) - Added new `tooltip-focusable-anchor` rule. ([#9051](elastic/eui#9051)) - Excluded `EuiButtonEmpty` from the `no-unnamed-interactive-element` rule. ([#9046](elastic/eui#9046)) **Bug fixes** - Fixed `no-css-color` rule to allow CSS keywords like `currentcolor`, `transparent`, and `inherit` ([#9092](elastic/eui#9092)) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
NicholasPeretti
pushed a commit
to NicholasPeretti/kibana
that referenced
this pull request
Oct 27, 2025
…rule (elastic#236721) Closes: elastic#204767 Closes: elastic#221091 **Summary** This PR fixes accessibility violations related to EuiTooltip usage across the codebase. **Details** 1. Ensures that all `EuiTooltip` components are anchored to elements that can receive keyboard focus. 2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`, `EuiText`) used as tooltip anchors so they are keyboard-focusable. **Why** Tooltips anchored to non-focusable elements were not accessible to keyboard users. These changes improve compliance with accessibility guidelines and ensure a better experience for all users. **More context** Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint. See elastic/eui#9051 for more details --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a new ESLint rule:
@elastic/eui/tooltip-focusable-anchor. The rule ensures that all anchors used as tooltips within EUI are properly focusable, improving accessibility and user experience.Screen
Tests
General checklist
Checked in both light and dark modesChecked in both MacOS and Windows high contrast modesChecked in mobileChecked in Chrome, Safari, Edge, and FirefoxChecked for accessibility including keyboard-only and screenreader modesProps have proper autodocs (using@defaultif default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesAdded or updated jest and cypress testsUpdated visual regression testsA changelog entry exists and is marked appropriately.If applicable, added the breaking change issue label (and filled out the breaking change checklist)If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)