old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README

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:
Mpublic/index.html | 2+-
Msrc/App.js | 32+++++++++++++++++++++++++++++---
Msrc/Components/Button.js | 11++++++++++-
Msrc/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}