Merge branch 'main' into main

Author: NalinDalal

.gitignore

@@ -31,3 +31,7 @@ public/p5.min.js
 # optional local preferences for vscode
 local.code-workspace
 .zed
+
+# Playwright accessibility test output
+test-results/
+playwright-report/

astro.config.mjs

@@ -16,10 +16,15 @@ if (shouldSkipCompress) {
   console.log("WILL SKIP COMPRESS BUILD STEP");
 }
 
+const isA11yTest = Boolean(process.env.A11Y_TEST);
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://p5js.org',
   compressHTML: false,
+  devToolbar: {
+    enabled: !isA11yTest,
+  },
   integrations: [
     mermaid({autoTheme: true}),
     preact({

docs/localization.md

@@ -18,6 +18,9 @@ Each file within these collection folders corresponds to a real page on the rend
 
 The ["ui" content collection](src/content/ui/) is a little different than the others. It contains yaml files that cover strings that are used across different pages for things like the navigation bar.
 
+**Note on Translating Examples:**
+When translating Example pages (`.mdx`), you do not need to copy or include the `remix` metadata block in the frontmatter. The website will automatically fall back to the English version to fetch the remix data. This allows the copyright notice and attribution to be consistent.
+
 ## Routes and Layouts
 
 Astro uses a file-based approach to generating routes. The filepath of each file in `src/pages` becomes the url of the page it renders. Because we need to support a url scheme where English translations of pages are served at a URL with no locale prefix (for example, the English version of the tutorials page is at https://p5.js/tutorials _not_ https://p5.js/en/tutorials), there are 2 sets of routing files and folders: one in `src/pages` and another `src/pages/[locale]`. The `[locale]` set are needed to build and serve the non-English pages (whose URLs are also prefixed by the language codes).

package-lock.json

@@ -13,6 +13,7 @@
     "deploy": "wrangler deploy --env beta",
     "astro": "astro",
     "test": "vitest",
+    "test:a11y": "playwright test",
     "build:contributor-docs": "tsx ./src/scripts/builders/contribute.ts",
     "build:contributors": "tsx ./src/scripts/builders/people.ts",
     "build:reference": "tsx ./src/scripts/builders/reference.ts",
@@ -59,6 +60,7 @@
     "vite": "^7"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.12.1",
     "@codemirror/lang-javascript": "^6.2.2",
     "@playwright/test": "^1.54.1",
     "@preact/preset-vite": "^2.10.5",

package.json

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = 4321;
+const BASE_URL = `http://localhost:${PORT}`;
+
+export default defineConfig({
+  testDir: "./test/a11y",
+  testMatch: "**/*.spec.ts",
+  outputDir: "./test-results",
+  fullyParallel: true,
+  reporter: [
+    ["list"],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }]
+  ],
+
+  use: {
+    baseURL: BASE_URL,
+    trace: "on-first-retry",
+  },
+
+  // One engine, two viewports. axe-core inspects the DOM and computed styles,
+  // which agree across engines, so a browser matrix mostly re-runs the same
+  // assertions; a responsive layout can ship genuinely different markup per
+  // breakpoint, so that is the axis worth covering.
+  projects: [
+    {
+      name: "desktop",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "mobile",
+      use: { ...devices["Pixel 5"] },
+    },
+  ],
+
+  webServer: {
+    command: "npm run dev",
+    url: BASE_URL,
+    reuseExistingServer: true,
+    timeout: 180_000,
+    env: {
+      A11Y_TEST: "1",
+    },
+  },
+});

playwright.config.ts

@@ -25,7 +25,11 @@ const authorHTML = (await Astro.slots.render("author")).replace(/\<p[^\>]*\>/gm,
       <div set:html={authorHTML} />
       <slot name="description" />
     </div>
-    <div class="text-sm leading-8 [&_a]:whitespace-nowrap [&_a]:rounded-full [&_a]:mr-1 [&_a]:py-1 [&_a]:px-2 [&_a]:outline [&_a]:outline-1 [&_a]:outline-[var(--type-magenta-dark)]">
+    <!-- Materials render as outlined pills, so drop the persistent underline
+         that .rendered-markdown links get, but keep the hover underline. The
+         !important is needed to beat .rendered-markdown, and would otherwise
+         kill :hover too -- hence the second utility. -->
+    <div class="text-sm leading-8 [&_a]:whitespace-nowrap [&_a]:rounded-full [&_a]:mr-1 [&_a]:py-1 [&_a]:px-2 [&_a]:outline-1 [&_a]:outline-(--type-magenta-dark) [&_a]:no-underline! [&_a]:hover:underline!">
       <slot name="materials" />
     </div>
   </div>

public/assets/hand.jpg

@@ -87,9 +87,14 @@
 
     &:global(.open),
     &:global(.noJumpTo) {
-      grid-template-rows: min-content 2fr;
+      grid-template-rows: min-content 1fr min-content;
       min-height: 350px;
-      height: 100%;
+      height: auto;
+      max-height: none;
+    }
+
+    &:global(.noJumpTo) {
+      flex-grow: 1;
     }
   }
 
@@ -128,6 +133,12 @@
   }
 }
 
+@media (min-width: variables.$breakpoint-tablet) {
+  .container:has(.jumpto:not(:global(.open))) .mainlinks:global(.open) {
+    flex-grow: 1;
+  }
+}
+
 .jumpto {
   border-color: var(--sidebar-type-color);
 
@@ -176,11 +187,13 @@
 
   @media (min-width: variables.$breakpoint-tablet) {
     height: fit-content;
+    flex-grow: 0;
     border-top-width: 1px;
-    margin-top: auto;
 
     &:global(.open) {
-      height: 100%;
+      height: auto;
+      min-height: 0;
+      flex-grow: 1;
       overflow-y: scroll;
     }
 
@@ -270,7 +283,8 @@
   height: unset;
 
   @media (min-width: variables.$breakpoint-tablet) {
-    height: 100%;
+    height: auto;
+    min-height: 0;
     overflow-y: scroll;
 
     ul {
@@ -287,4 +301,3 @@
 .jumpto ul li.linklabel:not(:global(.small), :first-child) {
   margin-top: 10px;
 }
-