Merge branch '2.0' into pr-766-20

ksen0 · web-flow · commit a99c48d1647c · 2025-07-28T18:10:54.000+02:00
diff --git 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/CodeEmbed/frame.tsx b/src/components/CodeEmbed/frame.tsx
@@ -163,7 +163,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
           base: props.base,
           scripts: props.scripts,
           instanceMode: props.jsCode.includes('new p5'),
-        }) : undefined}
+        }) : ""}
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"
         title="Code Preview"
diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "preact/hooks";
+import { useLiveRegion } from '../hooks/useLiveRegion';
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
@@ -25,6 +26,7 @@ import { Icon } from "../Icon";
  * }
  */
 export const CodeEmbed = (props) => {
+  const { ref: liveRegionRef, announce } = useLiveRegion();
   const [rendered, setRendered] = useState(false);
   const initialCode = props.initialValue ?? "";
   // Source code from Google Docs sometimes uses a unicode non-breaking space
@@ -59,6 +61,7 @@ export const CodeEmbed = (props) => {
     } else {
       setPreviewCodeString(codeString);
     }
+    announce("Sketch is running");
   };
 
   const [previewCodeString, setPreviewCodeString] = useState(codeString);
@@ -108,6 +111,7 @@ export const CodeEmbed = (props) => {
               className="bg-bg-gray-40"
               onClick={() => {
                 setPreviewCodeString("");
+                announce("Sketch stopped");
               }}
               ariaLabel="Stop sketch"
             >
@@ -148,6 +152,7 @@ export const CodeEmbed = (props) => {
             onClick={() => {
               setCodeString(initialCode);
               setPreviewCodeString(initialCode);
+              announce("Code reset to initial value.");
             }}
             ariaLabel="Reset code to initial value"
             className="bg-white text-black"
@@ -156,6 +161,7 @@ export const CodeEmbed = (props) => {
           </CircleButton>
         </div>
       </div>
+      <span ref={liveRegionRef} aria-live="polite" class="sr-only" />
     </div>
   );
 };
diff --git a/src/components/CopyCodeButton/index.tsx b/src/components/CopyCodeButton/index.tsx
@@ -1,13 +1,20 @@
 import { useState } from 'preact/hooks';
+import { useLiveRegion } from '../hooks/useLiveRegion';
 import CircleButton from "../CircleButton";
 
 interface CopyCodeButtonProps {
   textToCopy: string;
+  announceOnCopy?: string;
 }
 
-export const CopyCodeButton = ({ textToCopy }: CopyCodeButtonProps) => {
+export const CopyCodeButton = ({
+  textToCopy,
+  announceOnCopy = 'Code copied to clipboard'
+}: CopyCodeButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
 
+  const { ref: liveRegionRef, announce } = useLiveRegion<HTMLSpanElement>();
+
   const copyTextToClipboard = async () => {
     console.log('Copy button clicked');
     console.log('Text to copy:', textToCopy);
@@ -16,6 +23,9 @@ export const CopyCodeButton = ({ textToCopy }: CopyCodeButtonProps) => {
       console.log('Using Clipboard API');
       await navigator.clipboard.writeText(textToCopy);
       console.log('Text copied successfully');
+
+      announce(announceOnCopy);
+
       setIsCopied(true);
       setTimeout(() => {
         setIsCopied(false);
@@ -29,52 +39,56 @@ export const CopyCodeButton = ({ textToCopy }: CopyCodeButtonProps) => {
   console.log('Component rendered, isCopied:', isCopied);
 
   return (
-    <CircleButton
-      onClick={() => {
-        console.log('CircleButton clicked');
-        copyTextToClipboard();
-      }}
-      ariaLabel="Copy code to clipboard"
-      className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`}
-    >
-      {isCopied ? (
-        <svg 
-          width="18" 
-          height="22" 
-          viewBox="0 0 24 24" 
-          fill="none" 
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path 
-            d="M20 6L9 17L4 12" 
-            stroke="currentColor" 
-            strokeWidth="2" 
-            strokeLinecap="round" 
-            strokeLinejoin="round"
-          />
-        </svg>
-      ) : (
-        <svg
-          width="18"
-          height="22"
-          viewBox="4 7 18 23"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M 4.054 12.141 C 4.054 11.865 4.877 11.877 5.153 11.877 L 9.073 11.953 C 9.2 11.953 8.791 22.207 9.006 23.531 C 11.73 24.182 17.631 24.022 17.631 24.171 L 17.638 28.083 C 17.638 28.359 17.414 28.583 17.138 28.583 L 4.554 28.583 C 4.278 28.583 4.054 28.359 4.054 28.083 L 4.054 12.141 Z M 5.054 12.641 L 5.054 27.583 L 16.638 27.583 L 16.735 24.024 L 8.623 24.051 L 8.195 12.679 L 5.054 12.641 Z"
-            fill="currentColor"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M 8.14 8.083 C 8.14 7.807 8.364 7.583 8.64 7.583 L 21.224 7.583 C 21.5 7.583 21.724 7.807 21.724 8.083 L 21.724 24.025 C 21.724 24.301 21.5 24.525 21.224 24.525 L 8.64 24.525 C 8.364 24.525 8.14 24.301 8.14 24.025 L 8.14 8.083 Z M 9.14 8.583 L 9.14 23.525 L 20.724 23.525 L 20.724 8.583 L 9.14 8.583 Z"
-            fill="currentColor"
-          />
-        </svg>
-      )}
-    </CircleButton>
+    <>
+      <CircleButton
+        onClick={() => {
+          console.log('CircleButton clicked');
+          copyTextToClipboard();
+        }}
+        ariaLabel="Copy code to clipboard"
+        className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`}
+      >
+        {isCopied ? (
+          <svg 
+            width="18" 
+            height="22" 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path 
+              d="M20 6L9 17L4 12" 
+              stroke="currentColor" 
+              strokeWidth="2" 
+              strokeLinecap="round" 
+              strokeLinejoin="round"
+            />
+          </svg>
+        ) : (
+          <svg
+            width="18"
+            height="22"
+            viewBox="4 7 18 23"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M 4.054 12.141 C 4.054 11.865 4.877 11.877 5.153 11.877 L 9.073 11.953 C 9.2 11.953 8.791 22.207 9.006 23.531 C 11.73 24.182 17.631 24.022 17.631 24.171 L 17.638 28.083 C 17.638 28.359 17.414 28.583 17.138 28.583 L 4.554 28.583 C 4.278 28.583 4.054 28.359 4.054 28.083 L 4.054 12.141 Z M 5.054 12.641 L 5.054 27.583 L 16.638 27.583 L 16.735 24.024 L 8.623 24.051 L 8.195 12.679 L 5.054 12.641 Z"
+              fill="currentColor"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M 8.14 8.083 C 8.14 7.807 8.364 7.583 8.64 7.583 L 21.224 7.583 C 21.5 7.583 21.724 7.807 21.724 8.083 L 21.724 24.025 C 21.724 24.301 21.5 24.525 21.224 24.525 L 8.64 24.525 C 8.364 24.525 8.14 24.301 8.14 24.025 L 8.14 8.083 Z M 9.14 8.583 L 9.14 23.525 L 20.724 23.525 L 20.724 8.583 L 9.14 8.583 Z"
+              fill="currentColor"
+            />
+          </svg>
+        )}
+      </CircleButton>
+      {/* Visually hidden live region for accessibility announcements */}
+      <span ref={liveRegionRef} aria-live="polite" class="sr-only" />
+    </>
   );
 };
diff --git a/src/components/Nav/JumpToLinks.tsx b/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) => (
diff --git a/src/components/Nav/MainNavLinks.tsx b/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>
   );
 };
diff --git a/src/components/PageHeader/HomePage.astro b/src/components/PageHeader/HomePage.astro
@@ -39,9 +39,9 @@ const { config } = Astro.props;
   {
     config.data.heroImages.map((im, i) => (
       im.linkTarget ?
-      <a href={im.linkTarget }>
+      <a href={im.linkTarget} class={`hero-image-container ${i > 0 ? "hidden" : ""}`}>
       <Image
-          containerClass={`relative hero-image-container ${i > 0 ? "hidden" : ""}`}
+          containerClass={"relative"}
           class={"hero-image"}
           aspectRatio="none"
           src={im.image}
diff --git 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
@@ -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>
diff --git a/src/components/hooks/useLiveRegion.ts b/src/components/hooks/useLiveRegion.ts
@@ -0,0 +1,30 @@
+import { useRef, useEffect } from 'preact/hooks';
+
+export function useLiveRegion<T extends HTMLElement = HTMLElement>() {
+  const ref = useRef<T | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  /** Clear any existing timer */
+  const clearTimer = () => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (ref.current) ref.current.textContent = '';
+  };
+
+  const announce = (message: string, clearMessage = 1000) => {
+    const node = ref.current;
+    if (!node) return;
+    clearTimer();
+    node.textContent = message;
+    timerRef.current = setTimeout(() => {
+      if (node) node.textContent = '';
+      timerRef.current = null;
+    }, clearMessage);
+  };
+
+  useEffect(() => clearTimer, []);
+
+  return { ref, announce };
+}
diff --git a/src/content/tutorials/en/getting-started-with-nodejs.mdx b/src/content/tutorials/en/getting-started-with-nodejs.mdx
