fix: accessiblity improvements, focus states, real buttons

app/components/Button.js

@@ -65,6 +65,13 @@ const RealButton = styled.button`
       border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
     }
 
+    &:focus {
+      transition-duration: 0.05s;
+      border: 1px solid ${lighten(0.4, props.theme.buttonBackground)};
+      box-shadow: ${lighten(0.4, props.theme.buttonBackground)} 0px 0px
+        0px 2px;
+    }
+
     &:disabled {
       color: ${props.theme.textTertiary};
     }
@@ -77,6 +84,12 @@ const RealButton = styled.button`
     &:hover {
       background: ${darken(0.05, props.theme.danger)};
     }
+
+    &:focus {
+      transition-duration: 0.05s;
+      box-shadow: ${lighten(0.4, props.theme.danger)} 0px 0px
+        0px 3px;
+    }
   `};
 `;
 

app/components/Editor/Editor.js

@@ -272,8 +272,10 @@ const PrismStyles = createGlobalStyle`
   }
 `;
 
-const EditorTooltip = props => (
-  <Tooltip offset="0, 16" delay={150} {...props} />
+const EditorTooltip = ({ children, ...props }) => (
+  <Tooltip offset="0, 16" delay={150} {...props}>
+    <span>{children}</span>
+  </Tooltip>
 );
 
 export default withTheme(

app/components/NudeButton.js

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { lighten } from 'polished';
+
+const Button = styled.button`
+  width: 24px;
+  height: 24px;
+  background: none;
+  border-radius: 4px;
+  line-height: 0;
+  border: 0;
+  padding: 0;
+
+  &:focus {
+    transition-duration: 0.05s;
+    box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px
+      0px 3px;
+    outline: none;
+  }
+`;
+
+// $FlowFixMe - need to upgrade to get forwardRef
+export default React.forwardRef((props, ref) => (
+  <Button {...props} ref={ref} />
+));

app/components/Tab.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 import { NavLink } from 'react-router-dom';
+import { lighten } from 'polished';
 
 type Props = {
   theme: Object,
@@ -23,6 +24,13 @@ const StyledNavLink = styled(NavLink)`
     border-bottom: 3px solid ${props => props.theme.divider};
     padding-bottom: 5px;
   }
+
+  &:focus {
+    outline: none;
+    border-bottom: 3px solid
+      ${props => lighten(0.4, props.theme.buttonBackground)};
+    padding-bottom: 5px;
+  }
 `;
 
 function Tab(props: Props) {

app/components/Tooltip.js

@@ -13,10 +13,6 @@ type Props = {
 };
 
 class Tooltip extends React.Component<Props> {
-  shouldComponentUpdate() {
-    return false;
-  }
-
   render() {
     const { shortcut, tooltip, delay = 50, className, ...rest } = this.props;