From 8dcd66e0e61ba08e57eb320d70a6438a0a8df919 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 29 May 2025 15:45:42 +0100
Subject: [PATCH] Layouts: Ensure layout action buttons aren't greyed out when
 using keyboard nav (#106203)

* Layouts: Ensure layout action buttons aren't greyed out when using keyboard nav

* Lint
---
 .../src/themes/GlobalStyles/dashboardGrid.ts           |  3 +--
 .../scene/layout-auto-grid/AutoGridLayoutRenderer.tsx  |  8 ++------
 .../scene/layout-default/DefaultGridLayoutManager.tsx  |  8 ++------
 .../scene/layout-tabs/TabsLayoutManagerRenderer.tsx    | 10 ++--------
 .../dashboard-scene/scene/layouts-shared/styles.ts     |  8 ++++++++
 5 files changed, 15 insertions(+), 22 deletions(-)
 create mode 100644 public/app/features/dashboard-scene/scene/layouts-shared/styles.ts

diff --git a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
index a5ef166844f..5c631b33f6e 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
@@ -95,8 +95,7 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
       opacity: 0.5,
       transition: theme.transitions.create('opacity'),
       filter: `grayscale(100%)`,
-
-      '&:hover': {
+      '&:hover,:focus-within': {
         opacity: 1,
         filter: 'unset',
       },
diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutRenderer.tsx
index 062d8f6b609..7f66994354d 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutRenderer.tsx
@@ -7,6 +7,7 @@ import { useStyles2 } from '@grafana/ui';
 import { useHasClonedParents } from '../../utils/clone';
 import { useDashboardState } from '../../utils/utils';
 import { CanvasGridAddActions } from '../layouts-shared/CanvasGridAddActions';
+import { dashboardCanvasAddButtonHoverStyles } from '../layouts-shared/styles';
 
 import { AutoGridLayout, AutoGridLayoutState } from './AutoGridLayout';
 import { AutoGridLayoutManager } from './AutoGridLayoutManager';
@@ -68,12 +69,7 @@ const getStyles = (theme: GrafanaTheme2, state: AutoGridLayoutState) => ({
         }
       : undefined,
     // Show add action when hovering over the grid
-    '&:hover': {
-      '.dashboard-canvas-add-button': {
-        opacity: 1,
-        filter: 'unset',
-      },
-    },
+    ...dashboardCanvasAddButtonHoverStyles,
   }),
   containerFillScreen: css({
     flexGrow: 1,
diff --git a/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx b/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
index db5f2a4333a..5701100f423 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
@@ -43,6 +43,7 @@ import {
 import { AutoGridItem } from '../layout-auto-grid/AutoGridItem';
 import { CanvasGridAddActions } from '../layouts-shared/CanvasGridAddActions';
 import { clearClipboard, getDashboardGridItemFromClipboard } from '../layouts-shared/paste';
+import { dashboardCanvasAddButtonHoverStyles } from '../layouts-shared/styles';
 import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
 import { LayoutRegistryItem } from '../types/LayoutRegistryItem';
 
@@ -589,12 +590,7 @@ function getStyles(theme: GrafanaTheme2) {
         flexGrow: `0 !important`,
         minHeight: '250px',
       },
-      '&:hover': {
-        '.dashboard-canvas-add-button': {
-          opacity: 1,
-          filter: 'unset',
-        },
-      },
+      ...dashboardCanvasAddButtonHoverStyles,
     }),
     actionsWrapper: css({
       position: 'relative',
diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
index fe592b171ab..95a4a7f6a40 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
@@ -9,6 +9,7 @@ import { Button, TabContent, TabsBar, useStyles2 } from '@grafana/ui';
 
 import { useIsConditionallyHidden } from '../../conditional-rendering/useIsConditionallyHidden';
 import { getDashboardSceneFor } from '../../utils/utils';
+import { dashboardCanvasAddButtonHoverStyles } from '../layouts-shared/styles';
 import { useClipboardState } from '../layouts-shared/useClipboardState';
 
 import { TabsLayoutManager } from './TabsLayoutManager';
@@ -102,14 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     flexDirection: 'column',
     flex: '1 1 auto',
   }),
-  tabsBar: css({
-    '&:hover': {
-      '.dashboard-canvas-add-button': {
-        filter: 'unset',
-        opacity: 1,
-      },
-    },
-  }),
+  tabsBar: css(dashboardCanvasAddButtonHoverStyles),
   tabsRow: css({
     display: 'flex',
     width: '100%',
diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/styles.ts b/public/app/features/dashboard-scene/scene/layouts-shared/styles.ts
new file mode 100644
index 00000000000..be11a414050
--- /dev/null
+++ b/public/app/features/dashboard-scene/scene/layouts-shared/styles.ts
@@ -0,0 +1,8 @@
+export const dashboardCanvasAddButtonHoverStyles = {
+  '&:hover,:focus-within': {
+    '.dashboard-canvas-add-button': {
+      opacity: 1,
+      filter: 'unset',
+    },
+  },
+};