Merge pull request #910 from eslteacher902010/aria-labels-pr-2

Aria labels pr 2

Author: ksen0

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

@@ -22,14 +22,15 @@ export const JumpToLinks = ({
       <button
         class={styles.toggle}
         onClick={handleToggle}
-        aria-hidden="true"
-        tabIndex={-1}
+        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

@@ -45,8 +45,8 @@ export const MainNavLinks = ({
       <button
         class={styles.toggle}
         onClick={handleToggle}
-        aria-hidden="true"
-        tabIndex={-1}
+        aria-expanded={isOpen}
+        aria-label={mobileMenuLabel || "Toggle navigation menu"}
       >
         <div class={styles.mobileMenuLabel}>
           {isOpen ? (
@@ -79,26 +79,24 @@ export const MainNavLinks = ({
           </li>
         ))}
       </ul>
-      {
-        <ul class="flex flex-col gap-[15px]">
-          <li>
-            <a className={styles.buttonlink} href="https://editor.p5js.org">
-              <div class="mr-xxs">
-                <Icon kind="code-brackets" />
-              </div>
-              {editorButtonLabel}
-            </a>
-          </li>
-          <li>
-            <a className={styles.buttonlink} href="/donate/">
-              <div class="mr-xxs">
-                <Icon kind="heart" />
-              </div>
-              {donateButtonLabel}
-            </a>
-          </li>
-        </ul>
-      }
+      <ul class="flex flex-col gap-[15px]">
+        <li>
+          <a className={styles.buttonlink} href="https://editor.p5js.org">
+            <div class="mr-xxs">
+              <Icon kind="code-brackets" />
+            </div>
+            {editorButtonLabel}
+          </a>
+        </li>
+        <li>
+          <a className={styles.buttonlink} href="/donate/">
+            <div class="mr-xxs">
+              <Icon kind="heart" />
+            </div>
+            {donateButtonLabel}
+          </a>
+        </li>
+      </ul>
     </div>
   );
 };

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>