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

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/Nav/styles.module.scss

@@ -287,3 +287,7 @@
   margin-top: 10px;
 }
 
+/* Force 'function' keyword to have better contrast */
+code span[style*="#D73A49"] {
+  color: #000 !important;
+}

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>

src/content/tutorials/en/layered-rendering-with-framebuffers.mdx

@@ -191,7 +191,11 @@ function draw() {
 
 By default, `p5.Framebuffer`s are not drawn to the screen. The main canvas is the only thing shown at the end of `draw()`. To make the contents of a `p5.Framebuffer` visible, it has to be stamped upon the main canvas. This is typically done with a call to `image(yourFramebuffer, x, y, width, height)`. Similar to the main canvas, a `p5.Framebuffer` only gets cleared when you ask it to be cleared, so you can stamp it on the main canvas as many times as you want, like in the example below.
 
-<AnnotatedCode lang="javascript" columns={true} code={({ begin, end }) =>
+<AnnotatedCode
+  lang="javascript"
+  columns={true}
+  theme="light-plus"
+  code={({ begin, end }) =>
 `${begin('header')}
 
 ${end('header')}