commit 359f10964822d1fd2f8eb73d450699a755b5288f parent 882d94b367a5ce380ea74d5ac52ac162f1741774 Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Tue, 10 Mar 2020 12:09:08 +0700 refactor(A11y): html lang and button with keyboard navigation Diffstat:
| M | public/index.html | | | 2 | +- |
| M | src/App.js | | | 32 | +++++++++++++++++++++++++++++--- |
| M | src/Components/Button.js | | | 11 | ++++++++++- |
| M | src/Components/Link.js | | | 9 | ++++++++- |
4 files changed, 48 insertions(+), 6 deletions(-)
diff --git a/public/index.html b/public/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html style="min-width: 100vw;min-height: 100vh;"> +<html lang="en-US" style="min-width: 100vw;min-height: 100vh;"> <head> <style> @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,600&display=swap'); diff --git a/src/App.js b/src/App.js @@ -71,13 +71,39 @@ const App = () => { <Header> <Text as="h1"> Yohanes Bandung Bondowoso{' '} - <Button aria-hidden="true" onClick={toggleDark}> + <Button + aria-label="Toggle dark mode, is current mode dark?" + aria-pressed={dark} + onClick={toggleDark} + tabindex="0" + > {dark ? '🌛' : '🌞'} </Button> </Text> <Text> - <Link to="/">CV</Link> - <Link to="/uses">Uses</Link> -{' '} - <Link to="/about">About</Link> + <Button + aria-label="Go to CV Page" + onClick={() => Link.goTo('/')} + tabindex="1" + > + <Link to="/">CV</Link> + </Button>{' '} + -{' '} + <Button + aria-label="Go to page that lists the tools I use" + onClick={() => Link.goTo('/uses')} + tabindex="2" + > + <Link to="/uses">Uses</Link> + </Button>{' '} + -{' '} + <Button + aria-label="Go to About Page" + onClick={() => Link.goTo('/about')} + tabindex="3" + > + <Link to="/about">About</Link> + </Button> </Text> </Header> <Switch> diff --git a/src/Components/Button.js b/src/Components/Button.js @@ -4,7 +4,7 @@ import {colors} from '../Theme/colors'; type ButtonProps = { onClick: () => void, -} & HTMLButtonElement; +}; const Button: StyledComponent<ButtonProps, {}, {}> = styled.button` background-color: ${colors.transparent}; @@ -13,6 +13,15 @@ const Button: StyledComponent<ButtonProps, {}, {}> = styled.button` cursor: pointer; font-size: 1em; padding: 0; + + &::-moz-focus-inner { + border: 0; + } + + &:focus { + outline: ${colors.lightSelection} solid 3px; + outline-offset: 7px; + } `; export default Button; diff --git a/src/Components/Link.js b/src/Components/Link.js @@ -31,6 +31,12 @@ const LinkBase: StyledComponent<{isCurrentRoute?: boolean}, {}, {}> = styled.a` `; const Link = ({children, to, ...props}: LinkProps) => { + const history = useHistory(); + + Link.goTo = (to: string) => { + history.push(to); + }; + const isExternal = to[0] !== '/'; if (isExternal) { return ( @@ -39,11 +45,12 @@ const Link = ({children, to, ...props}: LinkProps) => { </LinkBase> ); } + const {isExact = false} = useRouteMatch(to) || {}; - const history = useHistory(); const handleClick = () => { history.push(to); }; + return ( <LinkBase {...props}