From e9022b36b9fcfd1cc90374b9722b45490502f250 Mon Sep 17 00:00:00 2001
From: Avi <avi@aiolabs.com>
Date: Tue, 1 Sep 2026 11:07:42 -0500
Subject: [PATCH] fix(a11y): add keyboard accessibility to HomeScreen profile
 list

- Profile list rows are now focusable (tabIndex) and operable via
  Enter/Space (onKeyDown handler)
- Added role=listbox on the <ul> and role=option + aria-selected on
  non-active rows
- Added descriptive aria-label including profile name and active state
- Added focus-visible CSS ring matching the design system pattern
- Updated test role from 'list' to 'listbox'
---
 frontend/src/screens/HomeScreen.tsx   | 19 ++++++++++++++++++-
 frontend/src/styles.css               |  5 +++++
 frontend/src/test/HomeScreen.test.tsx |  2 +-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/screens/HomeScreen.tsx b/frontend/src/screens/HomeScreen.tsx
index f391857..74b6cfd 100644
--- a/frontend/src/screens/HomeScreen.tsx
+++ b/frontend/src/screens/HomeScreen.tsx
@@ -116,11 +116,15 @@ export function HomeScreen({ onNavigate, onCreateProfile }: HomeScreenProps) {
               </Button>
             </header>
             <div className="card-body">
-              <ul className="home-profile-list">
+              <ul className="home-profile-list" role="listbox" aria-label="Profiles">
                 {state?.profiles.map((profile) => (
                   <li
                     key={profile.npub}
                     className={`home-profile-row${profile.is_active ? ' is-active' : ''}`}
+                    role={profile.is_active ? undefined : 'option'}
+                    aria-selected={profile.is_active}
+                    tabIndex={profile.is_active ? undefined : 0}
+                    aria-label={`${profile.label}${profile.is_active ? ' (active)' : ''} — select profile`}
                     onClick={
                       profile.is_active
                         ? undefined
@@ -131,6 +135,19 @@ export function HomeScreen({ onNavigate, onCreateProfile }: HomeScreenProps) {
                             void onSelect(profile.npub);
                           }
                     }
+                    onKeyDown={
+                      profile.is_active
+                        ? undefined
+                        : (event) => {
+                            if (event.key === 'Enter' || event.key === ' ') {
+                              event.preventDefault();
+                              if ((event.target as HTMLElement).closest('button, a, input')) {
+                                return;
+                              }
+                              void onSelect(profile.npub);
+                            }
+                          }
+                    }
                   >
                     <Avatar
                       npub={profile.npub}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index aeca148..480437d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1557,6 +1557,11 @@ select {
   cursor: pointer;
 }
 
+.home-profile-row:not(.is-active):focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
 .home-profile-row .active-profile-meta {
   flex: 1;
   min-width: 0;
diff --git a/frontend/src/test/HomeScreen.test.tsx b/frontend/src/test/HomeScreen.test.tsx
index 7eef738..f1e2c6f 100644
--- a/frontend/src/test/HomeScreen.test.tsx
+++ b/frontend/src/test/HomeScreen.test.tsx
@@ -41,7 +41,7 @@ describe('HomeScreen', () => {
     renderWithApp(<HomeScreen onNavigate={vi.fn()} onCreateProfile={vi.fn()} />);
 
     // The active profile row carries the "Selected" badge; find Alice via the profile list.
-    const profileList = await screen.findByRole('list');
+    const profileList = await screen.findByRole('listbox');
     const aliceRow = within(profileList)
       .getByText('Alice')
       .closest('.home-profile-row') as HTMLElement;