fix: Focus accessibility (#1536)

* fix: Focus ring appearing on click
fix: Focus ring not appearing on sidebar links
add: focus-visible polyfill

* fix: More visible outlines on keyboard focus
fix: Header block should be a button semantically

app/components/Button.js

@@ -1,6 +1,6 @@
 // @flow
 import { ExpandedIcon } from "outline-icons";
-import { darken, lighten } from "polished";
+import { darken } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 
@@ -19,7 +19,6 @@ const RealButton = styled.button`
   height: 32px;
   text-decoration: none;
   flex-shrink: 0;
-  outline: none;
   cursor: pointer;
   user-select: none;
 
@@ -36,13 +35,6 @@ const RealButton = styled.button`
     background: ${(props) => darken(0.05, props.theme.buttonBackground)};
   }
 
-  &:focus {
-    transition-duration: 0.05s;
-    box-shadow: ${(props) => lighten(0.4, props.theme.buttonBackground)} 0px 0px
-      0px 3px;
-    outline: none;
-  }
-
   &:disabled {
     cursor: default;
     pointer-events: none;
@@ -70,13 +62,6 @@ const RealButton = styled.button`
       border: 1px solid ${props.theme.buttonNeutralBorder};
     }
 
-    &: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};
     }
@@ -89,12 +74,6 @@ 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/DocumentPreview/DocumentPreview.js

@@ -181,7 +181,6 @@ const DocumentLink = styled(Link)`
   &:active,
   &:focus {
     background: ${(props) => props.theme.listItemHoverBackground};
-    outline: none;
 
     ${SecondaryActions} {
       opacity: 1;

app/components/DropdownMenu/DropdownMenuItem.js

@@ -80,7 +80,6 @@ const MenuItem = styled.a`
   &:focus {
     color: ${props.theme.white};
     background: ${props.theme.primary};
-    outline: none;
   }
   `};
 `;

app/components/NudeButton.js

@@ -1,5 +1,4 @@
 // @flow
-import { lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 
@@ -11,13 +10,6 @@ const Button = styled.button`
   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;
-  }
 `;
 
 export default React.forwardRef<any, typeof Button>((props, ref) => (

app/components/Sidebar/components/HeaderBlock.js

@@ -57,10 +57,16 @@ const TeamName = styled.div`
   font-size: 16px;
 `;
 
-const Header = styled(Flex)`
+const Header = styled.button`
+  display: flex;
+  align-items: center;
   flex-shrink: 0;
   padding: 16px 24px;
   position: relative;
+  background: none;
+  line-height: inherit;
+  border: 0;
+  margin: 0;
   cursor: pointer;
   width: 100%;
 

app/components/Sidebar/components/SidebarLink.js

@@ -143,7 +143,6 @@ const StyledNavLink = styled(NavLink)`
   &:focus {
     color: ${(props) => props.theme.text};
     background: ${(props) => props.theme.black05};
-    outline: none;
   }
 
   &:hover {

app/components/Tab.js

@@ -1,5 +1,4 @@
 // @flow
-import { lighten } from "polished";
 import * as React from "react";
 import { NavLink } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -23,13 +22,6 @@ 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({ theme, ...rest }: Props) {

app/components/TeamLogo.js

@@ -6,7 +6,7 @@ const TeamLogo = styled.img`
   height: 38px;
   border-radius: 4px;
   background: ${(props) => props.theme.background};
-  border: 1px solid ${(props) => props.theme.divider};
+  outline: 1px solid ${(props) => props.theme.divider};
 `;
 
 export default TeamLogo;

app/index.js

@@ -1,5 +1,6 @@
 // @flow
 import "mobx-react-lite/batchingForReactDom";
+import "focus-visible";
 import { Provider } from "mobx-react";
 import * as React from "react";
 import { render } from "react-dom";

app/menus/DocumentMenu.js

@@ -38,6 +38,7 @@ type Props = {
   showPrint?: boolean,
   showToggleEmbeds?: boolean,
   showPin?: boolean,
+  label?: React.Node,
   onOpen?: () => void,
   onClose?: () => void,
 };
@@ -163,6 +164,7 @@ class DocumentMenu extends React.Component<Props> {
       showPin,
       auth,
       collections,
+      label,
       onOpen,
       onClose,
     } = this.props;
@@ -179,6 +181,7 @@ class DocumentMenu extends React.Component<Props> {
           position={position}
           onOpen={onOpen}
           onClose={onClose}
+          label={label}
         >
           {can.unarchive && (
             <DropdownMenuItem onClick={this.handleRestore}>

app/scenes/Document/components/Header.js

@@ -7,6 +7,7 @@ import {
   EditIcon,
   GlobeIcon,
   PlusIcon,
+  MoreIcon,
 } from "outline-icons";
 import { transparentize, darken } from "polished";
 import * as React from "react";
@@ -336,6 +337,15 @@ class Header extends React.Component<Props> {
                 <DocumentMenu
                   document={document}
                   isRevision={isRevision}
+                  label={
+                    <Button
+                      icon={<MoreIcon />}
+                      iconColor="currentColor"
+                      borderOnHover
+                      neutral
+                      small
+                    />
+                  }
                   showToggleEmbeds={canToggleEmbeds}
                   showPrint
                 />

app/scenes/Document/components/ReferenceListItem.js

@@ -27,7 +27,6 @@ const DocumentLink = styled(Link)`
   &:active,
   &:focus {
     background: ${(props) => props.theme.listItemHoverBackground};
-    outline: none;
   }
 `;