From 49cdb7e010afacee405d7e482e38127f48df0458 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Fri, 14 Aug 2026 17:46:36 +1000
Subject: [PATCH] fix(website): resolve accessibility violations in ported
 detail pages

Fixes the three axe violations surfaced by the a11y audit after the
Primer Brand redesign:

- aria-prohibited-attr: `aria-label` was set on roleless `div`s in
  InstructionDetail and PluginDetail. The "Applies to" list now uses
  list/listitem roles; plugin provenance uses a group role.
- scrollable-region-focusable: the install command `code` element
  overflows horizontally but was not keyboard reachable. Added
  tabIndex to all three render sites.
- color-contrast: the Playbook "New" label used the brand's
  success-fg on success-subtle, reaching only 4.09:1 in light mode.
  Stepped one down the same green ramp for 6.14:1. Scoped to light
  mode; dark mode already passed and its green-7 is near-black.

Also corrects the stale route list in the audit script: /hooks/,
/workflows/ and /tools/ have never existed as pages.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6
---
 website/scripts/a11y-audit.mjs                         |  7 +------
 website/src/components/brand/ExtensionDetail.tsx       |  4 +++-
 website/src/components/brand/InstallCommandBar.tsx     |  4 +++-
 website/src/components/brand/InstructionDetail.tsx     |  6 ++++--
 website/src/components/brand/PluginDetail.tsx          |  6 ++++--
 .../brand/styles/learning-hub-copilot-app.module.css   | 10 ++++++++++
 6 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/website/scripts/a11y-audit.mjs b/website/scripts/a11y-audit.mjs
index ac130494..4b9d2623 100644
--- a/website/scripts/a11y-audit.mjs
+++ b/website/scripts/a11y-audit.mjs
@@ -28,21 +28,16 @@ const routes = [
   '/agents/',
   '/instructions/',
   '/skills/',
-  '/hooks/',
-  '/workflows/',
   '/extensions/',
   '/plugins/',
-  '/tools/',
   '/contributors/',
+  '/learning-hub/',
   '/learning-hub/cookbook/',
-  '/learning-hub/github-copilot-app/',
   // Representative dedicated detail pages (one per resource type) so the audit
   // covers the shared detail layout, sidebar, install buttons, and file browser.
   '/agent/accessibility/',
   '/instruction/a11y/',
   '/skill/acquire-codebase-knowledge/',
-  '/hook/dependency-license-checker/',
-  '/workflow/daily-issues-report/',
   '/plugin/accessibility-kanban/',
   '/extension/accessibility-kanban/',
 ];
diff --git a/website/src/components/brand/ExtensionDetail.tsx b/website/src/components/brand/ExtensionDetail.tsx
index bf046138..cbc2c177 100644
--- a/website/src/components/brand/ExtensionDetail.tsx
+++ b/website/src/components/brand/ExtensionDetail.tsx
@@ -74,7 +74,9 @@ function InstallCommand({ command }: { command: string }) {
 
   return (
     <div className={appStyles.installBar}>
-      <code className={appStyles.installCommand}>{command}</code>
+      <code className={appStyles.installCommand} tabIndex={0}>
+        {command}
+      </code>
       <button
         type="button"
         className={appStyles.installCopy}
diff --git a/website/src/components/brand/InstallCommandBar.tsx b/website/src/components/brand/InstallCommandBar.tsx
index 9356b6d0..52f1515a 100644
--- a/website/src/components/brand/InstallCommandBar.tsx
+++ b/website/src/components/brand/InstallCommandBar.tsx
@@ -70,7 +70,9 @@ export function InstallCommandBar() {
             ))}
           </ActionMenu.Overlay>
         </ActionMenu>
-        <code className={styles.installCommand}>{selected.command}</code>
+        <code className={styles.installCommand} tabIndex={0}>
+          {selected.command}
+        </code>
         <button
           type="button"
           className={styles.installCopy}
diff --git a/website/src/components/brand/InstructionDetail.tsx b/website/src/components/brand/InstructionDetail.tsx
index 0b74a53f..f69c038e 100644
--- a/website/src/components/brand/InstructionDetail.tsx
+++ b/website/src/components/brand/InstructionDetail.tsx
@@ -125,9 +125,11 @@ export function InstructionDetail({
   // are promoted into the hero rather than left in the sidebar.
   const heroExtras =
     applyTo.length > 0 ? (
-      <div className={styles.metaValues} aria-label="Applies to">
+      <div className={styles.metaValues} role="list" aria-label="Applies to">
         {applyTo.map((pattern) => (
-          <Token key={pattern} text={pattern} />
+          <span key={pattern} role="listitem">
+            <Token text={pattern} />
+          </span>
         ))}
       </div>
     ) : null;
diff --git a/website/src/components/brand/PluginDetail.tsx b/website/src/components/brand/PluginDetail.tsx
index 5d46e70d..79512667 100644
--- a/website/src/components/brand/PluginDetail.tsx
+++ b/website/src/components/brand/PluginDetail.tsx
@@ -141,7 +141,9 @@ export function PluginDetail({
   const install = (
     <>
       <div className={installStyles.installBar}>
-        <code className={installStyles.installCommand}>{installCommand}</code>
+        <code className={installStyles.installCommand} tabIndex={0}>
+          {installCommand}
+        </code>
         <button
           type="button"
           className={installStyles.installCopy}
@@ -167,7 +169,7 @@ export function PluginDetail({
   // Provenance sits in the hero: whether the plugin ships from this repository
   // or from a third-party repo is the first thing a reader needs to know.
   const heroExtras = (
-    <div className={styles.metaValues} aria-label="Plugin provenance">
+    <div className={styles.metaValues} role="group" aria-label="Plugin provenance">
       <Label color={item.external ? "purple" : "green"} size="medium">
         {item.external ? "External plugin" : "Built-in"}
       </Label>
diff --git a/website/src/components/brand/styles/learning-hub-copilot-app.module.css b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
index 265bff62..73cdef68 100644
--- a/website/src/components/brand/styles/learning-hub-copilot-app.module.css
+++ b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
@@ -1049,6 +1049,16 @@
   background-color: var(--brand-color-success-subtle);
 }
 
+/*
+ * In light mode the brand's success-fg on success-subtle only reaches 4.09:1 at
+ * this text size. Step one down the same green ramp to clear WCAG AA (6.14:1)
+ * without leaving the brand palette. Dark mode already passes, and its green-7
+ * is near-black, so this is deliberately light-mode only.
+ */
+.page[data-mode="light"] .recCardLabelAccent {
+  color: var(--base-color-scale-green-7);
+}
+
 /*
  * Secondary label variant: stroke only, no fill. Pairs with the neutral filled
  * .recCardLabel so the two tags on a card read as distinct (per brand cards).