fix: Improve accessibility of buttons / tab indexes with tooltips

app/scenes/Document/components/KeyboardShortcuts.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
+import { lighten } from 'polished';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { KeyboardIcon } from 'outline-icons';
@@ -33,17 +34,16 @@ class KeyboardShortcutsButton extends React.Component<Props> {
         >
           <KeyboardShortcuts />
         </Modal>
-        <Button onClick={this.handleOpenKeyboardShortcuts}>
-          <Tooltip
-            tooltip="Keyboard shortcuts"
-            shortcut="?"
-            placement="left"
-            delay={500}
-            block
-          >
+        <Tooltip
+          tooltip="Keyboard shortcuts"
+          shortcut="?"
+          placement="left"
+          delay={500}
+        >
+          <Button onClick={this.handleOpenKeyboardShortcuts}>
             <KeyboardIcon />
-          </Tooltip>
-        </Button>
+          </Button>
+        </Tooltip>
       </React.Fragment>
     );
   }
@@ -59,6 +59,7 @@ const Button = styled.button`
   height: 24px;
   opacity: 0.8;
   background: none;
+  border-radius: 4px;
   line-height: 0;
   border: 0;
   padding: 0;
@@ -67,6 +68,13 @@ const Button = styled.button`
     opacity: 1;
   }
 
+  &:focus {
+    transition-duration: 0.05s;
+    box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px
+      0px 3px;
+    outline: none;
+  }
+
   ${breakpoint('tablet')`
     display: block;
   `};