[EuiDataGrid] Change header cell popover menu trigger element to be the `verticalBoxes` icon button

[tkajtoch]

Summary

This request came up from the discussion in https://github.com/elastic/eui/issues/7469.

There are cases where customers want to add interactive components like EuiTooltips to EuiDataGrid header cells to provide more context and display help text. This is currently impossible to achieve while keeping the header cells accessible. We've decided it would be worth changing the element we listen for click events on from the whole header cell to just the vertical boxes icon (with some padding added to reduce cursor/touch precision required).

Acceptance criteria

• EuiDataGrid's header cell popover menus should open only when clicking on the verticalBoxes icon button and not the whole header cell
• The updated header cell rendering implementation should be accessible
• The verticalBoxes icon button should have a data-test-subj attribute for easy referencing in automated tests

[JasonStoltz]

Some things to consider here:

• Is the click target for the menu currently large enough for accessibility?
• If we implement drag and drop for header cells, how does that interaction fit together with additional click targets in the header cell?

[ninoslavmiskovic]

We want to e.g. add ECS descriptions as tooltops for fields in the table in Discover.

E.g. for service.name

So this could be useful :)

[davismcphee]

Hey team, just wanted to check in on this issue and ask if it's still something that could be prioritized in the near term? We'd like to implement the ECS field descriptions functionality @ninoslavmiskovic mentioned above in Discover, but currently the a11y issue is an obstacle.

[JasonStoltz]

@davismcphee Hey Davis, we weren't planning to work on this until next quarter. We'll see if we can work it into our schedule for the next week or two.

[davismcphee]

Thanks for considering it!

[mgadewoll]

After having had a first look at this I think there are still some Accessibility/Usability questions to align on and I think we should align with @1Copenut to verify what expected output and functionality we need to ensure.

1. How will screen reader users know there are interactive nested elements and how many?

• We should add context information for screen reader users that there are nested items. We could try using semantic groups to utilize standard semantics
• We should be able to leverage the already used focus trap functionality to indicate cells with interactive content

2. How do we expect the keyboard navigation to function for nested interactive cell items?

• We already use focus traps for cells with interactive content, we should be able to reuse this which then adds indication that a user can enter a cell to navigate its content (e.g. already in use for row data cells with interactive content)

[mgadewoll]

ℹ After aligning with @1Copenut I updated the POC solution and asked for a full accessibility check next to verify our changes work as expected.