A11y: Enable jsx-a11y/interactive-supports-focus (#57391)

* first batch of fixes for interactive-supports-focus

* remove role and aria attributes since this won't be focusable to a screenreader anyway

.eslintrc

@@ -73,7 +73,6 @@
         // we should remove the corresponding line and fix them one by one
         // any marked "error" contain specific overrides we'll need to keep
         "jsx-a11y/click-events-have-key-events": "off",
-        "jsx-a11y/interactive-supports-focus": "off",
         "jsx-a11y/label-has-associated-control": "off",
         "jsx-a11y/mouse-events-have-key-events": "off",
         "jsx-a11y/no-autofocus": [

packages/grafana-ui/src/components/BrowserLabel/Label.tsx

@@ -25,7 +25,7 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
 /**
  * @internal
  */
-export const Label = forwardRef<HTMLElement, Props>(
+export const Label = forwardRef<HTMLButtonElement, Props>(
   (
     {
       name,
@@ -64,12 +64,13 @@ export const Label = forwardRef<HTMLElement, Props>(
     }
 
     return (
-      <span
+      <button
         key={text}
         ref={ref}
         onClick={onLabelClick}
         style={style}
         title={title || text}
+        type="button"
         role="option"
         aria-selected={!!active}
         className={cx(
@@ -92,7 +93,7 @@ export const Label = forwardRef<HTMLElement, Props>(
             highlightClassName={styles.matchHighLight}
           />
         )}
-      </span>
+      </button>
     );
   }
 );
@@ -111,6 +112,7 @@ const getLabelStyles = (theme: GrafanaTheme2) => ({
     text-shadow: none;
     padding: ${theme.spacing(0.5)};
     border-radius: ${theme.shape.borderRadius()};
+    border: none;
     margin-right: ${theme.spacing(1)};
     margin-bottom: ${theme.spacing(0.5)};
   `,

packages/grafana-ui/src/components/Menu/Menu.tsx

@@ -32,6 +32,7 @@ const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
     return (
       <div
         {...otherProps}
+        tabIndex={-1}
         ref={localRef}
         className={styles.wrapper}
         role="menu"

packages/grafana-ui/src/components/Menu/SubMenu.tsx

@@ -49,7 +49,7 @@ export const SubMenu: React.FC<SubMenuProps> = React.memo(
             className={styles.subMenu(localRef.current)}
             aria-label={selectors.components.Menu.SubMenu.container}
           >
-            <div className={styles.itemsWrapper} role="menu" onKeyDown={handleKeys}>
+            <div tabIndex={-1} className={styles.itemsWrapper} role="menu" onKeyDown={handleKeys}>
               {items}
             </div>
           </div>

packages/grafana-ui/src/components/Table/Filter.tsx

@@ -17,7 +17,7 @@ interface Props {
 }
 
 export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLButtonElement>(null);
   const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false);
   const styles = useStyles(getStyles);
   const filterEnabled = useMemo(() => Boolean(column.filterValue), [column.filterValue]);
@@ -28,10 +28,10 @@ export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
     return null;
   }
   return (
-    <span
+    <button
       className={cx(tableStyles.headerFilter, filterEnabled ? styles.filterIconEnabled : styles.filterIconDisabled)}
       ref={ref}
-      role="button"
+      type="button"
       onClick={onShowPopover}
     >
       <Icon name="filter" />
@@ -43,7 +43,7 @@ export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
           show
         />
       )}
-    </span>
+    </button>
   );
 };
 

packages/grafana-ui/src/components/Table/styles.ts

@@ -164,8 +164,10 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       height: 100%;
     `,
     headerFilter: css`
+      background: transparent;
+      border: none;
       label: headerFilter;
-      cursor: pointer;
+      padding: 0;
     `,
     paginationWrapper: css`
       display: flex;

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx

@@ -146,9 +146,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
           <span>
             <span
               className={styles.expandedAccent}
-              aria-checked="true"
               onClick={this._detailToggle}
-              role="switch"
               style={{ borderColor: color }}
               data-testid="detail-row-expanded-accent"
             />