[EuiDragAndDrop][AXE-CORE]: Nested drag and drop buttons will not be announced by screen readers

[1Copenut]

Description

The EuiDragAndDrop has two instances where DIVs that are acting as button triggers have nested <button> elements. These buttons are throwing axe errors because they're native focusable elements nested in other focusable elements. We should remove the button if possible. The draggable divs contain their own label.

Guidance

• https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Screenshots

---

[1Copenut]

@miukimiu I've been working on the drag and drop interactive elements today, and wanted to get your opinion on the following solution in progress.

The axe accessibility plugin was throwing an error when we had the interactive button inside the draggable container, so my idea was to add the custom drag handles as a sibling element to the interactive one. It's rough but gets us past the accessibility challenge and gives hooks for design adjustment.

---