fix(website): remediate WCAG accessibility issues and add axe regression guardrail (#2180)

* fix(website): remediate WCAG accessibility issues and add axe regression guardrail

Fixes accessibility violations found by an axe-core sweep of every website
page in both light and dark themes:

- aria-allowed-role (WCAG 1.3.1, 4.1.2): the shared resource card rendered
  an <article> with role="listitem", which is not an allowed role for that
  element. Switched the wrapper to a <div role="listitem"> so the listitem
  role is valid (affected every card, e.g. #arcade-canvas on /extensions/).
- aria-required-children (WCAG 1.3.1): removed role="list" from the tools,
  contributors, and cookbook containers whose children are not list items.
- nested-interactive (WCAG 4.1.2): removed tabIndex=0 from extension cards
  and rendered the author as a non-interactive span so no interactive
  control is nested inside another (the author link remains in the modal).
- color-contrast (WCAG 1.4.3): gave .btn-primary explicit white text with an
  AA-compliant hover (#7326d6), and bumped the dark-theme secondary text gray
  (--sl-color-gray-3) to #84849c (5.32:1) so ToC / meta / footer text passes.

Adds a checked-in regression guardrail:

- website/scripts/a11y-audit.mjs runs axe-core over all routes in both themes
  against the production build and fails on critical/serious violations only
  (moderate/minor are reported but non-blocking). Transitions/animations are
  disabled before sampling so axe measures settled, steady-state colors
  instead of mid-theme-transition frames.
- Adds npm scripts (website:a11y at the root, a11y in website/) and README
  docs. The matching Build Website CI step is proposed in the PR description
  (omitted from this commit because the authoring token lacks workflow scope).

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* fix(website): harden a11y audit per PR review

- Fail fast when a route navigation returns a non-2xx response, so the
  guardrail can't silently pass against a broken/missing route (page.goto
  resolves even for 4xx/5xx).
- Launch the Astro preview server via `node <astro-bin>` instead of
  `spawn(..., { shell: true })`. Removing the shell layer keeps signal
  delivery / detached-PGID shutdown predictable; resolving Astro's bin and
  running it with process.execPath also avoids the EINVAL that modern Node
  raises when spawning the npx.cmd shim without a shell on Windows.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: David Pine <7679720+IEvangelist@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

website/src/pages/contributors.astro

@@ -9,7 +9,7 @@ import PageHeader from '../components/PageHeader.astro';
 
     <div class="page-content">
       <div class="container">
-        <div class="contributor-grid" id="contributor-grid" role="list">
+        <div class="contributor-grid" id="contributor-grid">
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->

website/src/pages/learning-hub/cookbook/index.astro

@@ -53,7 +53,7 @@ const languageOptions = Array.from(
 
     <div class="results-count" id="results-count" aria-live="polite">{getRecipeResultsCountText(samplesData.totalRecipes, samplesData.totalRecipes)}</div>
 
-    <div id="samples-list" role="list" set:html={renderCookbookSectionsHtml(initialRecipeMatches)}></div>
+    <div id="samples-list" set:html={renderCookbookSectionsHtml(initialRecipeMatches)}></div>
   </div>
 
   <Modal />

website/src/pages/tools.astro

@@ -53,7 +53,7 @@ const initialItems = sortTools(
           </div>
         </div>
 
-        <div id="tools-list" role="list" set:html={renderToolsHtml(initialItems)}></div>
+        <div id="tools-list" set:html={renderToolsHtml(initialItems)}></div>
 
         <div class="coming-soon">
           <h2>More Tools Coming Soon</h2>

website/src/scripts/pages/card-render.ts

@@ -36,7 +36,7 @@ export function renderSharedCardHtml(item: SharedCardRenderItem): string {
     : "resource-item";
 
   return `
-    <article class="${articleClass}" role="${escapeHtml(role)}"${item.tabIndex !== undefined ? ` tabindex="${String(item.tabIndex)}"` : ""}${renderAttributes(item.articleAttributes)}>
+    <div class="${articleClass}" role="${escapeHtml(role)}"${item.tabIndex !== undefined ? ` tabindex="${String(item.tabIndex)}"` : ""}${renderAttributes(item.articleAttributes)}>
       <button type="button" class="resource-preview">
         ${item.previewMediaHtml || ""}
         <div class="resource-info">
@@ -49,6 +49,6 @@ export function renderSharedCardHtml(item: SharedCardRenderItem): string {
         </div>
       </button>
       ${item.actionsHtml ? `<div class="resource-actions">${item.actionsHtml}</div>` : ""}
-    </article>
+    </div>
   `;
 }

website/src/scripts/pages/extensions-render.ts

@@ -3,7 +3,6 @@ import {
   getGitHubHandle,
   getGitHubUrl,
   getLastUpdatedHtml,
-  sanitizeUrl,
 } from "../utils";
 import { renderEmptyStateHtml, renderSharedCardHtml } from "./card-render";
 
@@ -111,15 +110,9 @@ export function renderExtensionsHtml(items: RenderableExtension[]): string {
           ? getGitHubHandle(authorUrl, authorName)
           : authorName || "";
       const authorHtml = authorName
-        ? `<span class="resource-tag resource-author">by ${
-            authorUrl
-              ? `<a href="${escapeHtml(
-                  sanitizeUrl(authorUrl)
-                )}" target="_blank" rel="noopener noreferrer" title="${escapeHtml(
-                  authorName
-                )}">${escapeHtml(authorHandle)}</a>`
-              : escapeHtml(authorName)
-          }</span>`
+        ? `<span class="resource-tag resource-author" title="${escapeHtml(
+            authorName
+          )}">by ${escapeHtml(authorHandle || authorName)}</span>`
         : "";
 
       const metaHtml = `
@@ -161,7 +154,6 @@ export function renderExtensionsHtml(items: RenderableExtension[]): string {
         infoExtraHtml,
         metaHtml,
         actionsHtml,
-        tabIndex: 0,
         articleAttributes: {
           id: item.id,
           "data-extension-id": item.id,

website/src/styles/global.css

@@ -662,16 +662,16 @@ body:has(#main-content) {
 
 .btn-primary {
   background: var(--color-accent);
-  color: var(--sl-color-text-invert) !important;
+  color: #fff !important;
   border-color: transparent;
   font-weight: 600;
 }
 
 .btn-primary:hover {
-  background: var(--color-accent-hover);
+  background: #7326d6;
   transform: translateY(-1px);
   box-shadow: var(--shadow-glow);
-  color: white;
+  color: #fff;
 }
 
 .btn-secondary {

website/src/styles/starlight-overrides.css

@@ -11,7 +11,7 @@
   --sl-color-white: #f0f0f5;
   --sl-color-gray-1: #d0d0da;
   --sl-color-gray-2: #9898a6;
-  --sl-color-gray-3: #60607a;
+  --sl-color-gray-3: #84849c;
   --sl-color-gray-4: #30304a;
   --sl-color-gray-5: #1a1a2e;
   --sl-color-gray-6: #0d0d12;