[EuiDataGrid] Implement draggable column headers

[mgadewoll]

Summary

closes #7136

This PR implements reordering EuiDataGrid columns via draggable column headers.
This implementation is opt-in keeping parity with current usages.

Todo

• rebase/update after completed EuiDataGrid Emotion conversion
• update VRT images
• add docs update to EUI+ docs (DataGrid content is not yet available, EUI+ is still in need to be fully migrated/released)

Changes

• adds prop canDragAndDropColumns on columnVisibility prop of EuiDataGrid to toggle draggable column headers - default value is false
• implements EuiDragDropContext and EuiDroppable in EuiGridHeaderRow to enable a drop zone for all non-control columns
• implements EuiDraggable in EuiDataGridHeaderCell to enable draggable column headers
  • uses usePortal on EuiDraggable because it requires reparenting via portal for dragged items to ensure correct positioning of the position: fixed element inside a transform (stacking) context
• updates the customDragHandle prop value on EuiDraggable to be boolean | 'custom'
• adds cypress tests for the dragging behavior

Accessibility

The Draggable implementation comes with great accessibility out of the box (adding hints and announcements where needed) BUT for the use case of datagrid headers it was not completely fitting and needed a small adjustment.

The expected behavior is, that focussing a column header, we want the columnheader role to be read with all its expected labels and attached descriptions.
EuiDraggable currently always added a role on the drag container (button or group) which will be read instead of the content (effectively losing us semantic information). To solve this we optionally remove the added role on the drag container, which results in the content being read on focus as wanted.

This was tested and optimized on Win11 for JAWS and NVDA.

Screen reader output

// JAWS
// draggable, non-interactive

1. focus of a header cell titled "Name"

Name Press the Enter key to view this column’s actions column header
Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key

2. press Enter to open the actions menu popover

Tabular Content / EuiDataGrid - Playground ⋅ Storybook - Google Chrome dialog
EuiDataGrid; Page 1 of 1.

3. press Escape to close the actions menu popover

Name Press the Enter key to view this column’s actions column header
Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key

4. press Space to drag
5. press ArrowRight reorder

You have lifted an item in position 2
You have moved the item from position 2 to position 3

6. press Space to confirm the drag and reorder

You have dropped the item. You have moved the item from position 2 to position 3

// JAWS
// draggable, interactive

1. focus of a header cell titled "Name"

Name, column header
Press the Enter key to interact with this cell’s contents. Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key

2. press Enter to enter the cell (focussing the first interactive child element)

Additional information Button
To activate press Enter.
tooltip content

3. Press Tab to focus the next child element

Name. Click to view column header actions. Button
To activate press Enter.

4. press Escape to leave the cell

Name, column header
Exited cell content. Press the Enter key to interact with this cell’s contents.

4. press Space to drag
5. press ArrowRight reorder

You have lifted an item in position 1
You have moved the item from position 1 to position 2

6. press Space to confirm the drag and reorder

You have dropped the item. You have moved the item from position 1 to position 2
Press the Enter key to interact with this cell’s contents.

// NVDA
// draggable, non-interactive

1. focus of a header cell titled "Name"

Name Press the Enter key to view this column's actions  column header  Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key  row 1  column 2

2. press Enter to open the actions menu popover

You are in a dialog. 
Press Escape, or tap/click outside the dialog to close.To navigate through the   list of column actions, press the Tab or Up and Down arrow keys.

3. press Escape to close the actions menu popover

EuiDataGrid; Page 1 of 1.  table
Name Press the Enter key to view this column's actions  column header  Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key

4. press Space to drag
5. press ArrowRight reorder

space
You have lifted an item in position 2 
You have moved the item from position 2 to position 3 

6. press Space to confirm the drag and reorder

space
You have dropped the item. You have moved the item from position 2 to position 3

// NVDA
// draggable, interactive

1. focus of a header cell titled "Name"

Name,  column header  Press the Enter key to interact with this cell's contents. Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key  row 1  column 1

2. press Enter to enter the cell (focussing the first interactive child element)

Additional information  button  
tooltip content

3. Press Tab to focus the next child element

Name. Click to view column header actions.  button  

4. press Escape to leave the cell

