[EuiDatagrid] Fix interactive cell content not being disabled properly #8938

mgadewoll · 2025-08-01T12:57:17Z

Summary

This PR fixes a small issue in EuiDataGrid where interactive cell content was not correctly removed from the tab order. The issue was caused by a mix up in usages of tabIndex vs tabindex on HTML elements.

Additional changes

Additionally this PR adds an screen reader only announcement on entered cells to provide information about using the Escape key to exit cells. The cells already had information about entering cells, but did not provide the same for exiting.

For adding reliable announcements on entered cells, we need to rely on aria-live announcements instead of aria-describedby because VoiceOver does not re-focus the element, meaning the cell and its attached content would not be read. By using the new EuiLiveAnnouncer component we can ensure that all screen readers provide the additional information reliably. The aria-live region has to be available to the accessibility tree meaning it's available in the DOM of the cell, but the clear functionality of EuiLiveAnnouncer via clearAfterMs ensures the content is cleared to prevent access content.

Why are we making this change?

Fixing a bug that would result in an unexpected tab stop behavior for EuiDataGrid because not all interactive cell contents would correctly be removed from the tab order.

The additional Accessibility update aims to improve the screen reader experience by providing clearer guidance on keyboard navigation.

Screenshots

before	after
Screen.Recording.2025-08-01.at.13.35.59.mov	Screen.Recording.2025-08-01.at.13.36.16.mov

Screen reader testing

NVDA/Chrome	JAWS/Chrome	VoiceOver/Safari
Screen.Recording.2025-08-01.at.14.20.57.mov	Screen.Recording.2025-08-01.at.14.26.23.mov	Screen.Recording.2025-08-01.at.14.19.09.mov

Impact to users

🟢 There are no updates needed on consumer side.

QA

checkout this PR and revert the change of the tabindex attribute locally (commit) and compare the before and after behavior of the EuiDataGrid navigation on Tab key (e.g. using this story)
- confirm that the update ensures both usages EuiButtonIcon and EuiIconTip are correctly excluded from the tab order
verify that screen readers read the added hint about using Escape key to exit cells

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer 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)

- provides more testing variety

- due to component and color update for the info tooltip

elasticmachine · 2025-08-01T13:30:52Z

💚 Build Succeeded

History

💔 Build #967 failed 510dd28

cc @mgadewoll

elasticmachine · 2025-08-01T13:42:00Z

💚 Build Succeeded

Buildkite Build
Commit: 9f12803

cc @mgadewoll

tkajtoch · 2025-08-04T21:38:54Z

