From d0576d77fbaa3747d491a4d8c526d6071e07c0d7 Mon Sep 17 00:00:00 2001
From: maphew <486200+maphew@users.noreply.github.com>
Date: Fri, 11 Sep 2026 04:22:49 +0000
Subject: [PATCH 1/3] fix(web): label forms for screen readers

Add accessible names and error links to six forms. Follow issue #4172.

The password show/hide buttons now stay in the keyboard tab order. They have aria-label, aria-pressed, and aria-controls. The length rule is linked to the password input.

The other changes link a label to its input in the Create Town dialog, mark the Invite Member email input invalid and link its error, name the app prompt and TTFB search inputs, and link the Wasteland name error and organization selector.

Add a server-render test for the password fields.
---
 .../new/NewWastelandWizardClient.tsx          | 24 +++++++++--
 .../alerting-ttfb/TtfbAlertingContent.tsx     |  1 +
 .../components/app-builder/PromptInput.tsx    |  1 +
 .../deployments/PasswordFormFields.test.ts    | 41 +++++++++++++++++++
 .../deployments/PasswordFormFields.tsx        | 13 ++++--
 .../components/gastown/CreateTownDialog.tsx   |  8 +++-
 .../members/InviteMemberDialog.tsx            |  8 +++-
 7 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 apps/web/src/components/deployments/PasswordFormFields.test.ts

