Merge pull request #33 from hgcl/improve-icon-accessibility

Improve icon accessibility
hgcl · Jan 6, 2021 · a2bf2dd · a2bf2dd · vercel · Jan 6, 2021
2 parents 6f515c1 + 1b69a95
commit a2bf2dd
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 16 deletions.
diff --git a/components/BurgerIcon.js b/components/BurgerIcon.js
@@ -1,19 +1,18 @@
 import React from "react";
 
-const styleBar = "bg-white absolute h-1 left-12 w-10";
+const styleBar = "bg-white absolute h-1 w-10 left-1 top-1";
 
 const BurgerIcon = ({ open, ...props }) => (
-  <div
+  <button
     className={`${
       open ? "burger-menu open" : "burger-menu"
-    } z-50 block fixed bg-transparent cursor-pointer w-3xl w-4xl h-4xl top-1 md:top-2 right-28 md:right-32`}
+    } z-50 bg-transparent fixed h-8 w-12 top-6 md:top-8 right-4 md:right-10`}
     {...props}
   >
-    <div className="bg-transparent absolute h-6 w-10 top-6 left-12"></div>
-    <div className={`${styleBar} top-6`}></div>
-    <div className={`${styleBar} top-8`}></div>
-    <div className={`${styleBar} top-10`}></div>
-  </div>
+    <div className={`${styleBar}`}></div>
+    <div className={`${styleBar} top-3`}></div>
+    <div className={`${styleBar} top-5`}></div>
+  </button>
 );
 
 // TODO add menu animation https://codingislove.com/hamburger-navigation-bar/

diff --git a/components/Menu.js b/components/Menu.js
@@ -22,7 +22,7 @@ const Menu = () => (
     overlayStyle={overlayStyle}
     contentStyle={contentStyle}
     closeOnDocumentClick={false}
-    trigger={(open) => <BurgerIcon open={open} />}
+    trigger={(open) => <BurgerIcon aria-label="Menu" open={open} />}
   >
     {(close) => (
       <div className="menu w-full block text-center p-0">

diff --git a/components/footer.js b/components/footer.js
@@ -15,23 +15,23 @@ export default function Footer() {
       <div className="flex flex-col items-center text-gray-regular h-full justify-end mb-16">
         <div className="flex flex-row items-center mb-8">
           <span className={iconStyle}>
-            <Link href="https://twitter.com/clara__le">
+            <Link href="https://twitter.com/clara__le" aria-label="Twitter">
               <IconTwitter height={iconHeight} fill={iconFill} />
             </Link>
           </span>
           <span className={iconStyle}>
-            <Link href="https://lifeundercontrol.etsy.com">
+            <Link href="https://lifeundercontrol.etsy.com" aria-label="Etsy">
               <IconEtsy height={iconHeight} fill={iconFill} />
             </Link>
           </span>
           <span className={iconStyle}>
-            <Link href="https://github.com/hgcl/">
+            <Link href="https://github.com/hgcl/" aria-label="GitHub">
               <IconGithub height={iconHeight} fill={iconFill} />
             </Link>
           </span>
           <span className={iconStyle}>
             <Link href="/rss.xml">
-              <IconRss height={iconHeight} fill={iconFill} />
+              <IconRss height={iconHeight} fill={iconFill} aria-label="RSS" />
             </Link>
           </span>
         </div>

diff --git a/components/link.js b/components/link.js
@@ -1,6 +1,13 @@
 import NextLink from "next/link";
 
-export default function Link({ href, as, children, className, variant }) {
+export default function Link({
+  href,
+  as,
+  children,
+  className,
+  variant,
+  ...props
+}) {
   const isExternal = href.startsWith("http");
   const linkStyles =
     variant === "heading"
@@ -13,14 +20,17 @@ export default function Link({ href, as, children, className, variant }) {
         href={href}
         target="_blank"
         rel="noopener noreferrer"
+        {...props}
       >
         {children}
       </a>
     );
   }
   return (
     <NextLink href={href} as={as}>
-      <a className={linkStyles}>{children}</a>
+      <a className={linkStyles} {...props}>
+        {children}
+      </a>
     </NextLink>
   );
 }
diff --git a/public/icons/IconEtsy.js b/public/icons/IconEtsy.js
@@ -6,6 +6,8 @@ function IconEtsy({ height, fill }) {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 68.48 78.05"
       className={`${height} ${fill}`}
+      focusable="false"
+      aria-hidden="true"
     >
       <path
         d="M23.41 36.22v-1.55-26.1c0-1.93.06-2 2-2 7.75 0 15.49.09 23.24 0a6.67 6.67 0 016.61 4.08 23.35 23.35 0 011.51 3.7c.66 2.19 1.15 4.42 1.81 6.62.14.46.66 1.11 1.07 1.16a27.84 27.84 0 003.68.06c.47-7.48.92-14.82 1.38-22.15C43.08 1.87 21.61 1 0 .6 0 2 0 3.28.07 4.55c0 .34.58.82 1 .91 1.63.38 3.28.63 4.91.93 3.86.74 4.9 2 5 5.92.11 7 .29 14 .28 20.92 0 11.24-.16 22.47-.26 33.7a16.45 16.45 0 01-.21 1.84 3.2 3.2 0 01-2.11 2.68 15.78 15.78 0 01-2.45.75c-2 .44-4.06.82-6 1.2V78h2.28c5.39-.17 10.79-.53 16.18-.49 15.06.08 30.11.32 45.16.51 2 0 1.9 0 2.11-1.89.58-5.16 1.23-10.33 1.85-15.49.23-1.91.47-3.82.72-5.9a16 16 0 01-2.22 0c-1.49-.23-2.2.41-2.75 1.78q-1.87 4.65-4.07 9.14c-1.81 3.68-4.7 6.15-8.91 6.28-7 .21-14 .35-20.92.15-4.53-.13-6.23-2.31-6.23-6.83v-21.8c0-.56.05-1.12.07-1.66a3 3 0 01.53-.14c4.87.09 9.75.14 14.61.3 2.59.09 4.65 1.1 5.38 3.86q.46 1.8.9 3.6c.81 3.36.81 3.31 4.24 3.28 1.16 0 1.41-.44 1.42-1.52 0-8.16.12-16.33.18-24.49v-2.13c-1.3 0-2.45.06-3.59 0-.9-.07-1.28.32-1.46 1.14-.47 2.09-1 4.18-1.49 6.25-.72 2.76-1.74 3.6-4.6 3.84-2.09.17-4.19.38-6.28.42-3.24.07-6.48 0-9.9 0z"

diff --git a/public/icons/IconGithub.js b/public/icons/IconGithub.js
@@ -2,7 +2,13 @@ import React from "react";
 
 function IconGithub({ height, fill }) {
   return (
-    <svg className={`${height} ${fill}`} viewBox="0 0 16 16">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${height} ${fill}`}
+      viewBox="0 0 16 16"
+      focusable="false"
+      aria-hidden="true"
+    >
       <path
         fillRule="evenodd"
         d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"

