Add aria-labels and accessibility improvements to buttons and navigation components

Author: eslteacher902010

src/components/Banner/index.astro

@@ -9,7 +9,7 @@ const { link, title } = entry.data;
   <a class="banner-content" href={link} target="_blank">
     <Content />
   </a>
-  <button id="hideBanner"><Icon kind="close"></button>
+  <button id="hideBanner" aria-label="Hide banner"><Icon kind="close" /></button>
 </div>
 
 <script>

src/components/Nav/JumpToLinks.tsx

@@ -20,16 +20,17 @@ export const JumpToLinks = ({
   return (
     <div class={`${styles.jumpto} ${isOpen && "open"}`}>
       <button
-        class={styles.toggle}
-        onClick={handleToggle}
-        aria-hidden="true"
-        tabIndex={-1}
-      >
-        <span>{heading}</span>
-        <div class="pt-[6px]">
-          <Icon kind={isOpen ? "chevron-down" : "chevron-up"} />
-        </div>
-      </button>
+  class={styles.toggle}
+  onClick={handleToggle}
+  aria-expanded={isOpen}
+  aria-label={`${heading} menu toggle`}
+>
+  <span>{heading}</span>
+  <div class="pt-[6px]">
+    <Icon kind={isOpen ? "chevron-down" : "chevron-up"} />
+  </div>
+</button>
+
       {isOpen && (
         <ul>
           {links?.map((link) => (

src/components/Nav/MainNavLinks.tsx

@@ -43,11 +43,12 @@ export const MainNavLinks = ({
       </a>
 
       <button
-        class={styles.toggle}
-        onClick={handleToggle}
-        aria-hidden="true"
-        tabIndex={-1}
-      >
+  class={styles.toggle}
+  onClick={handleToggle}
+  aria-expanded={isOpen}
+  aria-label={mobileMenuLabel || "Toggle navigation menu"}
+>
+
         <div class={styles.mobileMenuLabel}>
           {isOpen ? (
             <Icon kind="close" />

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -221,9 +221,10 @@ export const ReferenceDirectoryWithFilter = ({
               }}
             />
             {searchKeyword.length > 0 && (
-              <button type="reset" class="" onClick={clearInput}>
-                <Icon kind="close" className="h-4 w-4" />
-              </button>
+            <button type="reset" class="" onClick={clearInput} aria-label="Clear search input">
+          <Icon kind="close" className="h-4 w-4" />
+        </button>
+
             )}
           </div>
         </div>

src/components/SearchResults/index.tsx

@@ -77,6 +77,8 @@ const SearchResults = ({
                 value={category}
                 className="capitalize"
                 onClick={() => toggleFilter(category)}
+                aria-pressed={currentFilter === category}
+                aria-label={`Filter by ${uiTranslations[uiTranslationKey(category)]}`}
               >
                 <div class="flex flex-nowrap gap-xs">
                   {uiTranslations[uiTranslationKey(category)]}
@@ -131,6 +133,7 @@ const SearchResults = ({
             type="submit"
             class="absolute right-0 top-[2px] px-[22px] py-[13px]"
             onClick={submitInput}
+            aria-label="Submit search"
           >
             <Icon kind="arrow-lg" />
           </button>
@@ -139,6 +142,7 @@ const SearchResults = ({
             type="reset"
             class="absolute right-0 top-0 px-[22px] py-[13px]"
             onClick={clearInput}
+            aria-label="Clear search input"
           >
             <Icon kind="close-lg" />
           </button>