Merge pull request #888 from tubone24/a11y-emptylint

a11y emptylink
tubone24 · Apr 24, 2022 · fc85829 · fc85829
2 parents e0e450d + f4dfefb
commit fc85829
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/__generated__/gatsby-types.ts b/src/__generated__/gatsby-types.ts
diff --git a/src/components/Card/index.scss b/src/components/Card/index.scss
@@ -100,4 +100,12 @@
       color: $black;
     }
   }
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    clip: rect(1px, 1px, 1px, 1px);
+  }
 }
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -21,22 +21,26 @@ const CardHeader = ({
   if (index > 1) {
     return (
       <Link to={url}>
+        <span className="visually-hidden">{title}</span>
         <div
           className="wrapper lozad"
           data-background-image={parseImgur(image, SizeMapping.large)}
           title={title}
+          aria-hidden="true"
         />
       </Link>
     );
   }
   return (
     <Link to={url}>
+      <span className="visually-hidden">{title}</span>
       <div
         className="wrapper"
         style={{
           backgroundImage: ` url(${parseImgur(image, SizeMapping.large)})`,
         }}
         title={title}
+        aria-hidden="true"
       />
     </Link>
   );
@@ -81,7 +85,9 @@ const Card = ({
             <h4 className="title">{title}</h4>
           </Link>
           <p>{description}</p>
-          <Link to={withPrefix(url)}>....Read more....</Link>
+          <Link to={withPrefix(url)} aria-hidden="true">
+            ....Read more....
+          </Link>
         </div>
       </div>
     </div>

diff --git a/src/templates/index.tsx b/src/templates/index.tsx
@@ -36,8 +36,8 @@ const NavLink = ({
   }
 
   return (
-    <Link to={`${url}`} title={text}>
-      <NavLinkText color="#66ccff" text={text} />
+    <Link to={`${url}`}>
+      <NavLinkText color="#5252FF" text={text} />
     </Link>
   );
 };