My508test

.github/workflows/accessibility.yml

@@ -17,17 +17,13 @@ jobs:
         with:
           node-version: '20'
 
-      - name: Install pa11y
-        run: npm install -g pa11y
+      - name: Install pa11y-ci
+        run: npm install -g pa11y-ci
 
       - name: Start local server
         run: |
           npx http-server app -p 8080 -s &
           sleep 3
 
       - name: Run 508 accessibility scan
-        run: |
-          pa11y http://localhost:8080/index.html \
-            --runner htmlcs \
-            --standard Section508 \
-            --timeout 30000
+        run: pa11y-ci

.pa11yci

@@ -0,0 +1,16 @@
+{
+  "defaults": {
+    "runner": "htmlcs",
+    "standard": "WCAG2AA",
+    "timeout": 30000,
+    "chromeLaunchConfig": {
+      "args": [
+        "--no-sandbox",
+        "--disable-setuid-sandbox"
+      ]
+    }
+  },
+  "urls": [
+    "http://localhost:8080/index.html"
+  ]
+}

app/scripts/contact.js

@@ -2,20 +2,41 @@
  * Contact Form Handling
  * Handles form submission with reCAPTCHA validation
  */
+import { API_BASE } from "/scripts/api.js";
 
-import { API_BASE } from '/scripts/api.js';
+/**
+ * Fix reCAPTCHA accessibility issues
+ */
+function fixRecaptchaAccessibility() {
+  // Add aria-label to the hidden textarea
+  const textarea = document.getElementById("g-recaptcha-response");
+  if (textarea) {
+    textarea.setAttribute("aria-label", "reCAPTCHA response");
+    textarea.setAttribute("aria-hidden", "true");
+  }
+
+  // Add title to ALL reCAPTCHA iframes (there can be multiple)
+  const iframes = document.querySelectorAll("#contact-form iframe");
+  iframes.forEach((iframe, index) => {
+    if (!iframe.getAttribute("title")) {
+      iframe.setAttribute("title", "reCAPTCHA verification frame");
+    }
+  });
+}
 
 /**
  * Initialize contact form
  */
 function initContactForm() {
   const form = document.getElementById("contact-form");
-
   if (!form) {
     console.warn("Contact form not found");
     return;
   }
-
+
+  // Fix accessibility after reCAPTCHA loads
+  setTimeout(fixRecaptchaAccessibility, 2000);
+
   form.addEventListener("submit", async (e) => {
     e.preventDefault();