diff --git a/public/icons/IconRss.js b/public/icons/IconRss.js
@@ -6,6 +6,8 @@ function IconRss({ height, fill }) {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 640 640"
       className={`${height} ${fill}`}
+      focusable="false"
+      aria-hidden="true"
     >
       <path d="M85.206 469.305C38.197 469.305 0 507.632 0 554.345c0 46.95 38.197 84.876 85.206 84.876 47.15 0 85.324-37.926 85.324-84.876 0-46.713-38.162-85.04-85.324-85.04zM.083 217.42v122.683c79.89 0 154.963 31.24 211.514 87.84 56.492 56.434 87.686 131.872 87.686 212.07h123.202c0-232.987-189.57-422.556-422.403-422.556v-.036zM.236-.012v122.706c284.885 0 516.727 232.078 516.727 517.282l123.037.012C640 287.188 352.953 0 .248 0L.236-.012z"></path>
     </svg>

diff --git a/public/icons/IconTwitter.js b/public/icons/IconTwitter.js
@@ -6,6 +6,8 @@ function IconTwitter({ height, fill }) {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       className={`${height} ${fill}`}
+      focusable="false"
+      aria-hidden="true"
     >
       <path d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 002.048-2.578 9.3 9.3 0 01-2.958 1.13 4.66 4.66 0 00-7.938 4.25 13.229 13.229 0 01-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 003.96 9.824a4.647 4.647 0 01-2.11-.583v.06a4.66 4.66 0 003.737 4.568 4.692 4.692 0 01-2.104.08 4.661 4.661 0 004.352 3.234 9.348 9.348 0 01-5.786 1.995 9.5 9.5 0 01-1.112-.065 13.175 13.175 0 007.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 002.323-2.41z"></path>
     </svg>