Skip to content

fix(a11y): activate navigation components on space keyup - #21800

Draft
uroslates wants to merge 10 commits into
developfrom
fix/CXSPA-12782-a11y-navigation-space-keyup-with-switch-to-ngSelect
Draft

fix(a11y): activate navigation components on space keyup#21800
uroslates wants to merge 10 commits into
developfrom
fix/CXSPA-12782-a11y-navigation-space-keyup-with-switch-to-ngSelect

Conversation

@uroslates

Copy link
Copy Markdown
Contributor

QA Steps:

  • Login to the application and from Home page try the following:
    • Case1: On holding down the spacebar key on the ‘My Account’ menu button within header region and on Main Header Menu items (Brands/Digital Cameras/... carrots ), associated functionality gets activated without releasing the respective key.
    • Case2: On holding down the spacebar key on the Language, Currency and Theme Combo Boxes within header region, associated functionality gets activated without releasing the respective key.

Expected Behavior:

  • On holding down the spacebar key on the ‘Combo Boxes’ and ‘Menu Button’ within Header, associated functionality should not be triggered without releasing the respective key.

Once a11yNavigationSpaceKeyOnKeyUp feature flag is enabled the issues should not be there! When off they are reproducible again.

IMPORTANT: This PR is in addition to other custom components addresses Language/Currency & Theme native selector issues (which are Browser specific) by adding ngSelect for those (if toggle is ON).
NOTE: Its addition to PR #21781 (adds select -> ngSelect conversion on top of PR.j

uroslates and others added 6 commits July 22, 2026 12:46
- Closes https://jira.tools.sap/browse/CXSPA-12782.

- Addresses ACC- 270.16(Level A) _ SAP Composable Storefront_ Combo Box, Button Menu_ UI getting activated without releasing space key.
…782)

- Replace native <select> with ng-select behind a11yNavigationSpaceKeyOnKeyUp toggle in SiteContextSelectorComponent and SiteThemeSwitcherComponent. Monkey-patch NgSelectComponent.handleKeyDown to defer Enter selection to keyup. Prevent Space from scrolling the page when dropdown is open. Add ng-select styles (z-index, alignment, high-contrast) to both components.
@uroslates
uroslates requested a review from a team as a code owner July 27, 2026 16:13
@github-actions
github-actions Bot marked this pull request as draft July 27, 2026 16:13
@uroslates
uroslates marked this pull request as ready for review July 27, 2026 16:17
@github-actions

Copy link
Copy Markdown
Contributor

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

@github-actions
github-actions Bot marked this pull request as draft July 28, 2026 09:02
@uroslates
uroslates marked this pull request as ready for review July 28, 2026 09:46
@github-actions

Copy link
Copy Markdown
Contributor

Merge Checks Failed

Please push a commit to re-trigger the build.
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

@github-actions
github-actions Bot marked this pull request as draft July 28, 2026 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant