Accessibility: Search input fields missing aria-labels for screen readers

[sykp241095]

Problem

Multiple search input fields across the application lack aria-labels, making them inaccessible to screen reader users. While these inputs have placeholder text, placeholders should not be used as the sole accessible label per WCAG guidelines (they disappear on input and may have insufficient contrast).

Affected Files

1. apps/web/app/home-content.tsx (Line 579)

   • Main search input for developer/repo/org search

2. apps/web/app/analyze/(repo)/[owner]/[repo]/_sections/overview.tsx (Line 444)

   • Repository comparison search input

3. apps/web/app/analyze/(repo)/[owner]/[repo]/_sections/contributors.tsx (Line 92)

   • Contributors search input

4. apps/web/app/collections/[slug]/trends/content.tsx (Line 302)

   • Collection trends search input

5. apps/web/components/ui/components/GHRepoSelector/GHOrgRepoSelector.tsx (Lines 222, 299, 349)

   • GitHub repo/org selector inputs

6. apps/web/components/ui/input.tsx (Line 8)

   • Base Input component (affects all usages)

7. apps/web/components/Analyze/Table/RankTable.tsx (Line 381)

   • Table filter input

8. apps/web/components/Analyze/Header/OrgHeaderAction.tsx (Line 179)

   • Org header search input

Impact

Screen reader users cannot properly identify the purpose of these search inputs when navigating with assistive technology. This violates WCAG 2.1 Level A success criterion 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value).

Suggested Fix

Add aria-label attributes to all affected input elements:

// Before
<input
  value={keyword}
  placeholder="Search a developer/repo/org"
/>

// After
<input
  value={keyword}
  placeholder="Search a developer/repo/org"
  aria-label="Search a developer, repository, or organization"
/>

For the base Input component (apps/web/components/ui/input.tsx), consider accepting an ariaLabel prop:

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  ariaLabel?: string;
  // ... other props
}

Related

• Similar to Accessibility: Select component scroll buttons missing aria-labels for screen readers #2578 (Select component scroll buttons)
• Part of ongoing accessibility improvements for Vercel deployment

Priority

Medium - Affects usability for assistive technology users but doesn't break core functionality.