Skip to content

fix(atomic): accessibility fixes for common and search components#7115

Draft
y-lakhdar wants to merge 3 commits intomainfrom
fix/a11y-common-search-components
Draft

fix(atomic): accessibility fixes for common and search components#7115
y-lakhdar wants to merge 3 commits intomainfrom
fix/a11y-common-search-components

Conversation

@y-lakhdar
Copy link
Contributor

Summary

Extracts accessibility fixes for common/ and search/ components from the accessibility-epic2 branch. This PR is part of the a11y-cleanup-and-extraction effort (Task 5 of 8).

Source Commits

All changes extracted from accessibility-epic2 branch:

  • e4d8bfc — Aside landmark aria-labels
  • 2ee9eb3 — Results per page toolbar aria
  • 5ef4bf9 — Search box/breadbox accessibility
  • 75b21af — Pager accessibility (part 1)
  • 7135cf5 — Pager accessibility (part 2)
  • c3acb1f — Nested interactive fix
  • ab843ee — Locale additions

Changes Included

Landmarks & ARIA Labels

  • Added unique aria-label attributes to all aside elements (generated-answer, smart-snippets, refine-modal)
  • Removed redundant aria-label from results-per-page toolbar (already provided by fieldset)

Search Box

  • Added screen reader announcement when search box is cleared
  • Enhanced text area clear button accessibility

Pager

  • Added screen reader announcements for page navigation
  • Improved radio button accessibility for page selection
  • Enhanced query summary aria-live messages

Breadbox

  • Improved breadcrumb button aria-label handling

Other

  • Fixed nested interactive elements in suggestion renderer
  • Added all required locale strings for a11y features

Files Changed

  • src/components/common/ - 11 files (generated-answer, refine-modal, smart-snippets, breadbox, search-box, pager, radio-button, suggestion-renderer)
  • src/components/search/ - 4 files (refine-modal, results-per-page, search-box, pager)
  • src/locales.json - 380 lines added (all a11y-related locale strings)

Verification

  • ✅ TypeScript compilation (LSP): No errors
  • ✅ Only common/ and search/ components included
  • ✅ No story files, cypress files, or commerce/insight/ipx changes
  • ⚠️ Build skipped (storybook dependency issues unrelated to changes)

Related

  • Part of a11y-cleanup-and-extraction plan
  • Task 5 of 8
  • Previous attempt FAILED (agent claimed 2/7 commits but delivered empty branch)
  • This attempt: ✅ All 7 source commits successfully extracted

- Added unique aria-labels to aside elements in generated-answer components
- Updated refine-modal body to accept and use aria-label via i18n
- Added aria-labels to smart-snippet components
- Updated atomic-refine-modal to pass aria-label to RefineModalBody

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)
…5ef4bf9, 75b21af, 7135cf5, c3acb1f)

Multiple a11y improvements:
- Search box announces clear action to screen readers
- Breadcrumb button improved aria-label handling
- Text area clear button enhanced accessibility
- Query summary aria-live messages improved
- Pager buttons add announcements for page navigation
- Radio button group accessibility enhancements
- Atomic suggestion renderer fixed nested interactive elements

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)
…b843ee)

Added localized strings for:
- refine-modal-content
- user-actions-content
- search-box-cleared
- pager navigation announcements
- and other a11y-related UI labels

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)
@y-lakhdar y-lakhdar added the a11y Accessibility issues label Feb 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Accessibility issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant