Merge pull request #7 from mgifford/copilot/fix-accessibility-landmarks

mgifford · web-flow · commit 4f317ce22500 · 2026-02-13T11:12:24.000-05:00
Fix landmark accessibility violation for progress and clock elements
diff --git a/AGENTS.md b/AGENTS.md
@@ -108,8 +108,8 @@ Only one notes block per slide:
 ### Required Elements
 Keep these in the `<body>` for proper presentation functionality:
 ```html
-<div class="progress"></div>
-<div class="clock"></div>
+<aside class="progress" aria-label="Presentation progress"></aside>
+<aside class="clock" aria-label="Presentation timer"></aside>
 <section aria-live="assertive" aria-label="Slide mode status">Leaving slide mode.</section>
 ```
 
diff --git a/index.html b/index.html
@@ -24,8 +24,8 @@
 </head>
 
 <body class="shower fade-in duration=30 warn=5 hidemouse">
-  <div class="progress"></div>
-  <div class="clock"></div>
+  <aside class="progress" aria-label="Presentation progress"></aside>
+  <aside class="clock" aria-label="Presentation timer"></aside>
   <section aria-live="assertive" aria-label="Slide mode status">Leaving slide mode.</section>
 
   <main>
diff --git a/package.json b/package.json
@@ -9,11 +9,11 @@
     "test:html": "html-validate -c .htmlvalidate.json '*.html'",
     "test:a11y": "pa11y-ci --config .pa11yci.json || true",
     "test:headings": "node scripts/test-heading-order.js",
-    "test:main-landmark": "bash scripts/check-main-landmark.sh",
+    "test:landmarks": "bash scripts/test-landmarks.sh",
     "test:links": "bash scripts/check-links.sh",
     "test:spell": "cspell '**/*.{md,html,js,css}' || true",
     "test:css": "bash scripts/validate-css.sh",
-    "test:all": "npm run test:html && npm run test:css && npm run test:main-landmark && npm run test:links && npm run test:spell",
+    "test:all": "npm run test:html && npm run test:landmarks && npm run test:css && npm run test:links && npm run test:spell",
     "test": "npm run test:all"
   },
   "repository": {
diff --git a/scripts/test-landmarks.sh b/scripts/test-landmarks.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+# Test that progress and clock elements are contained in landmark regions
+# This prevents regression of the accessibility issue where these elements
+# were not contained by landmarks.
+
+set -e
+
+echo "🔍 Testing landmark accessibility..."
+
+# Check if progress and clock elements use <aside> tag or have role="complementary"
+if ! grep -q '<aside class="progress"' index.html; then
+  echo "❌ FAIL: .progress element is not using <aside> tag"
+  exit 1
+fi
+
+if ! grep -q '<aside class="clock"' index.html; then
+  echo "❌ FAIL: .clock element is not using <aside> tag"
+  exit 1
+fi
+
+# Check if progress has aria-label
+if ! grep -q 'class="progress".*aria-label' index.html; then
+  echo "❌ FAIL: .progress element is missing aria-label attribute"
+  exit 1
+fi
+
+# Check if clock has aria-label
+if ! grep -q 'class="clock".*aria-label' index.html; then
+  echo "❌ FAIL: .clock element is missing aria-label attribute"
+  exit 1
+fi
+
+echo "✓ All landmark tests passed"
+echo "  - .progress is an <aside> element with aria-label"
+echo "  - .clock is an <aside> element with aria-label"
