InteractiveTable: Improve accessibility and reenable tests (#115002)

* attempt at fixing some stuff

* tidy up

* prettier

* fix suppressions

eslint-suppressions.json

@@ -669,7 +669,7 @@
   },
   "packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx": {
     "no-restricted-syntax": {
-      "count": 3
+      "count": 2
     }
   },
   "packages/grafana-ui/src/components/JSONFormatter/json_explorer/json_explorer.ts": {

packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { CellProps, HeaderProps } from 'react-table';
 
-import { t } from '@grafana/i18n';
+import { t, Trans } from '@grafana/i18n';
 
 import { IconButton } from '../../IconButton/IconButton';
 
@@ -16,8 +16,9 @@ export function ExpanderCell<K extends object>({ row, __rowID }: CellProps<K, vo
     <div className={expanderContainerStyles}>
       <IconButton
         tooltip={t('grafana-ui.interactive-table.expand-row-tooltip', 'Toggle row expanded')}
-        aria-controls={__rowID}
         // @ts-expect-error react-table doesn't ship with useExpanded types and we can't use declaration merging without affecting the table viz
+        aria-controls={row.isExpanded ? __rowID : undefined}
+        // @ts-expect-error same as the line above
         name={row.isExpanded ? 'angle-down' : 'angle-right'}
         // @ts-expect-error same as the line above
         aria-expanded={row.isExpanded}
@@ -29,6 +30,14 @@ export function ExpanderCell<K extends object>({ row, __rowID }: CellProps<K, vo
   );
 }
 
+export function EmptyExpanderHeader() {
+  return (
+    <span className="sr-only">
+      <Trans i18nKey="grafana-ui.interactive-table.expand-row-header">Row expander</Trans>
+    </span>
+  );
+}
+
 export function ExpanderHeader<K extends object>({ isAllRowsExpanded, toggleAllRowsExpanded }: HeaderProps<K>) {
   return (
     <div className={expanderContainerStyles}>

packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx

@@ -112,8 +112,6 @@ const meta: Meta<typeof InteractiveTable<CarData>> = {
     controls: {
       exclude: EXCLUDED_PROPS,
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
   args: {
     columns: [

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

@@ -14,6 +14,7 @@ import {
 } from 'react-table';
 
 import { GrafanaTheme2, IconName, isTruthy } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { Icon } from '../Icon/Icon';
@@ -345,7 +346,7 @@ const getColumnHeaderStyles = (theme: GrafanaTheme2) => ({
 });
 
 function ColumnHeader<T extends object>({
-  column: { canSort, render, isSorted, isSortedDesc, getSortByToggleProps },
+  column: { canSort, render, isSorted, isSortedDesc, getSortByToggleProps, Header, id },
   headerTooltip,
 }: {
   column: HeaderGroup<T>;
@@ -376,7 +377,13 @@ function ColumnHeader<T extends object>({
 
   if (canSort) {
     return (
-      <button type="button" onClick={onClick}>
+      <button
+        aria-label={t('grafana-ui.interactive-table.aria-label-sort-column', 'Sort column {{columnName}}', {
+          columnName: typeof Header === 'string' ? Header : id,
+        })}
+        type="button"
+        onClick={onClick}
+      >
         {children}
       </button>
     );

packages/grafana-ui/src/components/InteractiveTable/utils.ts

@@ -1,6 +1,6 @@
 import { Column as RTColumn } from 'react-table';
 
-import { ExpanderCell, ExpanderHeader } from './Expander';
+import { EmptyExpanderHeader, ExpanderCell, ExpanderHeader } from './Expander';
 import { Column } from './types';
 
 export const EXPANDER_CELL_ID = '__expander' as const;
@@ -18,9 +18,7 @@ export function getColumns<K extends object>(
     {
       id: EXPANDER_CELL_ID,
       Cell: ExpanderCell,
-      ...(showExpandAll && {
-        Header: ExpanderHeader,
-      }),
+      Header: showExpandAll ? ExpanderHeader : EmptyExpanderHeader,
       disableSortBy: true,
       width: 0,
     },

public/locales/en-US/grafana.json

@@ -9024,6 +9024,8 @@
     "interactive-table": {
       "aria-label-collapse-all": "Collapse all rows",
       "aria-label-expand-all": "Expand all rows",
+      "aria-label-sort-column": "Sort column {{columnName}}",
+      "expand-row-header": "Row expander",
       "expand-row-tooltip": "Toggle row expanded",
       "tooltip-collapse-all": "Collapse all rows",
       "tooltip-expand-all": "Expand all rows"