Name,  column header  Exited cell content. Press the Enter key to interact with this cell's contents.

4. press Space to drag
5. press ArrowRight reorder

space
You have lifted an item in position 1 
You have moved the item from position 1 to position 2 

6. press Space to confirm the drag and reorder

space
You have dropped the item. You have moved the item from position 1 to position 2

Screenshots

mouse usage

Screen.Recording.2024-09-10.at.18.01.57.mov

keyboard usage

Screen.Recording.2024-09-10.at.18.05.00.mov

resizing

Screen.Recording.2024-09-10.at.18.06.38.mov

QA

Storybook: https://eui.elastic.co/pr_8015/storybook/?path=/story/tabular-content-euidatagrid--playground&args=columnDragDrop:!true

EUI docs: https://eui.elastic.co/pr_8015/index.html#/tabular-content/data-grid-schema-columns#draggable-columns

• verify columnDragDrop prop works to en/disable draggable columns
• verify drag behavior works with mouse
  • draggable columns indicate drag behavior on hover
  • clicking draggable columns sets a focus state
  • draggable columns can be dragged and reorder of columns works as expected
  • opening the actions menu popover works and that clicking on another draggable column closes it
• verify that the drag behavior works with keyboard
  • ArrowLeft/Right keys focus draggable header cells
  • Space key starts dragging a cell
    • ArrowLeft/Right move a dragged cell to another position
    • Space drops the dragged cell in the current position
    • Escape key aborts the drag
  • Enter key on interactive header cells enters the cell content
    • Escape in an interactive cell exits the cell and focuses it
• verify that resizing a draggable cell works as expected

General checklist

• Browser QA
  • Checked in both light and dark modes
  • 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)

[mgadewoll]

The idea here is to provide means to unset the role for specific use cases. Using customDragHandle=true for that would have impact on current usages, hence I'm suggesting to add a third custom option as this should not be a default.

The reasoning here is this:
EuiDraggable adds a drag wrapper around its content, which has role="button|group" - this works for most cases where the drag element should be the interactive/focused element. The impact of this is, that the content of this element is not read as standalone semantic elements. E.g. role="button" removes additional semantic content and just reads visible text content.
For datagrid column headers we rather want the columnheader to still be the element to be read via screen readers as it holds all semantic information. Instead we want the draggable accessible information added to the column header instead of the wrapper being read only.
To ensure the columnheader role element is read, the draggable wrapper needs to have no role that removes the content semantics. Hence the decision to provide means to unset it for this case.

[mgadewoll]

⚠️ One thing I noticed is that the screen reader output in JAWS changed along the way from the original state.
When starting a drag, JAWS reads the full cell element again, which is quite verbose. The information that a drag started is hence also read last - after all cell information. I'm not fully sure when this changed, this might already have been introduced with the reparenting as we're focusing different DOM elements which could trigger a full read.

I'd be fine keeping it as is for now though as it's not broken but we might want to check further on it separately if/how we could improve the output by making it less verbose.

ℹ️ NVDA output is as expected.

[cee-chen]

As a heads up my local Docker/Loki setup isn't working so I can't run a final VRT snapshot update to confirm that nothing changed UI-wise - would super appreciate it if you could do that final check here tomorrow.

Otherwise, if CI passes and you don't have any other code changes you'd like to make, I think this is good to go!! 🤞 🎉

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 219040a

History

• 💚 Build #2880 succeeded fb3ff84
• 💔 Build #2879 failed a73ced5
• 💔 Build #2864 failed 955cef7
• 💔 Build #2859 failed b256ff6
• 💔 Build #2856 failed 74d4115
• 💚 Build #2843 succeeded 87c0a74

[mgadewoll]

As a heads up my local Docker/Loki setup isn't working so I can't run a final VRT snapshot update to confirm that nothing changed UI-wise - would super appreciate it if you could do that final check here tomorrow.

Otherwise, if CI passes and you don't have any other code changes you'd like to make, I think this is good to go!! 🤞 🎉

@cee-chen I just had a last quick check of the changes and ran the datagrid a last time in screen readers. It works great! Thanks for the great review and collaboration on this! ❤️ I learned a lot working on this 🧠