Don't make the whole row a drag handle, use css instead (#52795)

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