From 0e4743b852d98ed1c448bd00e5a6a2813236a596 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 4 Jul 2023 12:55:25 +0100
Subject: [PATCH] NestedFolderPicker: Expand/collapse keyboard handling
 (#70949)

* better keyboard handling in NestedFolderList

* add check for foldersAreOpenable
---
 .../NestedFolderPicker/NestedFolderList.tsx        | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx b/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx
index 567d44961c5..839c9f04231 100644
--- a/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx
+++ b/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx
@@ -80,6 +80,17 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
     [item, onSelectionChange]
   );
 
+  const handleKeyDown = useCallback(
+    (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      // Expand/collapse folder on arrow keys
+      if (foldersAreOpenable && (ev.key === 'ArrowRight' || ev.key === 'ArrowLeft')) {
+        ev.preventDefault();
+        onFolderClick(item.uid, ev.key === 'ArrowRight');
+      }
+    },
+    [item.uid, foldersAreOpenable, onFolderClick]
+  );
+
   if (item.kind !== 'folder') {
     return process.env.NODE_ENV !== 'production' ? (
       <span style={virtualStyles} className={styles.row}>
@@ -98,6 +109,7 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
         name="folder"
         checked={item.uid === selectedFolder}
         onChange={handleRadioChange}
+        onKeyDown={handleKeyDown}
       />
 
       <div className={styles.rowBody}>
@@ -107,6 +119,8 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
           <IconButton
             size={CHEVRON_SIZE}
             onClick={handleClick}
+            // tabIndex not needed here because we handle keyboard navigation at the radio button level
+            tabIndex={-1}
             aria-label={isOpen ? 'Collapse folder' : 'Expand folder'}
             name={isOpen ? 'angle-down' : 'angle-right'}
           />