From 0b6fce9166dbbe4164731e3efec476f8ce66b9f3 Mon Sep 17 00:00:00 2001
From: Paul Kniaz <pjkniaz@gmail.com>
Date: Sun, 6 Jul 2025 10:07:14 -0400
Subject: [PATCH 1/4] Add aria-labels and accessibility improvements to buttons
 and navigation components

---
 src/components/Banner/index.astro             |  2 +-
 src/components/Nav/JumpToLinks.tsx            | 21 ++++++++++---------
 src/components/Nav/MainNavLinks.tsx           | 11 +++++-----
 .../ReferenceDirectoryWithFilter/index.tsx    |  7 ++++---
 src/components/SearchResults/index.tsx        |  4 ++++
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/Banner/index.astro b/src/components/Banner/index.astro
index a864a86661..8cef5229a5 100644
--- a/src/components/Banner/index.astro
+++ b/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>
diff --git a/src/components/Nav/JumpToLinks.tsx b/src/components/Nav/JumpToLinks.tsx
index 322b2a30f8..d9e98ad3eb 100644
--- a/src/components/Nav/JumpToLinks.tsx
+++ b/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) => (
diff --git a/src/components/Nav/MainNavLinks.tsx b/src/components/Nav/MainNavLinks.tsx
index 99ffa9b71b..7e5f364a52 100644
--- a/src/components/Nav/MainNavLinks.tsx
+++ b/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" />
diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx
index bfc79ed42a..a339859b42 100644
--- a/src/components/ReferenceDirectoryWithFilter/index.tsx
+++ b/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>
diff --git a/src/components/SearchResults/index.tsx b/src/components/SearchResults/index.tsx
index e136e5aaa6..b3bc9673ef 100644
--- a/src/components/SearchResults/index.tsx
+++ b/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>

From c81694d54980667e4ce330310f357c9366dfdb27 Mon Sep 17 00:00:00 2001
From: Paul Kniaz <pjkniaz@gmail.com>
Date: Wed, 16 Jul 2025 16:45:16 -0400
Subject: [PATCH 2/4] Fix JSX indentation in JumpToLinks

---
 src/components/Nav/JumpToLinks.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Nav/JumpToLinks.tsx b/src/components/Nav/JumpToLinks.tsx
index d9e98ad3eb..c848d26377 100644
--- a/src/components/Nav/JumpToLinks.tsx
+++ b/src/components/Nav/JumpToLinks.tsx
@@ -20,16 +20,16 @@ export const JumpToLinks = ({
   return (
     <div class={`${styles.jumpto} ${isOpen && "open"}`}>
       <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>
+        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>

From 314036b37662acb183e99e77935d02f309c65469 Mon Sep 17 00:00:00 2001
From: Paul Kniaz <pjkniaz@gmail.com>
Date: Wed, 16 Jul 2025 16:58:10 -0400
Subject: [PATCH 3/4] Fix JSX indentation in MainNavLinks toggle

---
 src/components/Nav/MainNavLinks.tsx | 49 ++++++++++++++---------------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/components/Nav/MainNavLinks.tsx b/src/components/Nav/MainNavLinks.tsx
index 7e5f364a52..0e3b628535 100644
--- a/src/components/Nav/MainNavLinks.tsx
+++ b/src/components/Nav/MainNavLinks.tsx
@@ -43,12 +43,11 @@ export const MainNavLinks = ({
       </a>
 
       <button
-  class={styles.toggle}
-  onClick={handleToggle}
-  aria-expanded={isOpen}
-  aria-label={mobileMenuLabel || "Toggle navigation menu"}
->
-
+        class={styles.toggle}
+        onClick={handleToggle}
+        aria-expanded={isOpen}
+        aria-label={mobileMenuLabel || "Toggle navigation menu"}
+      >
         <div class={styles.mobileMenuLabel}>
           {isOpen ? (
             <Icon kind="close" />
@@ -80,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>
   );
 };

From 775afe85314f44cac9ebff6992edcc8f64a5c073 Mon Sep 17 00:00:00 2001
From: Paul Kniaz <pjkniaz@gmail.com>
Date: Thu, 17 Jul 2025 20:58:27 -0400
Subject: [PATCH 4/4] Fix: improve contrast for 'function' keyword (#D73A49)

---
 src/components/Nav/styles.module.scss                       | 4 ++++
 .../tutorials/en/layered-rendering-with-framebuffers.mdx    | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Nav/styles.module.scss b/src/components/Nav/styles.module.scss
index 3d201ed7d8..33c7cf5c79 100644
--- a/src/components/Nav/styles.module.scss
+++ b/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;
+}
diff --git a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx
index 604a787311..c0300a4efb 100644
--- a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx
+++ b/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')}