[Drag'n'Drop][Spike] Investigate making drag and drop keyboard accessible

[weronikaolejniczak]

The purpose of this spike is to investigate how to make our drag and drop solution keyboard accessible. We need to find out what are the solution limitations and how we can work around them if needed.

EuiDroppable uses @hello-pangea/[email protected] underneath. 18.0.1 is available.

EUI Drag and drop docs page | @hello-pangea/dnd Droppable API

Context

Draggable items can be moved between lists and droppable lists can have different directional alignments (horizontal or vertical). See the Kitchen sink example. Try navigating using Space and arrows.

EuiDroppable defaults to vertical mode, arranging items on the y-axis. However, keyboard navigation with Space + Arrow Up / Arrow Down does not move items along the y-axis within the list - it only supports moving items between droppable areas on the x-axis using Arrow Left / Arrow Right.

When setting direction="horizontal", Arrow Up / Arrow Down moves items between droppable lists on the y-axis but this also changes the internal arrangement of items to be horizontal (x-axis), which may be undesired.

Currently, it doesn't seem possible to mix these two. See:

• https://github.com/hello-pangea/dnd/issues/449
• https://github.com/hello-pangea/dnd/issues/545

Impact

Kibana

• https://github.com/elastic/kibana/issues/205312
• https://github.com/elastic/kibana/issues/210764

Acceptance criteria

• Identify limitations of @hello-pangea/dnd related to keyboard accessibility
• Evaluate if directionality of EuiDroppable can be decoupled from keyboard navigation behavior (i.e., keeping a vertical layout while enabling vertical keyboard navigation)
• Assess feasibility of custom overrides or workarounds, such as:
  • manually handling keyboard input events
  • using different configuration patterns or nested droppables
  • using alternate or forked versions of @hello-pangea/dnd
• Document findings:
  • clearly state if it's possible to achieve intuitive keyboard navigation while preserving layout direction
  • note any library limitations, blockers, or known issues
  • include example code snippets or PoCs (if applicable)
  • highlight any accessibility compliance gaps (WCAG)
• Evaluate alternative libraries (see "Alternative libraries" below)

Additional information

Alternative libraries

• Pragmatic from Atlassian
• ...