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