eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiDataGrid] Change header actions trigger element and enable interactive children

Open mgadewoll opened this issue 7 months ago • 4 comments

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
  • Code quality checklist
  • 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)~

mgadewoll avatar Jul 22 '24 13:07 mgadewoll