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] 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 1bd518e9511..09cca7d7f83 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 6e5edb1a866..deacd450c63 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,