From 67444cee786166d89dd63cd5a95c1a7e1c998bc7 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 14 Nov 2025 10:20:18 +0000
Subject: [PATCH] Storybook: Set role="menuitem" on storybook menu links, fix
 positioning to not stretch menu (#113705)

* set role="menuitem" on storybook menu links, fix positioning to not stretch menu

* fix description/icon contrast for active items
---
 eslint-suppressions.json                          |  5 -----
 .../grafana-ui/src/components/Menu/Menu.story.tsx | 15 ++++++++++-----
 .../grafana-ui/src/components/Menu/MenuItem.tsx   | 10 +++++-----
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 8ee8efa680c..8c5bde1e0b1 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -729,11 +729,6 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/Menu/Menu.story.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/Modal/ModalsContext.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 2
diff --git a/packages/grafana-ui/src/components/Menu/Menu.story.tsx b/packages/grafana-ui/src/components/Menu/Menu.story.tsx
index 131486ce175..f943a418a31 100644
--- a/packages/grafana-ui/src/components/Menu/Menu.story.tsx
+++ b/packages/grafana-ui/src/components/Menu/Menu.story.tsx
@@ -24,20 +24,18 @@ const meta: Meta<typeof Menu> = {
     actions: {
       disabled: true,
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
 };
 
 export function Examples() {
   return (
-    <Stack direction="column">
+    <Stack direction="column" width="fit-content">
       <StoryExample name="Plain">
         <Menu>
           <Menu.Item label="Google" />
           <Menu.Item label="Filter" />
           <Menu.Item label="Active" active />
-          <Menu.Item label="I am a link" url="http://google.com" target="_blank" />
+          <Menu.Item label="I am a link" url="http://google.com" target="_blank" role="menuitem" />
           <Menu.Item label="With destructive prop set" destructive />
         </Menu>
       </StoryExample>
@@ -90,7 +88,14 @@ export function Examples() {
         <Menu>
           <Menu.Item label="Google" icon="search-plus" />
           <Menu.Item label="Disabled action" icon="history" disabled />
-          <Menu.Item label="Disabled link" icon="external-link-alt" url="http://google.com" target="_blank" disabled />
+          <Menu.Item
+            label="Disabled link"
+            icon="external-link-alt"
+            url="http://google.com"
+            target="_blank"
+            disabled
+            role="menuitem"
+          />
           <Menu.Item
             label="Submenu"
             icon="apps"
diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
index f6619c1912b..078b9b7e12e 100644
--- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx
+++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
@@ -177,7 +177,7 @@ export const MenuItem = React.memo(
       >
         <Stack direction="row" justifyContent="flex-start" alignItems="center">
           {icon && <Icon name={icon} className={styles.icon} aria-hidden />}
-          <span className={styles.ellipsis}>{label}</span>
+          <span className={cx(styles.ellipsis, styles.label)}>{label}</span>
           <div className={cx(styles.rightWrapper, { [styles.withShortcut]: hasShortcut })}>
             {hasShortcut && (
               <div className={styles.shortcut}>
@@ -220,7 +220,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       background: 'none',
       cursor: 'pointer',
       whiteSpace: 'nowrap',
-      color: theme.colors.text.primary,
+      color: theme.colors.text.secondary,
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'stretch',
@@ -241,6 +241,9 @@ const getStyles = (theme: GrafanaTheme2) => {
 
       '&:focus-visible': getFocusStyles(theme),
     }),
+    label: css({
+      color: theme.colors.text.primary,
+    }),
     active: css({
       background: theme.colors.action.hover,
     }),
@@ -271,7 +274,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     icon: css({
       opacity: 0.7,
-      color: theme.colors.text.secondary,
     }),
     rightWrapper: css({
       display: 'flex',
@@ -286,11 +288,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       alignItems: 'center',
       gap: theme.spacing(1),
       marginLeft: theme.spacing(2),
-      color: theme.colors.text.secondary,
     }),
     description: css({
       ...theme.typography.bodySmall,
-      color: theme.colors.text.secondary,
       textAlign: 'start',
     }),
     descriptionWithIcon: css({