Sfoglia il codice sorgente

enable ColorPicker keyboard shortcuts if using custom color (#2288)

Andrew Aquino 4 anni fa
parent
commit
5e55e77f54
2 ha cambiato i file con 9 aggiunte e 0 eliminazioni
  1. 6 0
      src/components/ColorPicker.scss
  2. 3 0
      src/components/ColorPicker.tsx

+ 6 - 0
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 {

+ 3 - 0
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