From 940deb6d3f25aac2abf0a57008b66942185ea2ab Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Tue, 9 Jan 2024 14:29:04 +0630
Subject: [PATCH] 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
---
 src/components/Header.astro     |  1 +
 src/components/LinkButton.astro | 37 +++++++++++++++++++--------------
 src/components/Search.tsx       |  3 ++-
 src/components/ShareLinks.astro |  1 +
 src/components/Socials.astro    |  1 +
 src/pages/index.astro           |  1 +
 6 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 77e0c41ca..c14e81f1b 100644
--- 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
index c37608ab3..4f38fd5dd 100644
--- 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
index ae0c061e0..590b583dc 100644
--- 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
index e37bcb518..78d20a00d 100644
--- 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
index 0170df497..54832f9ed 100755
--- 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
index a0c7ed385..bc752611f 100644
--- 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>