improve menu bar tab-navigating

components/BackgroundSelect.js

@@ -3,6 +3,7 @@ import colornames from 'colornames'
 
 import ImagePicker from './ImagePicker'
 import ColorPicker from './ColorPicker'
+import Button from './Button'
 import Popout, { managePopout } from './Popout'
 import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
 import { capitalize, stringifyRGBA } from '../lib/util'
@@ -31,12 +32,17 @@ class BackgroundSelect extends React.PureComponent {
 
     return (
       <div className="bg-select-container">
-        <div className={`bg-select-display ${isVisible ? 'is-visible' : ''}`}>
-          <div role="button" tabIndex={0} className="bg-color-container" onClick={toggleVisibility}>
+        <Button
+          border
+          center
+          selected={isVisible}
+          className={`bg-select-display ${isVisible ? 'is-visible' : ''}`}
+          onClick={toggleVisibility}
+        >
           <div className="bg-color-alpha" />
           <div className="bg-color" />
-          </div>
-        </div>
+        </Button>
+
         <Popout
           id="bg-select-pickers"
           pointerLeft="15px"
@@ -71,26 +77,19 @@ class BackgroundSelect extends React.PureComponent {
               height: 100%;
             }
 
-            .bg-select-display {
-              display: flex;
+            .bg-select-container :global(.bg-select-display) {
+              position: relative;
               overflow: hidden;
               height: 100%;
               width: 40px;
               border: 1px solid ${COLORS.SECONDARY};
-              border-radius: 3px;
             }
 
-            .bg-select-display.is-visible {
+            .bg-select-container :global(.bg-select-display.is-visible),
+            .bg-select-container :global(.bg-select-display:focus) {
               border-width: 2px;
             }
 
-            .bg-color-container {
-              position: relative;
-              width: 100%;
-              background: #fff;
-              cursor: pointer;
-            }
-
             .bg-color {
               position: absolute;
               top: 0px;

components/Button.js

@@ -5,6 +5,7 @@ import { COLORS } from '../lib/constants'
 const Button = ({
   id,
   onClick = () => {},
+  onBlur,
   className = '',
   background = COLORS.BLACK,
   color = COLORS.SECONDARY,
@@ -21,7 +22,14 @@ const Button = ({
   padding = 0,
   margin = 0
 }) => (
-  <button id={id} onClick={onClick} className={className} disabled={disabled} style={style}>
+  <button
+    id={id}
+    onClick={onClick}
+    onBlur={onBlur}
+    className={className}
+    disabled={disabled}
+    style={style}
+  >
     {children}
     <style jsx>
       {`
@@ -48,6 +56,10 @@ const Button = ({
           background-color: ${hoverBackground} !important;
           color: ${hoverColor || color};
         }
+
+        button:focus {
+          box-shadow: ${border ? `inset 0px 0px 0px 2px ${color}` : 'initial'};
+        }
       `}
     </style>
   </button>

components/Dropdown.js

@@ -212,7 +212,8 @@ const SelectedItem = ({
             border-radius: ${hasIcon ? '0 3px 3px 0' : '3px'};
             outline: none;
           }
-          .dropdown-display:hover {
+          .dropdown-display:hover,
+          .dropdown-display:focus {
             background: ${COLORS.HOVER};
           }