Merge pull request #6 from mgifford/copilot/fix-accessibility-main-landmark

Add main landmark for WCAG 2.1 compliance

Author: mgifford

index.html

@@ -28,6 +28,7 @@
   <div class="clock"></div>
   <section aria-live="assertive" aria-label="Slide mode status">Leaving slide mode.</section>
 
+  <main>
   <!-- Slide 1: Cover -->
   <section class="slide cover clear" id="cover" aria-label="Cover: Whisper Live Captioning Demo">
     <h1>Whisper Live Captioning Demo</h1>
@@ -149,6 +150,7 @@ <h3 class="small">Transcript</h3>
     </div>
     <div class="notes" hidden>Separate element ID to allow multi-box polling later, if needed.</div>
   </section>
+  </main>
 
 </body>
 </html>

package.json

@@ -9,10 +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: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:headings && npm run test:css && npm run test:links && npm run test:spell",
+    "test:all": "npm run test:html && npm run test:css && npm run test:main-landmark && npm run test:links && npm run test:spell",
     "test": "npm run test:all"
   },
   "repository": {

scripts/check-main-landmark.sh

@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+# Test to ensure index.html has exactly one main landmark element
+# This prevents regression of the accessibility issue where main landmark was missing
+
+set -e
+
+echo "🔍 Checking for main landmark in index.html..."
+
+# Count the number of opening main tags
+MAIN_OPEN_COUNT=$(grep -c "<main>" index.html || true)
+
+# Count the number of closing main tags
+MAIN_CLOSE_COUNT=$(grep -c "</main>" index.html || true)
+
+if [ "$MAIN_OPEN_COUNT" -eq 0 ]; then
+  echo "❌ FAIL: No <main> element found in index.html"
+  exit 1
+elif [ "$MAIN_OPEN_COUNT" -gt 1 ]; then
+  echo "❌ FAIL: Multiple <main> opening tags found ($MAIN_OPEN_COUNT)"
+  exit 1
+fi
+
+if [ "$MAIN_CLOSE_COUNT" -eq 0 ]; then
+  echo "❌ FAIL: No </main> closing tag found in index.html"
+  exit 1
+elif [ "$MAIN_CLOSE_COUNT" -gt 1 ]; then
+  echo "❌ FAIL: Multiple </main> closing tags found ($MAIN_CLOSE_COUNT)"
+  exit 1
+fi
+
+if [ "$MAIN_OPEN_COUNT" -ne "$MAIN_CLOSE_COUNT" ]; then
+  echo "❌ FAIL: Mismatched <main> tags (opening: $MAIN_OPEN_COUNT, closing: $MAIN_CLOSE_COUNT)"
+  exit 1
+fi
+
+echo "✅ PASS: Exactly one <main> landmark found with matching opening and closing tags"
+echo "✅ Main landmark test passed!"