diff --git a/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx b/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
index 32f631d218..4f17ac70ab 100644
--- a/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
+++ b/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
@@ -661,14 +661,21 @@ function IntentStep({
           onChange={e => setName(e.target.value)}
           maxLength={NAME_MAX_LENGTH}
           autoFocus
+          aria-invalid={Boolean(nameError)}
+          aria-describedby={nameError ? 'wasteland-name-error' : undefined}
         />
-        {nameError && <p className="text-xs text-destructive">{nameError}</p>}
+        {nameError && (
+          <p id="wasteland-name-error" role="alert" className="text-xs text-destructive">
+            {nameError}
+          </p>
+        )}
       </div>
 
       {/* Ownership */}
       <div className="space-y-2">
-        <Label>Ownership</Label>
+        <Label id="wasteland-ownership-label">Ownership</Label>
         <RadioGroup
+          aria-labelledby="wasteland-ownership-label"
           value={ownership}
           onValueChange={v => {
             if (lockedOrgId) return;
@@ -701,7 +708,12 @@ function IntentStep({
               </p>
             ) : (
               <Select value={selectedOrgId} onValueChange={setSelectedOrgId}>
-                <SelectTrigger className="w-full">
+                <SelectTrigger
+                  className="w-full"
+                  aria-label="Organization"
+                  aria-invalid={Boolean(orgError)}
+                  aria-describedby={orgError ? 'wasteland-org-error' : undefined}
+                >
                   <SelectValue placeholder="Select an organization" />
                 </SelectTrigger>
                 <SelectContent>
@@ -725,7 +737,11 @@ function IntentStep({
                 </SelectContent>
               </Select>
             )}
-            {orgError && <p className="mt-1 text-xs text-destructive">{orgError}</p>}
+            {orgError && (
+              <p id="wasteland-org-error" role="alert" className="mt-1 text-xs text-destructive">
+                {orgError}
+              </p>
+            )}
           </div>
         )}
       </div>
diff --git a/apps/web/src/app/admin/alerting-ttfb/TtfbAlertingContent.tsx b/apps/web/src/app/admin/alerting-ttfb/TtfbAlertingContent.tsx
index 1956645046..39dbec164e 100644
--- a/apps/web/src/app/admin/alerting-ttfb/TtfbAlertingContent.tsx
+++ b/apps/web/src/app/admin/alerting-ttfb/TtfbAlertingContent.tsx
@@ -194,6 +194,7 @@ export function TtfbAlertingContent() {
           <Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
           <Input
             placeholder="Search by name or OpenRouter ID..."
+            aria-label="Search models"
             value={searchTerm}
             onChange={e => handleSearchChange(e.target.value)}
             className="pl-8"
diff --git a/apps/web/src/components/app-builder/PromptInput.tsx b/apps/web/src/components/app-builder/PromptInput.tsx
index a5c4d9e6d4..d342e51263 100644
--- a/apps/web/src/components/app-builder/PromptInput.tsx
+++ b/apps/web/src/components/app-builder/PromptInput.tsx
@@ -341,6 +341,7 @@ export function PromptInput({
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           placeholder={effectivePlaceholder}
+          aria-label={isLanding ? 'App prompt' : 'Message'}
           disabled={disabled || isSubmitting}
           className={cn(
             'resize-none border-none bg-transparent px-0 shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
diff --git a/apps/web/src/components/deployments/PasswordFormFields.test.ts b/apps/web/src/components/deployments/PasswordFormFields.test.ts
new file mode 100644
index 0000000000..fc73df4971
--- /dev/null
+++ b/apps/web/src/components/deployments/PasswordFormFields.test.ts
@@ -0,0 +1,41 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from '@jest/globals';
+import { PasswordProtection } from './PasswordFormFields';
+
+function render(enabled: boolean) {
+  return renderToStaticMarkup(
+    React.createElement(PasswordProtection, {
+      value: { password: '', confirmPassword: '', enabled },
+      onChange: () => undefined,
+    })
+  );
+}
+
+function firstVisibilityToggle(html: string): string {
+  return html.match(/<button type="button" aria-label="Show password"[^>]*>/)?.[0] ?? '';
+}
+
+describe('PasswordProtection accessibility', () => {
+  it('keeps the password visibility toggle keyboard reachable and state-labeled', () => {
+    const toggle = firstVisibilityToggle(render(true));
+
+    expect(toggle).not.toBe('');
+    expect(toggle).not.toContain('tabindex="-1"');
+    expect(toggle).toContain('aria-pressed="false"');
+    expect(toggle).toContain('aria-controls="password confirm-password"');
+  });
+
+  it('associates the password requirements hint with the password input', () => {
+    const html = render(true);
+
+    expect(html).toContain('id="password-requirements"');
+    expect(html).toContain('aria-describedby="password-requirements"');
+  });
+
+  it('does not render password fields while protection is disabled', () => {
+    const html = render(false);
+
+    expect(html).not.toContain('id="password"');
+  });
+});
diff --git a/apps/web/src/components/deployments/PasswordFormFields.tsx b/apps/web/src/components/deployments/PasswordFormFields.tsx
index 6469cedc50..98b6debb77 100644
--- a/apps/web/src/components/deployments/PasswordFormFields.tsx
+++ b/apps/web/src/components/deployments/PasswordFormFields.tsx
@@ -102,17 +102,22 @@ export function PasswordProtection({
                 disabled={disabled || isSaving}
                 className="pr-10 pl-10"
                 autoComplete="new-password"
+                aria-describedby="password-requirements"
               />
               <button
                 type="button"
-                tabIndex={-1}
                 onClick={() => setShowPassword(!showPassword)}
+                aria-label={showPassword ? 'Hide password' : 'Show password'}
+                aria-pressed={showPassword}
+                aria-controls="password confirm-password"
                 className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-400"
               >
                 {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
               </button>
             </div>
-            <p className="text-xs text-gray-500">Minimum 8 characters</p>
+            <p id="password-requirements" className="text-xs text-gray-500">
+              Minimum 8 characters
+            </p>
           </div>
 
           <div className="space-y-2">
@@ -131,8 +136,10 @@ export function PasswordProtection({
               />
               <button
                 type="button"
-                tabIndex={-1}
                 onClick={() => setShowPassword(!showPassword)}
+                aria-label={showPassword ? 'Hide password' : 'Show password'}
+                aria-pressed={showPassword}
+                aria-controls="password confirm-password"
                 className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-400"
               >
                 {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
diff --git a/apps/web/src/components/gastown/CreateTownDialog.tsx b/apps/web/src/components/gastown/CreateTownDialog.tsx
index 064ec8eeb7..57649d5d65 100644
--- a/apps/web/src/components/gastown/CreateTownDialog.tsx
+++ b/apps/web/src/components/gastown/CreateTownDialog.tsx
@@ -55,12 +55,18 @@ export function CreateTownDialog({ isOpen, onClose }: CreateTownDialogProps) {
         </DialogHeader>
         <form onSubmit={handleSubmit}>
           <div className="py-4">
-            <label className="mb-2 block text-sm font-medium text-white/70">Town Name</label>
+            <label htmlFor="town-name" className="mb-2 block text-sm font-medium text-white/70">
+              Town Name
+            </label>
             <Input
+              id="town-name"
+              name="town-name"
               value={name}
               onChange={e => setName(e.target.value)}
               placeholder="My Town"
               autoFocus
+              required
+              aria-required="true"
               className="border-white/10 bg-black/25"
             />
           </div>
diff --git a/apps/web/src/components/organizations/members/InviteMemberDialog.tsx b/apps/web/src/components/organizations/members/InviteMemberDialog.tsx
index 3a4ee994ec..d951f9db50 100644
--- a/apps/web/src/components/organizations/members/InviteMemberDialog.tsx
+++ b/apps/web/src/components/organizations/members/InviteMemberDialog.tsx
@@ -251,6 +251,12 @@ export function InviteMemberDialog({
                         handleInviteMember();
                       }
                     }}
+                    aria-invalid={shouldShowEmailError || emailDomainMatchesDirectSSODomain}
+                    aria-describedby={
+                      shouldShowEmailError || emailDomainMatchesDirectSSODomain
+                        ? 'invite-email-error'
+                        : undefined
+                    }
                     className={
                       shouldShowEmailError || emailDomainMatchesDirectSSODomain
                         ? 'border-red-500 focus:border-red-500'
@@ -316,7 +322,7 @@ export function InviteMemberDialog({
                       clipRule="evenodd"
                     />
                   </svg>
-                  <p className="text-sm text-red-300" role="alert">
+                  <p id="invite-email-error" className="text-sm text-red-300" role="alert">
                     {shouldShowEmailError && 'Please enter a valid email address'}
                     {emailDomainMatchesDirectSSODomain && ssoErrorText}
                   </p>

From ee522fa528e36a59451ba9ef56e21a680893297f Mon Sep 17 00:00:00 2001
From: maphew <486200+maphew@users.noreply.github.com>
Date: Fri, 11 Sep 2026 04:34:38 +0000
Subject: [PATCH 2/3] fix(web): address accessibility review findings

The first pass had defects. This commit corrects them.

- Add the React import that the Jest JSX transform needs. The new test now runs.

- Make RadioGroup a real radiogroup. It now forwards aria props. The ownership label works.

- Name the Invite Member role trigger and the app builder icon buttons.

- Remove the fixed aria-label from the Wasteland organization select. It hid the selected value.

- Announce the Wasteland setup error with role alert.

- Name the Add Model search input.

- Drop the redundant aria-required attribute from the Create Town input.

- Check both password visibility toggles in the test.
---
 .../new/NewWastelandWizardClient.tsx          |  6 ++++--
 .../src/app/admin/alerting/AddModelDialog.tsx |  1 +
 .../components/app-builder/PromptInput.tsx    |  3 +++
 .../deployments/PasswordFormFields.test.ts    | 20 ++++++++++---------
 .../deployments/PasswordFormFields.tsx        |  3 ++-
 .../components/gastown/CreateTownDialog.tsx   |  1 -
 .../members/InviteMemberDialog.tsx            |  2 ++
 apps/web/src/components/ui/radio-group.tsx    | 16 ++++++++++-----
 8 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx b/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
index 4f17ac70ab..66672b8be2 100644
--- a/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
+++ b/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
@@ -710,7 +710,6 @@ function IntentStep({
               <Select value={selectedOrgId} onValueChange={setSelectedOrgId}>
                 <SelectTrigger
                   className="w-full"
-                  aria-label="Organization"
                   aria-invalid={Boolean(orgError)}
                   aria-describedby={orgError ? 'wasteland-org-error' : undefined}
                 >
@@ -1108,7 +1107,10 @@ function PreviewStep({
       </div>
 
       {error && (
-        <div className="space-y-2 rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3">
+        <div
+          role="alert"
+          className="space-y-2 rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3"
+        >
           <p className="text-sm font-medium text-destructive">We couldn&apos;t finish the setup.</p>
           <p className="text-xs text-destructive/90">{error}</p>
           <p className="text-xs text-muted-foreground">
diff --git a/apps/web/src/app/admin/alerting/AddModelDialog.tsx b/apps/web/src/app/admin/alerting/AddModelDialog.tsx
index 96bc16345c..f03b08d5d8 100644
--- a/apps/web/src/app/admin/alerting/AddModelDialog.tsx
+++ b/apps/web/src/app/admin/alerting/AddModelDialog.tsx
@@ -46,6 +46,7 @@ export function AddModelDialog({
         <div className="flex flex-col gap-3">
           <Input
             placeholder="Search models..."
+            aria-label="Search models"
             value={searchTerm}
             onChange={e => onSearchChange(e.target.value)}
           />
diff --git a/apps/web/src/components/app-builder/PromptInput.tsx b/apps/web/src/components/app-builder/PromptInput.tsx
index d342e51263..ab77d86f0d 100644
--- a/apps/web/src/components/app-builder/PromptInput.tsx
+++ b/apps/web/src/components/app-builder/PromptInput.tsx
@@ -134,6 +134,7 @@ const BottomBar = memo(function BottomBar({
                 'h-9 cursor-help border border-amber-500/50 bg-amber-500/10 text-amber-500 hover:bg-amber-500/20 hover:text-amber-400',
                 !isLanding && 'w-9'
               )}
+              aria-label={isLanding ? undefined : 'Submit with warning'}
             >
               <AlertTriangle className="h-4 w-4" />
               {isLanding && <span>Submit</span>}
@@ -162,6 +163,7 @@ const BottomBar = memo(function BottomBar({
           onClick={onInterrupt}
           disabled={isInterrupting}
           className="h-9 w-9"
+          aria-label={isInterrupting ? 'Stopping' : 'Stop generating'}
         >
           <Square className="h-4 w-4" />
         </Button>
@@ -173,6 +175,7 @@ const BottomBar = memo(function BottomBar({
           onClick={onSubmit}
           disabled={isSubmitDisabled}
           className="h-9 w-9"
+          aria-label="Send message"
         >
           <Send className="h-4 w-4" />
         </Button>
diff --git a/apps/web/src/components/deployments/PasswordFormFields.test.ts b/apps/web/src/components/deployments/PasswordFormFields.test.ts
index fc73df4971..9cac05068c 100644
--- a/apps/web/src/components/deployments/PasswordFormFields.test.ts
+++ b/apps/web/src/components/deployments/PasswordFormFields.test.ts
@@ -12,18 +12,20 @@ function render(enabled: boolean) {
   );
 }
 
-function firstVisibilityToggle(html: string): string {
-  return html.match(/<button type="button" aria-label="Show password"[^>]*>/)?.[0] ?? '';
+function visibilityToggles(html: string): string[] {
+  return html.match(/<button type="button" aria-label="Show password"[^>]*>/g) ?? [];
 }
 
 describe('PasswordProtection accessibility', () => {
-  it('keeps the password visibility toggle keyboard reachable and state-labeled', () => {
-    const toggle = firstVisibilityToggle(render(true));
-
-    expect(toggle).not.toBe('');
-    expect(toggle).not.toContain('tabindex="-1"');
-    expect(toggle).toContain('aria-pressed="false"');
-    expect(toggle).toContain('aria-controls="password confirm-password"');
+  it('keeps every password visibility toggle keyboard reachable and state-labeled', () => {
+    const toggles = visibilityToggles(render(true));
+
+    expect(toggles).toHaveLength(2);
+    for (const toggle of toggles) {
+      expect(toggle).not.toContain('tabindex="-1"');
+      expect(toggle).toContain('aria-pressed="false"');
+      expect(toggle).toContain('aria-controls="password confirm-password"');
+    }
   });
 
   it('associates the password requirements hint with the password input', () => {
diff --git a/apps/web/src/components/deployments/PasswordFormFields.tsx b/apps/web/src/components/deployments/PasswordFormFields.tsx
index 98b6debb77..1518eca94b 100644
--- a/apps/web/src/components/deployments/PasswordFormFields.tsx
+++ b/apps/web/src/components/deployments/PasswordFormFields.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+// React must be in scope for the classic JSX runtime used by the jest transform.
+import React, { useState } from 'react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
diff --git a/apps/web/src/components/gastown/CreateTownDialog.tsx b/apps/web/src/components/gastown/CreateTownDialog.tsx
index 57649d5d65..9dab1183ad 100644
--- a/apps/web/src/components/gastown/CreateTownDialog.tsx
+++ b/apps/web/src/components/gastown/CreateTownDialog.tsx
@@ -66,7 +66,6 @@ export function CreateTownDialog({ isOpen, onClose }: CreateTownDialogProps) {
               placeholder="My Town"
               autoFocus
               required
-              aria-required="true"
               className="border-white/10 bg-black/25"
             />
           </div>
diff --git a/apps/web/src/components/organizations/members/InviteMemberDialog.tsx b/apps/web/src/components/organizations/members/InviteMemberDialog.tsx
index d951f9db50..8202618ed0 100644
--- a/apps/web/src/components/organizations/members/InviteMemberDialog.tsx
+++ b/apps/web/src/components/organizations/members/InviteMemberDialog.tsx
@@ -273,10 +273,12 @@ export function InviteMemberDialog({
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button
+                        id="role"
                         variant="outline"
                         size="sm"
                         className="flex h-10 items-center justify-between gap-2 px-3"
                         disabled={inviteMemberMutation.isPending}
+                        aria-label={`Role: ${ROLE_LABELS[role]}`}
                       >
                         {ROLE_LABELS[role]}
                         <ChevronDown className="h-3 w-3" />
diff --git a/apps/web/src/components/ui/radio-group.tsx b/apps/web/src/components/ui/radio-group.tsx
index 98103d9a82..46843d5a63 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/apps/web/src/components/ui/radio-group.tsx
@@ -4,11 +4,9 @@ import * as React from 'react';
 import { Circle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-type RadioGroupProps = {
+type RadioGroupProps = React.ComponentProps<'div'> & {
   value?: string;
   onValueChange?: (value: string) => void;
-  className?: string;
-  children: React.ReactNode;
 };
 
 const RadioGroupContext = React.createContext<{
@@ -16,10 +14,18 @@ const RadioGroupContext = React.createContext<{
   onValueChange?: (value: string) => void;
 }>({});
 
-export function RadioGroup({ value, onValueChange, className, children }: RadioGroupProps) {
+export function RadioGroup({
+  value,
+  onValueChange,
+  className,
+  children,
+  ...props
+}: RadioGroupProps) {
   return (
     <RadioGroupContext.Provider value={{ value, onValueChange }}>
-      <div className={cn('grid gap-2', className)}>{children}</div>
+      <div role="radiogroup" className={cn('grid gap-2', className)} {...props}>
+        {children}
+      </div>
     </RadioGroupContext.Provider>
   );
 }

From c0e738db1d1a35f53cee3894d9f424de41988cf1 Mon Sep 17 00:00:00 2001
From: maphew <486200+maphew@users.noreply.github.com>
Date: Fri, 11 Sep 2026 04:40:18 +0000
Subject: [PATCH 3/3] fix(web): scope the radiogroup role to labeled groups

RadioGroup now forwards ARIA props. Set role only where the group has a label, so unnamed groups are not announced.
---
 .../src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx    | 1 +
 apps/web/src/components/ui/radio-group.tsx                      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx b/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
index 66672b8be2..d3373da620 100644
--- a/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
+++ b/apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
@@ -675,6 +675,7 @@ function IntentStep({
       <div className="space-y-2">
         <Label id="wasteland-ownership-label">Ownership</Label>
         <RadioGroup
+          role="radiogroup"
           aria-labelledby="wasteland-ownership-label"
           value={ownership}
           onValueChange={v => {
diff --git a/apps/web/src/components/ui/radio-group.tsx b/apps/web/src/components/ui/radio-group.tsx
index 46843d5a63..b9a615b3a1 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/apps/web/src/components/ui/radio-group.tsx
@@ -23,7 +23,7 @@ export function RadioGroup({
 }: RadioGroupProps) {
   return (
     <RadioGroupContext.Provider value={{ value, onValueChange }}>
-      <div role="radiogroup" className={cn('grid gap-2', className)} {...props}>
+      <div className={cn('grid gap-2', className)} {...props}>
         {children}
       </div>
     </RadioGroupContext.Provider>