Skip to content

fix(atomic): accessibility fixes for commerce and recommendation components#7112

Draft
y-lakhdar wants to merge 1 commit intomainfrom
fix/a11y-commerce-recommendations
Draft

fix(atomic): accessibility fixes for commerce and recommendation components#7112
y-lakhdar wants to merge 1 commit intomainfrom
fix/a11y-commerce-recommendations

Conversation

@y-lakhdar
Copy link
Contributor

Summary

This PR applies accessibility fixes to commerce and recommendation components extracted from the accessibility-epic2 branch.

Changes Applied

  • Commerce Pager: Added aria-live region announcements for page navigation
  • Commerce Refine Modal: Added unique aria-label to aside element
  • Suggestion Renderer: Fixed nested interactive elements (changed button to div)
  • E2E Tests: Updated accessibility violation assertions for better error messages

Source Commits

Applied fixes from the following commits on accessibility-epic2:

  • 75b21af: Commerce pager aria-live announcements
  • 7135cf5: Commerce pager radio button improvements
  • e4d8bfc: Commerce refine modal aria-label
  • 5ef4bf9: Commerce search box accessibility (already present)
  • c3acb1f: Commerce instant products nested-interactive fix
  • 7a83d1b: Recommendations button color (story file not present on this branch)
  • 4146434: E2e test a11y violation expectations

Files Changed

  • Commerce pager component and tests
  • Commerce refine modal
  • Commerce search box (verified existing fixes)
  • Common suggestion renderer
  • Multiple e2e test files for improved accessibility assertions

Testing

  • ✅ LSP diagnostics pass (no TypeScript errors)
  • ✅ Pre-commit linting passed
  • ⚠️ Full build requires dependency installation (storybook deps missing)
  • ⚠️ Unit tests require dependency installation

Notes

This is part of the larger a11y cleanup effort. Changes were manually applied rather than cherry-picked due to significant structural differences between branches.

…onents

- Add aria-live announcements to commerce pager for page changes
- Add unique aria-label to commerce refine modal
- Fix nested interactive elements in suggestion renderer (button -> div)
- Update e2e test assertions for better accessibility violation reporting
},
})(
renderRefineModalBody()(html`
renderRefineModalBody(this.bindings.i18n)(html`
@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