ci(chatislam): make a11y-axe workflow functional (chromedriver match + contrast fixes)

.github/workflows/a11y-axe.yml

@@ -64,20 +64,38 @@ jobs:
       - name: Wait for server
         run: npx wait-on http://localhost:3042 --timeout 120000
 
+      # @axe-core/cli bundles a `chromedriver` whose version tracks the latest
+      # Chrome stable. The runner's pre-installed Google Chrome is often a major
+      # behind, so the bundled driver aborts with a version mismatch (exit 2):
+      # "This version of ChromeDriver only supports Chrome version N".
+      # Install the ChromeDriver that matches THIS runner's Chrome and point axe
+      # at it. nanasess/setup-chromedriver auto-detects the installed Chrome and
+      # drops the matching driver at /usr/local/bin/chromedriver.
+      - name: Setup matching ChromeDriver
+        uses: nanasess/setup-chromedriver@v3
+
       - name: Install axe-cli
         run: npm install -g @axe-core/cli
+        # Belt-and-suspenders: make the bundled `chromedriver` npm package reuse
+        # the matched binary instead of downloading a mismatched one, in case
+        # --chromedriver-path is not honored (dequelabs/axe-core-npm#370).
+        env:
+          CHROMEDRIVER_FILEPATH: /usr/local/bin/chromedriver
 
       - name: Run axe-core (critical + serious)
-        # Tags: wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22aa
-        # --exit: exit non-zero on violation
-        # --tags: enforce up to WCAG 2.2 AA
+        # --chromedriver-path: use the runner-matched driver, not axe's bundled one.
+        # --chrome-options: CI-stable headless Chrome flags (no-sandbox + small /dev/shm).
+        # --tags: enforce up to WCAG 2.2 AA · --exit: exit non-zero on violation.
         # @axe-core/cli prints results to stdout by default; there is no
         # --reporter flag (it errors "unknown option '--reporter'").
         run: |
           axe http://localhost:3042 \
             --tags wcag2a,wcag2aa,wcag21a,wcag21aa,wcag22aa \
-            --exit \
-            --include "main, nav, [role='main']"
+            --chromedriver-path /usr/local/bin/chromedriver \
+            --chrome-options="no-sandbox,disable-setuid-sandbox,disable-dev-shm-usage" \
+            --exit
           axe http://localhost:3042/chat \
             --tags wcag2a,wcag2aa,wcag21a,wcag21aa,wcag22aa \
+            --chromedriver-path /usr/local/bin/chromedriver \
+            --chrome-options="no-sandbox,disable-setuid-sandbox,disable-dev-shm-usage" \
             --exit

web/src/components/DisclaimerBanner.astro

@@ -28,7 +28,7 @@
     or authoritative religious rulings. Always consult a qualified Islamic scholar.
     <a
       href="/legal/sharia-disclaimer"
-      style="color: var(--brand-green-mid);"
+      style="color: var(--brand-green-light);"
     >Read our Sharia content guidelines</a>
   </p>
 </div>

web/src/islands/ChatIsland.tsx

@@ -139,7 +139,7 @@ function TurnstileWidget({ siteKey, onSuccess, onError }: TurnstileWidgetProps)
     }
   }, [siteKey, onSuccess, onError])
 
-  return <div ref={containerRef} aria-label="Bot verification challenge" />
+  return <div ref={containerRef} role="group" aria-label="Bot verification challenge" />
 }
 
 interface TurnstileAPI {
@@ -156,7 +156,7 @@ function EmptyState() {
       aria-label="Chat is ready"
       data-testid="empty-state"
       data-state="empty"
-      style={{ textAlign: 'center', padding: '2rem', color: 'var(--brand-green-mid)' }}
+      style={{ textAlign: 'center', padding: '2rem', color: 'var(--brand-green-light)' }}
     >
       <p style={{ fontSize: '1rem' }}>
         Ask any question about Islam — Q&amp;A, dawah, or learning.
@@ -573,7 +573,7 @@ export default function ChatIsland({ locale, turnstileSiteKey, chatProxyUrl }: C
             aria-label={`${queriesRemaining} free queries remaining today`}
             style={{
               fontSize:        '0.75rem',
-              color:           queriesRemaining <= 1 ? '#ff9966' : 'var(--brand-green-mid)',
+              color:           queriesRemaining <= 1 ? '#ff9966' : 'var(--brand-green-light)',
               backgroundColor: 'var(--brand-green-dark)',
               padding:         '0.2rem 0.5rem',
               borderRadius:    '4px',
@@ -699,7 +699,7 @@ export default function ChatIsland({ locale, turnstileSiteKey, chatProxyUrl }: C
       </div>
 
       {/* "Powered by Anthropic" disclosure */}
-      <p style={{ fontSize: '0.65rem', color: 'rgba(201,242,122,0.35)', textAlign: 'center', margin: 0 }}>
+      <p style={{ fontSize: '0.65rem', color: 'rgba(201,242,122,0.7)', textAlign: 'center', margin: 0 }}>
         Powered by Anthropic · Ahl us-Sunnah wal-Jamaah content guidelines apply
       </p>
     </main>

web/src/pages/index.astro

@@ -104,7 +104,7 @@ export const prerender = true
   </main>
 
   <!-- Footer -->
-  <footer style="text-align: center; padding: 2rem 1.5rem; border-top: 1px solid var(--brand-green-dark); font-size: 0.75rem; color: rgba(201,242,122,0.4);">
+  <footer style="text-align: center; padding: 2rem 1.5rem; border-top: 1px solid var(--brand-green-dark); font-size: 0.75rem; color: rgba(201,242,122,0.7);">
     <nav aria-label="Footer links" style="display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 0.75rem; flex-wrap: wrap;">
       <a href="/legal/sharia-disclaimer">Sharia Disclaimer</a>
       <a href="/privacy">Privacy</a>