chore(a11y): enable jsx-a11y/prefer-tag-over-role as error (#42078)

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.ts

@@ -144,7 +144,23 @@ export const Styles = styled.div<{ isDashboardEditMode: boolean }>`
     }
 
     .toggle {
+      appearance: none;
+      border: none;
+      background: none;
       padding-right: ${theme.sizeUnit}px;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .sort-icon-btn {
+      display: inline-flex;
+      align-items: center;
+      appearance: none;
+      border: none;
+      background: none;
+      padding: 0;
+      margin: 0;
+      font: inherit;
       cursor: pointer;
     }
 

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.tsx

@@ -20,14 +20,13 @@
 import {
   ReactNode,
   MouseEvent,
-  SyntheticEvent,
   useState,
   useCallback,
   useRef,
   useMemo,
   useEffect,
 } from 'react';
-import { safeHtmlSpan, handleKeyboardActivation } from '@superset-ui/core';
+import { safeHtmlSpan } from '@superset-ui/core';
 import { t } from '@apache-superset/core/translation';
 import { supersetTheme } from '@apache-superset/core/theme';
 import PropTypes from 'prop-types';
@@ -155,10 +154,7 @@ function displayCell(value: unknown, allowRenderHtml?: boolean): ReactNode {
 function displayHeaderCell(
   needToggle: boolean,
   ArrowIcon: ReactNode,
-  // `SyntheticEvent` (rather than `MouseEvent`) so this callback can also be
-  // used as the keyboard-activation handler via `handleKeyboardActivation`,
-  // which invokes it with a `KeyboardEvent`.
-  onArrowClick: ((e: SyntheticEvent) => void) | null,
+  onArrowClick: ((e: MouseEvent<HTMLButtonElement>) => void) | null,
   value: unknown,
   namesMapping: Record<string, string>,
   allowRenderHtml?: boolean,
@@ -171,17 +167,13 @@ function displayHeaderCell(
       : parsedLabel;
   return needToggle ? (
     <span className="toggle-wrapper">
-      <span
-        role="button"
-        tabIndex={0}
+      <button
+        type="button"
         className="toggle"
         onClick={onArrowClick || undefined}
-        onKeyDown={
-          onArrowClick ? handleKeyboardActivation(onArrowClick) : undefined
-        }
       >
         {ArrowIcon}
-      </span>
+      </button>
       <span className="toggle-val">{labelContent}</span>
     </span>
   ) : (
@@ -468,7 +460,7 @@ export function TableRenderer(props: TableRendererProps) {
   );
 
   const toggleRowKey = useCallback(
-    (flatRowKey: string) => (e: SyntheticEvent) => {
+    (flatRowKey: string) => (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       setCollapsedRows(state => ({
         ...state,
@@ -479,7 +471,7 @@ export function TableRenderer(props: TableRendererProps) {
   );
 
   const toggleColKey = useCallback(
-    (flatColKey: string) => (e: SyntheticEvent) => {
+    (flatColKey: string) => (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       setCollapsedCols(state => ({
         ...state,
@@ -1044,9 +1036,9 @@ export function TableRenderer(props: TableRendererProps) {
                 namesMapping,
                 settingsAllowRenderHtml,
               )}
-              <span
-                role="button"
-                tabIndex={0}
+              <button
+                type="button"
+                className="sort-icon-btn"
                 // Prevents event bubbling to avoid conflict with column header click handlers
                 // Ensures sort operation executes without triggering cross-filtration
                 onClick={e => {
@@ -1060,7 +1052,7 @@ export function TableRenderer(props: TableRendererProps) {
                 }
               >
                 {visibleSortIcon && getSortIcon(i)}
-              </span>
+              </button>
             </th>,
           );
         } else if (attrIdx === colKey.length) {