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
This commit is contained in:
Tom Moor
2020-09-12 23:27:23 -07:00
committed by GitHub
parent fc98cf78e6
commit 450d6b7e42
15 changed files with 37 additions and 44 deletions

View File

@ -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) => (