fix(a11y): resolve accessibility issues

A11y Improvements - add screen-reader only texts - remove autoFocus on search box - replace disabled link with span text in LinkButton
satnaing · Jan 9, 2024 · 940deb6 · 940deb6
1 parent de605d8
commit 940deb6
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 17 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -86,6 +86,7 @@ const { activeNav } = Astro.props;
                   d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
                 ></path>
               </svg>
+              <span class="sr-only">Search</span>
             </LinkButton>
           </li>
           <li>

diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
@@ -10,19 +10,24 @@ export interface Props {
 const { href, className, ariaLabel, title, disabled = false } = Astro.props;
 ---
 
-<a
-  href={disabled ? "#" : href}
-  tabindex={disabled ? "-1" : "0"}
-  class={`group inline-block ${className}`}
-  aria-label={ariaLabel}
-  title={title}
-  aria-disabled={disabled}
->
-  <slot />
-</a>
-
-<style>
-  a {
-    @apply hover:text-skin-accent;
-  }
-</style>
+{
+  disabled ? (
+    <span
+      class={`group inline-block ${className}`}
+      aria-label={ariaLabel}
+      title={title}
+      aria-disabled={disabled}
+    >
+      <slot />
+    </span>
+  ) : (
+    <a
+      {href}
+      class={`group inline-block hover:text-skin-accent ${className}`}
+      aria-label={ariaLabel}
+      title={title}
+    >
+      <slot />
+    </a>
+  )
+}
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -80,6 +80,7 @@ export default function SearchBar({ searchList }: Props) {
           <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
             <path d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"></path>
           </svg>
+          <span className="sr-only">Search</span>
         </span>
         <input
           className="block w-full rounded border border-skin-fill 
@@ -92,7 +93,7 @@ export default function SearchBar({ searchList }: Props) {
           value={inputVal}
           onChange={handleChange}
           autoComplete="off"
-          autoFocus
+          // autoFocus
           ref={inputRef}
         />
       </label>

diff --git a/src/components/ShareLinks.astro b/src/components/ShareLinks.astro
@@ -49,6 +49,7 @@ const shareLinks = [
           title={social.linkTitle}
         >
           <Fragment set:html={socialIcons[social.name]} />
+          <span class="sr-only">{social.linkTitle}</span>
         </LinkButton>
       ))
     }

diff --git a/src/components/Socials.astro b/src/components/Socials.astro
@@ -19,6 +19,7 @@ const { centered = false } = Astro.props;
         title={social.linkTitle}
       >
         <Fragment set:html={socialIcons[social.name]} />
+        <span class="sr-only">{social.linkTitle}</span>
       </LinkButton>
     ))
   }

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -37,6 +37,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
             d="M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z"
           ></path><circle cx="6" cy="18" r="2"></circle>
         </svg>
+        <span class="sr-only">RSS Feed</span>
       </a>
 
       <p>