Allow selection of palette rows using the keyboard

Signed-off-by: Axel Boberg <[email protected]>
svt · Mar 3, 2024 · 6099cd6 · 6099cd6
1 parent 33b352d
commit 6099cd6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/app/components/Palette/index.jsx b/app/components/Palette/index.jsx
@@ -67,6 +67,20 @@ export const Palette = ({ open, onClose = () => {} }) => {
     return <></>
   }
 
+  function handleRowKeyDown (e) {
+    switch (e.key) {
+      /*
+      Click all children
+      when enter is pressed
+      */
+      case 'Enter':
+        for (const child of e.target.children) {
+          child.click()
+        }
+        break
+    }
+  }
+
   return (
     <div className='Palette'>
       <div className='Palette-backdrop' onClick={() => onClose()} onContextMenu={() => onClose()} />
@@ -89,12 +103,24 @@ export const Palette = ({ open, onClose = () => {} }) => {
                     .filter(({ rows }) => rows.length)
                     .map(({ label, rows }) => {
                       return (
-                        <div key={label} className='Palette-resultSection'>
+                        <>
                           <label className='Palette-resultLabel u-text--label'>{label}</label>
                           {
-                            rows.map((row, i) => <div key={`${label}:${i}`} className='Palette-row' onClick={() => onClose()}>{row}</div>)
+                            rows.map((row, i) => {
+                              return (
+                                <div
+                                  key={`${label}:${i}`}
+                                  className='Palette-row'
+                                  onClick={() => onClose()}
+                                  onKeyDown={e => handleRowKeyDown(e)}
+                                  tabIndex={0}
+                                >
+                                  {row}
+                                </div>
+                              )
+                            })
                           }
-                        </div>
+                        </>
                       )
                     })
                 }

diff --git a/app/components/Palette/style.css b/app/components/Palette/style.css
@@ -56,6 +56,10 @@
   opacity: 0.8;
 }
 
+.Palette-row:focus {
+  box-shadow: inset 0 0 0 1px var(--base-color);
+}
+
 /* Integrations */
 
 .Palette-row--itemRow {