eui
eui copied to clipboard
[EuiDataGrid] Change header actions trigger element and enable interactive children
Summary
closes #7660
This PR updates how EuiDataGrid
header cells behave to support interactive cell content.
There are 2 separate scenarios for standalone header cell navigations with this update: a) the header cell only has no or only 1 actions button and no other interactive children b) the header cell has at least 1 interactive child other than the actions button
For scenario a) the navigation works the same as before: Focusing the header cell announces that Enter
keypress will trigger the actions button and open the actions popover.
For scenario b) the change enables support for interactive content navigation the same way as it's already used for body cells: focusing the header cell announces that Enter
keypress will enter the cell to navigate cell content, navigating the cell content follows default DOM navigation and pressing the Escape
key exits the cell and focuses the header cell.
This PR additionally adds aria-live
output on leaving cells to provide feedback.
To ensure WCAG compliancy for interactive targets, the actions button size was increased from 16px
to 24px
and a visual hover state was added.
https://github.com/user-attachments/assets/563aa728-11b3-496b-ad08-3342a695ec4f
QA
- [ ] review EuiDataGrid storybook and verify that the header cells look as expected and keyboard navigation works
General checklist
- Browser QA
- [ ] ~Checked in both light and dark modes~
- [ ] ~Checked in mobile~
- [x] Checked in Chrome, Safari, Edge, and Firefox
- [x] Checked for accessibility including keyboard-only and screenreader modes
- [x] Checked in VoiceOver, NVDA, JAWS, for screen reader behavior
- 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
- [x] Added or updated jest and cypress tests
- [x] Updated visual regression tests
- Release checklist
- [x] 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)~