From ed1588a6f781a52d3b965a5611ff8042c4478726 Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 4 May 2026 19:44:05 +0300
Subject: [PATCH 1/2] fix(CollectionControl): a11y drag handle and vertical
 axis lock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

dnd-kit attributes (which include role="button", tabIndex, and
aria-roledescription) were spread onto a <span> wrapping an <Icon
role="img">, producing a button-role span containing an img-role child
— a confusing a11y tree that's not natively keyboard-activatable.

- Render the drag handle as <button type="button"> via setActivatorNodeRef
  so the activator (button) is distinct from the drop node, and gets
  proper button semantics + keyboard activation. Move the aria-label
  to the button and mark the icon aria-hidden.
- Add restrictToVerticalAxis modifier so dragged items can't drift
  horizontally (the original react-sortable-hoc implementation used
  lockAxis="y"). Adds @dnd-kit/modifiers (peer-compatible with
  @dnd-kit/core 6.3+).
- Add KeyboardSensor with sortableKeyboardCoordinates so the list can
  be reordered via keyboard.
---
 superset-frontend/package-lock.json           | 15 +++++++
 superset-frontend/package.json                |  5 ++-
 .../controls/CollectionControl/index.tsx      | 44 ++++++++++++++++---
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 394bb7d183c8..6768a0f7bb54 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -23,6 +23,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",
@@ -3041,6 +3042,20 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
+      "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@dnd-kit/sortable": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index e29796d314b0..c2e5c7921913 100644
--- a/superset-frontend/package.json
+++ b/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",
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
index 0e33183e753c..6e5edb1a866f 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
@@ -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,9 +124,29 @@ function SortableItem({
         paddingInline: theme.sizeUnit * 6,
       })}
     >
-      <span {...attributes} {...listeners}>
+      <button
+        type="button"
+        ref={setActivatorNodeRef}
+        aria-label={t('Drag to reorder')}
+        css={(theme: SupersetTheme) => ({
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          margin: 0,
+          color: 'inherit',
+          cursor: 'ns-resize',
+          display: 'inline-flex',
+          alignItems: 'center',
+          '&:focus-visible': {
+            outline: `2px solid ${theme.colorPrimary}`,
+            outlineOffset: 2,
+          },
+        })}
+        {...attributes}
+        {...listeners}
+      >
         <DragHandle />
-      </span>
+      </button>
       <div
         css={(theme: SupersetTheme) => ({
           flex: 1,
@@ -183,6 +211,9 @@ function CollectionControl({
     useSensor(PointerSensor, {
       activationConstraint: { distance: 5 },
     }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
   );
 
   const itemIds = useMemo(
@@ -260,6 +291,7 @@ function CollectionControl({
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
         onDragEnd={handleDragEnd}
       >
         <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>

From 74e9a9ace10d21549ad34aad44dffad8d793502f Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Wed, 6 May 2026 14:42:08 +0300
Subject: [PATCH 2/2] fix(CollectionControl): use core Button for drag handle
 and add a11y test

Replace the hand-rolled <button> drag activator with the core Button
component (type="text") so it inherits theme focus styles instead of
relying on a custom focus-visible outline. Strengthen the existing
drag-activator test by asserting the aria-label attribute and the
underlying BUTTON tag.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../CollectionControl.test.tsx                |  8 ++++
 .../controls/CollectionControl/index.tsx      | 37 +++++++------------
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
index 1bd518e95114..09cca7d7f837 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
+++ b/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} />);
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
index 6e5edb1a866f..deacd450c63e 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
+++ b/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';
@@ -124,29 +124,18 @@ function SortableItem({
         paddingInline: theme.sizeUnit * 6,
       })}
     >
-      <button
-        type="button"
-        ref={setActivatorNodeRef}
-        aria-label={t('Drag to reorder')}
-        css={(theme: SupersetTheme) => ({
-          background: 'none',
-          border: 'none',
-          padding: 0,
-          margin: 0,
-          color: 'inherit',
-          cursor: 'ns-resize',
-          display: 'inline-flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            outline: `2px solid ${theme.colorPrimary}`,
-            outlineOffset: 2,
-          },
-        })}
-        {...attributes}
-        {...listeners}
-      >
-        <DragHandle />
-      </button>
+      <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) => ({
           flex: 1,