packages/eui/src/components/datagrid/body/cell/focus_utils.tsx

  interactives.forEach((element) => {
    element.setAttribute('data-euigrid-tab-managed', 'true');
-    element.setAttribute('tabIndex', '-1');
+    element.setAttribute('tabindex', '-1');


Nice catch!

tkajtoch

Changes look and work great! I tested the changes locally following the QA steps and can confirm the tabindex is now working as expected, and the escape key is mentioned by ATs when entering the cell.

- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0` - `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1` - `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.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.3.0`](https://github.com/elastic/eui/releases/v106.3.0) - Added thumbUp and thumbDown icons ([#8937](elastic/eui#8937)) - Removed obsolete IE-specific CSS properties ([#8940](elastic/eui#8940)) - Updated `EuiComboBox` to allow multiline options by disabling virtualization (`rowHeight="auto"`) ([#8934](elastic/eui#8934)) **Bug fixes** - Fixed interactive content in header cells on `EuiDataGrid` not being correctly removed from the tab order ([#8938](elastic/eui#8938)) - Fixed an issue where the validity state of `EuiFieldNumber` did not update when the `isInvalid` prop value changed ([#8952](elastic/eui#8952)) - Reverted a font-size change for `xs` buttons back to `12px` ([#8930](elastic/eui#8930)) - Fixed unexpected results for the SCSS function `lineHeightFromBaseline` ([#8922](elastic/eui#8922)) - Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith `stripes={true}` ([#8925](elastic/eui#8925)) - Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying hover styling on `EuiDataGrid` when `stripes={true}` ([#8925](elastic/eui#8925)) **Accessibility** - Added a screen reader help text for entered interactive cells of `EuiDataGrid` to provide information about exiting cells ([#8938](elastic/eui#8938)) - Added a new beta `EuiLiveAnnouncer` component which supports `aria-live` announcements on mount ([#8916](elastic/eui#8916)) - Added `announceOnMount` prop on `EuiCallOut` to support announcing its content on mount ([#8916](elastic/eui#8916)) ### `@elastic/eui-theme-borealis` #### [`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1) **Bug fixes** - Updated shared theme SCSS imports to ensure expected results for the SCSS function `lineHeightFromBaseline` ([#8922](elastic/eui#8922)) ### `@elastic/eslint-plugin-eui` #### [`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0) - Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check ([#8946](elastic/eui#8946)) - Added new `no-unnamed-radio-group` rule. ([#8929](elastic/eui#8929)) - Fixed attributes comparison issue in the `consistent-is-invalid-props` rule. ([#8920](elastic/eui#8920))

- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0` - `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1` - `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.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.3.0`](https://github.com/elastic/eui/releases/v106.3.0) - Added thumbUp and thumbDown icons ([elastic#8937](elastic/eui#8937)) - Removed obsolete IE-specific CSS properties ([elastic#8940](elastic/eui#8940)) - Updated `EuiComboBox` to allow multiline options by disabling virtualization (`rowHeight="auto"`) ([elastic#8934](elastic/eui#8934)) **Bug fixes** - Fixed interactive content in header cells on `EuiDataGrid` not being correctly removed from the tab order ([elastic#8938](elastic/eui#8938)) - Fixed an issue where the validity state of `EuiFieldNumber` did not update when the `isInvalid` prop value changed ([elastic#8952](elastic/eui#8952)) - Reverted a font-size change for `xs` buttons back to `12px` ([elastic#8930](elastic/eui#8930)) - Fixed unexpected results for the SCSS function `lineHeightFromBaseline` ([elastic#8922](elastic/eui#8922)) - Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith `stripes={true}` ([elastic#8925](elastic/eui#8925)) - Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying hover styling on `EuiDataGrid` when `stripes={true}` ([elastic#8925](elastic/eui#8925)) **Accessibility** - Added a screen reader help text for entered interactive cells of `EuiDataGrid` to provide information about exiting cells ([elastic#8938](elastic/eui#8938)) - Added a new beta `EuiLiveAnnouncer` component which supports `aria-live` announcements on mount ([elastic#8916](elastic/eui#8916)) - Added `announceOnMount` prop on `EuiCallOut` to support announcing its content on mount ([elastic#8916](elastic/eui#8916)) ### `@elastic/eui-theme-borealis` #### [`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1) **Bug fixes** - Updated shared theme SCSS imports to ensure expected results for the SCSS function `lineHeightFromBaseline` ([elastic#8922](elastic/eui#8922)) ### `@elastic/eslint-plugin-eui` #### [`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0) - Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check ([elastic#8946](elastic/eui#8946)) - Added new `no-unnamed-radio-group` rule. ([elastic#8929](elastic/eui#8929)) - Fixed attributes comparison issue in the `consistent-is-invalid-props` rule. ([elastic#8920](elastic/eui#8920))

mgadewoll added 2 commits August 1, 2025 14:02

fix: use correct HTML attribute name

30cfa51

docs(storybook): add different types of header cell tooltips

2802e22

- provides more testing variety

mgadewoll self-assigned this Aug 1, 2025

mgadewoll added 4 commits August 1, 2025 15:11

refactor: add screen reader exit hint on entered cells

639a6d9

test: update snapshots

88251f5

test(vrt) update reference images

5a2ced9

- due to component and color update for the info tooltip

chore: add changelog

9f12803

mgadewoll force-pushed the datagrid/fix-cell-interactive-children-handling branch from 59b602c to 9f12803 Compare August 1, 2025 13:12

tkajtoch self-requested a review August 1, 2025 13:15

mgadewoll marked this pull request as ready for review August 1, 2025 13:39

mgadewoll requested a review from a team as a code owner August 1, 2025 13:39

tkajtoch reviewed Aug 4, 2025

View reviewed changes

tkajtoch approved these changes Aug 7, 2025

View reviewed changes

mgadewoll merged commit 934c434 into elastic:main Aug 7, 2025
6 checks passed

weronikaolejniczak mentioned this pull request Aug 11, 2025

Upgrade EUI to v106.3.0 elastic/kibana#231288

Merged

agusruidiazgd mentioned this pull request Aug 14, 2025

[Security:Investigations:Timelines page]Issues with Select all visible rows check box elastic/kibana#207181

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiDatagrid] Fix interactive cell content not being disabled properly #8938

[EuiDatagrid] Fix interactive cell content not being disabled properly #8938

Uh oh!

mgadewoll commented Aug 1, 2025 •

edited by tkajtoch

Loading

Uh oh!

elasticmachine commented Aug 1, 2025

Uh oh!

elasticmachine commented Aug 1, 2025

Uh oh!

tkajtoch Aug 4, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiDatagrid] Fix interactive cell content not being disabled properly #8938

[EuiDatagrid] Fix interactive cell content not being disabled properly #8938

Uh oh!

Conversation

mgadewoll commented Aug 1, 2025 • edited by tkajtoch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Additional changes

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

elasticmachine commented Aug 1, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Aug 1, 2025

💚 Build Succeeded

Uh oh!

tkajtoch Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mgadewoll commented Aug 1, 2025 •

edited by tkajtoch

Loading