Add keyboard support to grid layout

Problem to solve

In Add dashboard grid internal component for use w... (!4555 - merged) we added the GridLayout component that's used internally by GlDashboardLayout to render the dashboard grid.

The library used by GridLayout to render panels on a grid, called Gridstack, doesn't support keyboard-only (and therefore screen reader driven) editing. Although the grid itself is traversable, the ability to move or resize panels is not possible by keyboard alone. Grid editing isn't used anywhere in the product just yet, but it will be soon. We need to make sure that when it is in use, we support as many users as possible.

Articles explaining the problem

• https://schne324.github.io/dragon-drop/demo/
• https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
• https://salesforce-ux.github.io/dnd-a11y-patterns/#/?_k=zdepo7

Related issues

We have the same problem within the GitLab repo, with our issues/epic board implementation: gitlab-org/gitlab#20124 (comment 215079785)

Demo implementation

@jiaan uses Claude to test the feasibility of fixing this issue: https://jsfiddle.net/L47sozkw/

demo

He found that the demoed approach works nicely. A nitpick is that the native tab order can be unintuitive once you move around grid items because it's possible to break the original left-to-right and top-to-bottom tab order, but that's a minor inconvenience which might be solved through better descriptions or other aids.

Implementation plan

frontend - 2️⃣

1. Follow Pajamas guidelines to take this from prototype to production with additional accessibility features like screen reader support:
   • Navigate elements with Tab key
   • Select a panel / resize handler with Space key and press Space key again to confirm changes
   • Move / resize with Arrow keys
   • Use aria-live to communicate position / size updates
   • Use aria-describedby to explain controls
2. Add any relevant documentation
3. Add any relevant specs