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

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',
       },

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,

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',

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%',

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',
+    },
+  },
+};