From cc1bba85e42c2e2705c151b2968f2f1bc14faad0 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 10 Dec 2025 13:44:21 +0000
Subject: [PATCH] VizLegend: Always display header for screenreader users
 (#115003)

always display vizlegend header for screenreader users
---
 eslint-suppressions.json                         |  5 -----
 .../src/components/VizLegend/VizLegend.story.tsx |  4 ----
 .../src/components/VizLegend/VizLegendTable.tsx  | 16 ++++++++--------
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index a6386359869..c5169c289b0 100644
--- a/eslint-suppressions.json
+++ b/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
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
index cba6f984501..b9af4d23fc4 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
+++ b/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: {
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
index b0f578fae79..b654a2d3ac6 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
+++ b/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);
                 }
               }}