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

[mgadewoll]

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)~

[cee-chen]

@1Copenut I don't know if this is just me but it feels like a net keyboard UX loss to have to press Enter twice now to toggle header cell actions as opposed to just once (production).

@mgadewoll Do you think there's any way if we can detect if there's interactive children other than the cell header actions and only create a focus trap then, but otherwise auto trigger the cell actions on enter keypress if it's the only interactive child?

[1Copenut]

@mgadewoll I took this for another drive with NVDA and JAWS. I'm hearing a lot of repeated information both when the heading has focus and when I move to cells in the column. Here's a brief recap:

1. When focus in on a heading cell, I'm hearing the cell name and "Additional information" which is the aria-label for the icon. I was really looking for hearing the cell name only.
2. There's an empty aria-describedby P tag that is referenced by the heading cell.
3. There's a live region that announces the prompt to press Enter to interact with the cell's contents.
4. Column cells that reference the heading cell announce the entire name + "Additional Information" and the Enter prompt. I would expect these to only announce the name.

I'm attaching a screenshot with some notes and highlights of how I think this could be improved. Please ping me with any questions.

[mgadewoll]

@mgadewoll I took this for another drive with NVDA and JAWS. I'm hearing a lot of repeated information both when the heading has focus and when I move to cells in the column. Here's a brief recap:

1. When focus in on a heading cell, I'm hearing the cell name and "Additional information" which is the aria-label for the icon. I was really looking for hearing the cell name only.
2. There's an empty aria-describedby P tag that is referenced by the heading cell.
3. There's a live region that announces the prompt to press Enter to interact with the cell's contents.
4. Column cells that reference the heading cell announce the entire name + "Additional Information" and the Enter prompt. I would expect these to only announce the name.

I'm attaching a screenshot with some notes and highlights of how I think this could be improved. Please ping me with any questions.

@1Copenut Thanks for the check! I agree that we should not have duplicate or unexpected information being read. I'll check how we can bring it back to the initial experience we had for your first check.

Some additional information for context:

• we have to label the header cell with all its content (instead of just the title span) as the content can be passed and hence is unknown to us
• the empty p tag is the optional sorting description text (not new)
• the live region was added to support the additional "exited cell" functionality

[1Copenut]

I took another pass and my notes weren't as clear as I'd hoped, causing a slight regression. I put a 30 minute invite together to live review markup and that should get us to the finish line quickly.

[1Copenut]

@mgadewoll && @cee-chen I just retested with NVDA and JAWS, and wow. This is the experience I was hoping for. The native traversal method in Forms/Focus Mode gives clear direction for cell entry and exit, and handles the nested content perfectly. The tabular traversal method (my guess is this is a secondary means of traversal) is pretty solid and gives enough clues that users can easily drop into content and are automatically moved to Forms/Focus mode when they exit a cell using ESC. I'm very happy with this latest iteration! 🚢 it.

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 98fed3ac2c20c30772b864159fff3224a1b9d726

History

• :green_heart: Build #2671 succeeded c04b1a73d712e950d1f6b1b69763677a51b749b6
• :green_heart: Build #2670 succeeded 793822baef7adcf98582274d535a98c27939ad2f
• :green_heart: Build #2642 succeeded ce11b578315e913fcd5f1e641354f9d56b718022
• :green_heart: Build #2598 succeeded f33f981578310dda0bd9078d94964083d504d63d
• :green_heart: Build #2591 succeeded 837b58a2fe51e8ea716dd47022dc821f2199019b
• :broken_heart: Build #2585 failed 770ed5ac0d2672f0a900691d6cfecffcc60d99f5