VizLegend: Always display header for screenreader users (#115003)

always display vizlegend header for screenreader users

eslint-suppressions.json

@@ -886,11 +886,6 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/VizLegend/types.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 2

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

@@ -16,10 +16,6 @@ const meta: Meta = {
     containerWidth: '100%',
     seriesCount: 5,
   },
-  parameters: {
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
-  },
   argTypes: {
     containerWidth: {
       control: {

packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx

@@ -29,11 +29,9 @@ export const VizLegendTable = <T extends unknown>({
   isSortable,
 }: VizLegendTableProps<T>): JSX.Element => {
   const styles = useStyles2(getStyles);
-  const header: Record<string, string> = {};
-
-  if (isSortable) {
-    header[nameSortKey] = '';
-  }
+  const header: Record<string, string> = {
+    [nameSortKey]: '',
+  };
 
   for (const item of items) {
     if (item.getDisplayValues) {
@@ -90,16 +88,18 @@ export const VizLegendTable = <T extends unknown>({
     <table className={cx(styles.table, className)}>
       <thead>
         <tr>
-          {!isSortable && <th></th>}
           {Object.keys(header).map((columnTitle) => (
             <th
               title={header[columnTitle]}
               key={columnTitle}
-              className={cx(styles.header, onToggleSort && styles.headerSortable, isSortable && styles.nameHeader, {
+              className={cx(styles.header, {
+                [styles.headerSortable]: Boolean(onToggleSort),
+                [styles.nameHeader]: isSortable,
                 [styles.withIcon]: sortKey === columnTitle,
+                'sr-only': !isSortable,
               })}
               onClick={() => {
-                if (onToggleSort) {
+                if (onToggleSort && isSortable) {
                   onToggleSort(columnTitle);
                 }
               }}