Skip to content

Conversation

@ckundo
Copy link
Member

@ckundo ckundo commented Nov 16, 2025

Fixes #51

Changes

  • ✅ Add <label> element associated with search input via htmlFor/id
  • ✅ Add aria-describedby for additional search context
  • ✅ Use .sr-only class to hide label visually
  • ✅ Provide helpful description of searchable fields
  • ✅ Add .sr-only utility class to CSS

WCAG Compliance

3.3.2 Labels or Instructions (Level A) - Labels must be provided for inputs
4.1.2 Name, Role, Value (Level A) - Form elements must have accessible names

Before & After

Before: Input with only placeholder text (not accessible to screen readers when focused)
After: Input with proper <label> and descriptive help text

Screen Reader Experience

When focusing the search input, screen readers will announce:

  • "Search builds, edit text"
  • "Search by build ID, branch name, commit hash, or triggered by"

Testing

  • Build succeeds
  • Screen reader announces label when focusing input
  • Screen reader announces help text
  • Label visually hidden but programmatically available
  • Search functionality unchanged

- Add <label> element associated with search input
- Add aria-describedby for additional context
- Use .sr-only class to hide label visually
- Provide helpful description of search functionality
- Add .sr-only utility class to CSS

WCAG: 3.3.2 Labels or Instructions (Level A)
WCAG: 4.1.2 Name, Role, Value (Level A)

Screen readers now announce the purpose of the search input
and provide context about what can be searched.
@ckundo ckundo added bug Something isn't working aria ARIA and semantic HTML issues screen-reader Screen reader accessibility issues labels Nov 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

aria ARIA and semantic HTML issues bug Something isn't working screen-reader Screen reader accessibility issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants