fix(CollectionControl): a11y drag handle and vertical axis lock

superset-frontend/package.json

@@ -104,6 +104,7 @@
     "@deck.gl/mesh-layers": "~9.2.5",
     "@deck.gl/react": "~9.2.5",
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/cache": "^11.4.0",
@@ -133,16 +134,16 @@
     "@superset-ui/legacy-plugin-chart-partition": "file:./plugins/legacy-plugin-chart-partition",
     "@superset-ui/legacy-plugin-chart-rose": "file:./plugins/legacy-plugin-chart-rose",
     "@superset-ui/legacy-plugin-chart-world-map": "file:./plugins/legacy-plugin-chart-world-map",
-    "@superset-ui/preset-chart-deckgl": "file:./plugins/preset-chart-deckgl",
     "@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3",
     "@superset-ui/plugin-chart-ag-grid-table": "file:./plugins/plugin-chart-ag-grid-table",
     "@superset-ui/plugin-chart-cartodiagram": "file:./plugins/plugin-chart-cartodiagram",
     "@superset-ui/plugin-chart-echarts": "file:./plugins/plugin-chart-echarts",
-    "@superset-ui/plugin-chart-point-cluster-map": "file:./plugins/plugin-chart-point-cluster-map",
     "@superset-ui/plugin-chart-handlebars": "file:./plugins/plugin-chart-handlebars",
     "@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table",
+    "@superset-ui/plugin-chart-point-cluster-map": "file:./plugins/plugin-chart-point-cluster-map",
     "@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
     "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
+    "@superset-ui/preset-chart-deckgl": "file:./plugins/preset-chart-deckgl",
     "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard",
     "@types/d3-format": "^3.0.1",
     "@types/d3-selection": "^3.0.11",

superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx

@@ -134,6 +134,14 @@ test('Should have SortableDragger icon', async () => {
   expect(await screen.findByLabelText('Drag to reorder')).toBeVisible();
 });
 
+test('Drag activator exposes aria-label="Drag to reorder"', async () => {
+  const props = createProps();
+  render(<CollectionControl {...props} />);
+  const dragActivator = await screen.findByLabelText('Drag to reorder');
+  expect(dragActivator).toHaveAttribute('aria-label', 'Drag to reorder');
+  expect(dragActivator.tagName).toBe('BUTTON');
+});
+
 test('Should call Control component', async () => {
   const props = createProps();
   render(<CollectionControl {...props} />);

superset-frontend/src/explore/components/controls/CollectionControl/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useCallback, useMemo } from 'react';
-import { IconTooltip, List } from '@superset-ui/core/components';
+import { Button, IconTooltip, List } from '@superset-ui/core/components';
 import { nanoid } from 'nanoid';
 import { t } from '@apache-superset/core/translation';
 import { useTheme, type SupersetTheme } from '@apache-superset/core/theme';
@@ -27,14 +27,17 @@ import {
   useSensor,
   useSensors,
   PointerSensor,
+  KeyboardSensor,
   type DragEndEvent,
 } from '@dnd-kit/core';
 import {
   SortableContext,
   verticalListSortingStrategy,
   useSortable,
+  sortableKeyboardCoordinates,
   arrayMove,
 } from '@dnd-kit/sortable';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { CSS } from '@dnd-kit/utilities';
 import { Icons } from '@superset-ui/core/components/Icons';
 import {
@@ -68,8 +71,7 @@ interface CollectionControlProps {
 function DragHandle() {
   return (
     <Icons.MenuOutlined
-      role="img"
-      aria-label={t('Drag to reorder')}
+      aria-hidden
       className="text-primary"
       style={{ cursor: 'ns-resize' }}
     />
@@ -93,8 +95,14 @@ function SortableItem({
   onChangeItem,
   onRemoveItem,
 }: SortableItemProps) {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id });
   const style = {
     transform: CSS.Transform.toString(transform),
     transition: transition ?? undefined,
@@ -116,8 +124,17 @@ function SortableItem({
         paddingInline: theme.sizeUnit * 6,
       })}
     >
-      <span {...attributes} {...listeners}>
-        <DragHandle />
+      <span ref={setActivatorNodeRef} css={{ display: 'inline-flex' }}>
+        <Button
+          type="text"
+          aria-label={t('Drag to reorder')}
+          icon={<DragHandle />}
+          css={{
+            cursor: 'ns-resize',
+          }}
+          {...attributes}
+          {...listeners}
+        />
       </span>
       <div
         css={(theme: SupersetTheme) => ({
@@ -183,6 +200,9 @@ function CollectionControl({
     useSensor(PointerSensor, {
       activationConstraint: { distance: 5 },
     }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
   );
 
   const itemIds = useMemo(
@@ -260,6 +280,7 @@ function CollectionControl({
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
         onDragEnd={handleDragEnd}
       >
         <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>