From 33347ddd5f2692092b04e4659ed667b4b8c24cc0 Mon Sep 17 00:00:00 2001
From: Nick Charney Kaye <charneykaye@users.noreply.github.com>
Date: Sat, 22 Aug 2026 13:49:53 -0700
Subject: [PATCH] Drop aria-labels that duplicate adjacent visible text in
 first-run setup

Follow-up cleanup to #474. Three containers in the welcome/installing
steps carried an aria-label equal to their own visible heading, so a
screen reader announced each heading twice. Removed the redundant labels
(WCAG anti-pattern); the visible headings remain the accessible names.
The one non-redundant label (the how-to-play list, whose heading is not
shown visually) is kept.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01C9WmcidRL3ABq7qhWHUsrG
---
 apps/web/src/setup/steps/InstallingStep.tsx | 6 +++---
 apps/web/src/setup/steps/WelcomeStep.tsx    | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/setup/steps/InstallingStep.tsx b/apps/web/src/setup/steps/InstallingStep.tsx
index 6f0a2e74..2e5ce0d5 100644
--- a/apps/web/src/setup/steps/InstallingStep.tsx
+++ b/apps/web/src/setup/steps/InstallingStep.tsx
@@ -204,9 +204,9 @@ export function InstallingStep({ flow, mode }: InstallingStepProps) {
           conversations different and preview the actual scenarios the player is
           minutes away from, so the first conversation is the real model. */}
       {mode === 'wizard' && (
+        // Plain div, not a named region: the eyebrow and heading below are the
+        // section's own visible text, so a region label would repeat them.
         <div
-          role="region"
-          aria-label={t('setup.installing.whileHeading')}
           style={{
             marginTop: '1.75rem',
             padding: '1.25rem 1.5rem',
@@ -250,8 +250,8 @@ export function InstallingStep({ flow, mode }: InstallingStepProps) {
                 <h3 style={{ margin: '0 0 0.6rem', fontSize: '0.8rem', color: '#a5b4fc', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>
                   {t('setup.installing.missionsHeading')}
                 </h3>
+                {/* The visible h3 above labels this list; no aria-label needed. */}
                 <ul
-                  aria-label={t('setup.installing.missionsHeading')}
                   style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}
                 >
                   {previews.map((s) => (
diff --git a/apps/web/src/setup/steps/WelcomeStep.tsx b/apps/web/src/setup/steps/WelcomeStep.tsx
index 74958012..fb8ba4b2 100644
--- a/apps/web/src/setup/steps/WelcomeStep.tsx
+++ b/apps/web/src/setup/steps/WelcomeStep.tsx
@@ -27,10 +27,11 @@ export function WelcomeStep({ flow }: { flow: UseSetupFlowReturn }) {
         {t('setup.welcome.subheadline')}
       </p>
 
-      {/* The promise — why this is not a chatbot (issue #473) */}
+      {/* The promise — why this is not a chatbot (issue #473). No aria-label:
+          the heading below is the note's visible content, so labelling the
+          note with the same text would double-announce it to screen readers. */}
       <div
         role="note"
-        aria-label={t('setup.welcome.promise.heading')}
         style={{
           marginBottom: '1.5rem', padding: '1rem 1.25rem',
           background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',