From 5e55e77f54bd0639f3b6da335eb0eef828f69ebf Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Tue, 27 Oct 2020 03:01:57 -0700
Subject: [PATCH] enable ColorPicker keyboard shortcuts if using custom color
 (#2288)

---
 src/components/ColorPicker.scss | 6 ++++++
 src/components/ColorPicker.tsx  | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/src/components/ColorPicker.scss b/src/components/ColorPicker.scss
index 5b757301..b671a953 100644
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker.scss
@@ -51,6 +51,12 @@
     display: grid;
     grid-template-columns: repeat(5, auto);
     grid-gap: 0.5rem;
+    border-radius: 4px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
   }
 
   .color-picker-content .color-input-container {
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 533f3ef2..b3f923fa 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -65,6 +65,8 @@ const Picker = ({
       activeItem.current.focus();
     } else if (colorInput.current) {
       colorInput.current.focus();
+    } else if (gallery.current) {
+      gallery.current.focus();
     }
   }, []);
 
@@ -140,6 +142,7 @@ const Picker = ({
             gallery.current = el;
           }
         }}
+        tabIndex={0}
       >
         {colors.map((_color, i) => (
           <button