From a48793b5422e003e4c0b3471bd89a75ed970cd32 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 23 Feb 2023 15:20:59 +0000
Subject: [PATCH] Accessibility: Make row actions keyboard accessible (#63367)

make row actions keyboard accessible
---
 .../dashboard/components/DashboardRow/DashboardRow.tsx   | 3 +++
 public/sass/components/_row.scss                         | 9 ++-------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
index 0467ae662d7..8ce01c3f128 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
@@ -101,6 +101,9 @@ export class DashboardRow extends React.Component<DashboardRowProps> {
           </div>
         )}
         {this.props.panel.collapsed === true && (
+          /* disabling the a11y rules here as the button handles keyboard interactions */
+          /* this is just to provide a better experience for mouse users */
+          /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
           <div className="dashboard-row__toggle-target" onClick={this.onToggle}>
             &nbsp;
           </div>
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 8dc1b234d21..b955988c7e9 100644
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -16,10 +16,6 @@
       opacity: 1;
     }
 
-    .dashboard-row__actions {
-      visibility: hidden;
-    }
-
     .dashboard-row__toggle-target {
       flex: 1;
       cursor: pointer;
@@ -27,9 +23,9 @@
     }
   }
 
-  &:hover {
+  &:hover,
+  &:focus-within {
     .dashboard-row__actions {
-      visibility: visible;
       opacity: 1;
     }
   }
@@ -52,7 +48,6 @@
 
 .dashboard-row__actions {
   color: $text-muted;
-  visibility: hidden;
   opacity: 0;
   transition: 200ms opacity ease-in 200ms;