more navigation cue improvements

components/BackgroundSelect.js

@@ -65,10 +65,10 @@ class BackgroundSelect extends React.PureComponent {
             ))}
           </div>
           <div className="picker-tabs-contents">
-            <div style={mode === 'color' ? {} : { display: 'none' }}>
+            <div hidden={mode !== 'color'}>
               <ColorPicker color={color} onChange={this.handlePickColor} />
             </div>
-            <div style={mode === 'image' ? {} : { display: 'none' }}>
+            <div hidden={mode !== 'image'}>
               <ImagePicker onChange={onChange} imageDataURL={image} aspectRatio={aspectRatio} />
             </div>
           </div>

components/ImagePicker.js

@@ -214,6 +214,10 @@ export default class ImagePicker extends React.Component {
               opacity: 0.4;
             }
 
+            .choose-image > button:focus {
+              text-decoration: underline;
+            }
+
             form {
               display: flex;
               justify-content: space-between;

components/Input.js

@@ -27,7 +27,10 @@ const Input = React.forwardRef(({ color = COLORS.SECONDARY, align = 'right', ...
 
         input[type='file'] {
           cursor: pointer;
-          outline: none;
+        }
+
+        input[type='file']:focus {
+          outline: initial;
         }
       `}
     </style>

components/RandomImage.js

@@ -73,6 +73,11 @@ function RandomImage(props) {
             cursor: ${loading ? 'not-allowed' : 'pointer'};
             user-select: none;
           }
+
+          [role='button']:focus {
+            outline: none;
+            text-decoration: underline;
+          }
         `}
       </style>
     </div>