From 85e80d1d7b87778820ea1051b92502bc2e456f96 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 27 Jul 2022 09:18:16 +0100
Subject: [PATCH] Don't make the whole row a drag handle, use css instead
 (#52795)

---
 .../ValueMappingEditRow.tsx                   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
index 68b3b59364b..498454c92c4 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
@@ -129,9 +129,9 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
   return (
     <Draggable key={id} draggableId={id} index={index}>
       {(provided) => (
-        <tr ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+        <tr className={styles.dragRow} ref={provided.innerRef} {...provided.draggableProps}>
           <td>
-            <div className={styles.dragHandle}>
+            <div className={styles.dragHandle} {...provided.dragHandleProps}>
               <Icon name="draggabledots" size="lg" />
             </div>
           </td>
@@ -231,8 +231,23 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
+  dragRow: css({
+    position: 'relative',
+  }),
   dragHandle: css({
     cursor: 'grab',
+    // create focus ring around the whole row when the drag handle is tab-focused
+    // needs position: relative on the drag row to work correctly
+    '&:focus-visible&:after': {
+      bottom: 0,
+      content: '""',
+      left: 0,
+      position: 'absolute',
+      right: 0,
+      top: 0,
+      outline: `2px solid ${theme.colors.primary.main}`,
+      outlineOffset: '-2px',
+    },
   }),
   rangeInputWrapper: css({
     display: 'flex',