From 35feef905d05fe3c58fbb5f4c89d68bba39c35e8 Mon Sep 17 00:00:00 2001
From: u-lates_sap <u.lates@sap.com>
Date: Wed, 22 Jul 2026 12:46:53 +0200
Subject: [PATCH 1/4] fix: activate navigation components on space keyup

- 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.
---
 .../feature-toggles/config/feature-toggles.ts |  11 +
 .../site-context-selector.component.html      |   4 +-
 .../site-context-selector.component.ts        |   2 +
 .../site-theme-switcher.component.html        |  10 +-
 .../site-theme-switcher.component.ts          |   2 +
 .../navigation/navigation-ui.component.html   |   3 +
 .../navigation-ui.component.spec.ts           | 318 ++++++++++++++++--
 .../navigation/navigation-ui.component.ts     |  21 +-
 core-libs/storefront/layout/a11y/index.ts     |   1 +
 .../layout/a11y/native-select-space/index.ts  |   7 +
 .../native-select-space.directive.spec.ts     | 114 +++++++
 .../native-select-space.directive.ts          |  50 +++
 .../spartacus/spartacus-features.module.ts    |   1 +
 13 files changed, 506 insertions(+), 38 deletions(-)
 create mode 100644 core-libs/storefront/layout/a11y/native-select-space/index.ts
 create mode 100644 core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.spec.ts
 create mode 100644 core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts

diff --git a/core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts b/core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts
index 21426f8f028..d288cbf8b12 100644
--- a/core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -526,6 +526,16 @@ export interface FeatureTogglesInterface {
    */
   siteIsolationForCustomLoginPage?: boolean;
 
+  /**
+   * When enabled, the navigation menu buttons (e.g. "My Account") and dropdown
+   * headers activate on spacebar key *release* (`keyup`) rather than key *press*
+   * (`keydown`), preventing the action from firing repeatedly while the key is
+   * held down.
+   * Fixes WCAG 2.5.2 (Pointer Cancellation) ACC-270.16 (Level A).
+   * Affects: `NavigationUIComponent`, 'NativeSelectSpaceDirective'
+   */
+  a11yNavigationSpaceKeyOnKeyUp?: boolean;
+
   /**
    * When enabled, the storefront's active theme follows the `theme` field of
    * the active base site (configured in SAP Commerce BackOffice). The theme
@@ -638,6 +648,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   asyncAuthConfigInitializer: false,
   siteIsolationForCustomLoginPage: false,
   applyBaseSiteThemeFromCms: false,
+  a11yNavigationSpaceKeyOnKeyUp: false,
   b2bCheckoutShippingAddressFilter: false,
   improvedTabStyling: false,
   productConfiguratorConsolidatedButtonDisabling: false,
diff --git a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html
index 3440e64256f..03db828e718 100644
--- a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html
+++ b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html
@@ -1,7 +1,7 @@
 <label *ngIf="(items$ | async)?.length > 1 && (items$ | async) as items">
   <span>{{ label$ | async | cxTranslate }}:</span>
   <div *cxFeature="'a11ySiteContextCaretClick'" class="cx-select-wrapper">
-    <select (change)="active = $any($event).target.value">
+    <select cxNativeSelectSpace (change)="active = $any($event).target.value">
       <option
         [attr.aria-label]="ariaLabel$(item.label, i, items.length) | async"
         *ngFor="let item of items; index as i"
@@ -18,7 +18,7 @@
     ></cx-icon>
   </div>
   <ng-container *cxFeature="'!a11ySiteContextCaretClick'">
-    <select (change)="active = $any($event).target.value">
+    <select cxNativeSelectSpace (change)="active = $any($event).target.value">
       <option
         [attr.aria-label]="ariaLabel$(item.label, i, items.length) | async"
         *ngFor="let item of items; index as i"
diff --git a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts
index 24962a00267..61dce2ba4f2 100644
--- a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts
+++ b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts
@@ -19,6 +19,7 @@ import {
   useFeatureStyles,
 } from '@spartacus/core';
 import { map, Observable } from 'rxjs';
+import { NativeSelectSpaceDirective } from '../../../layout/a11y/native-select-space/native-select-space.directive';
 import { IconComponent } from '../icon/icon.component';
 import { ICON_TYPE } from '../icon/icon.model';
 import { SiteContextComponentService } from './site-context-component.service';
@@ -35,6 +36,7 @@ import { SiteContextType } from './site-context.model';
     AsyncPipe,
     I18nModule,
     FeatureDirective,
+    NativeSelectSpaceDirective,
   ],
 })
 export class SiteContextSelectorComponent {
diff --git a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
index a906a3ee1a9..a94e70aa969 100644
--- a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
+++ b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
@@ -1,7 +1,10 @@
 <label *ngIf="items$ | async as themes">
   <span> {{ 'siteThemeSwitcher.theme' | cxTranslate }}:</span>
   <div *cxFeature="'a11ySiteContextCaretClick'" class="cx-select-wrapper">
-    <select (change)="activeItem = $any($event).target.value">
+    <select
+      cxNativeSelectSpace
+      (change)="activeItem = $any($event).target.value"
+    >
       <option
         [attr.aria-label]="ariaLabel$(theme, i, themes.length) | async"
         *ngFor="let theme of themes; index as i"
@@ -18,7 +21,10 @@
     <cx-icon aria-hidden="true" [type]="iconTypes.CARET_DOWN" class="small" />
   </div>
   <ng-container *cxFeature="'!a11ySiteContextCaretClick'">
-    <select (change)="activeItem = $any($event).target.value">
+    <select
+      cxNativeSelectSpace
+      (change)="activeItem = $any($event).target.value"
+    >
       <option
         [attr.aria-label]="ariaLabel$(theme, i, themes.length) | async"
         *ngFor="let theme of themes; index as i"
diff --git a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts
index a47141d0501..31735b5ff3b 100644
--- a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts
+++ b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts
@@ -15,6 +15,7 @@ import {
 } from '@spartacus/core';
 import { combineLatest, Observable, of } from 'rxjs';
 import { map, take } from 'rxjs/operators';
+import { NativeSelectSpaceDirective } from '../../../layout/a11y/native-select-space/native-select-space.directive';
 import { IconComponent } from '../icon/icon.component';
 import { ICON_TYPE } from '../icon/icon.model';
 import { SiteThemeSwitcherComponentService } from './site-theme-switcher.component.service';
@@ -33,6 +34,7 @@ import { SiteThemeSwitcherComponentService } from './site-theme-switcher.compone
     AsyncPipe,
     TranslatePipe,
     FeatureDirective,
+    NativeSelectSpaceDirective,
   ],
 })
 export class SiteThemeSwitcherComponent {
diff --git a/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.html b/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.html
index 0316f7d0987..32698a8d9f2 100644
--- a/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.html
+++ b/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.html
@@ -52,6 +52,7 @@
       [tabindex]="getTabIndex(node, depth)"
       (focus)="depth || reinitializeMenu()"
       (keydown.space)="toggleOpen($any($event))"
+      (keyup.space)="toggleOpen($any($event))"
       (keydown.esc)="back()"
     >
       {{ node.title }}
@@ -71,6 +72,7 @@
           *ngIf="(isDesktop$ | async) && depth; else dropdownHeader"
           (keydown.arrowDown)="focusOnNode($any($event))"
           (keydown.space)="onSpace($any($event))"
+          (keyup.space)="onSpace($any($event))"
           tabindex="0"
         >
           {{ node.title }}
@@ -87,6 +89,7 @@
             (click)="toggleOpen($any($event))"
             (mouseenter)="onMouseEnter($event)"
             (keydown.space)="onSpace($any($event))"
+            (keyup.space)="onSpace($any($event))"
             (keydown.enter)="onSpace($any($event))"
             (keydown.esc)="back()"
             (keydown.arrowDown)="focusOnNode($any($event))"
diff --git a/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.spec.ts b/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.spec.ts
index c2c426649fc..54739dbcff8 100644
--- a/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.spec.ts
+++ b/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.spec.ts
@@ -49,6 +49,7 @@ class MockHamburgerMenuService {
 
 const mockFeatureToggles: FeatureToggles = {
   navigationMenuCloseOnSameLinkClick: true,
+  a11yNavigationSpaceKeyOnKeyUp: true,
 };
 
 class MockBreakpointService {
@@ -395,23 +396,36 @@ describe('Navigation UI Component', () => {
       fixture.detectChanges();
     });
 
-    it('should toggle open when space key is pressed', () => {
-      const spy = spyOn(navigationComponent, 'toggleOpen');
-      const spaceEvent = new KeyboardEvent('keydown', { code: 'Space' });
-      const dropDownButton = element.query(
-        By.css('nav button[aria-expanded="false"')
-      ).nativeElement;
-      Object.defineProperty(spaceEvent, 'target', { value: dropDownButton });
-
-      navigationComponent.onSpace(spaceEvent);
+    it('should restore default tabbing order for non flyout navigation', () => {
+      const childNode = {
+        title: 'Child',
+        url: '/child',
+      };
+      navigationComponent.flyout = true;
+      expect(navigationComponent.getTabIndex(childNode, 1)).toEqual(-1);
 
-      expect(spy).toHaveBeenCalled();
+      navigationComponent.flyout = false;
+      expect(navigationComponent.getTabIndex(childNode, 1)).toEqual(0);
     });
 
+    it('return focus to node header after navigating back', fakeAsync(() => {
+      const mockNode = document.createElement('li');
+      const mockHeader = document.createElement('a');
+      mockHeader.setAttribute('aria-haspopup', 'true');
+      mockNode.appendChild(mockHeader);
+      navigationComponent['openNodes'] = [mockNode];
+      spyOn(mockHeader, 'focus');
+
+      navigationComponent.back();
+      tick();
+
+      expect(mockHeader.focus).toHaveBeenCalled();
+    }));
+
     it('should move focus to the opened node', () => {
       const firstChild = element.query(By.css('[href="/sub-sub-child-1a"]'));
       const spy = spyOn(firstChild.nativeElement, 'focus');
-      const spaceEvent = new KeyboardEvent('keydown', { code: 'Space' });
+      const spaceEvent = new KeyboardEvent('keyup', { code: 'Space' });
       const dropDownButton = element.query(
         By.css('[depth="2"] h4')
       ).nativeElement;
@@ -432,7 +446,7 @@ describe('Navigation UI Component', () => {
       const arrowUpEvent = new KeyboardEvent('keydown', {
         code: 'ArrowUp',
       });
-      const spaceEvent = new KeyboardEvent('keydown', { code: 'Space' });
+      const spaceEvent = new KeyboardEvent('keyup', { code: 'Space' });
       const dropDownButton = element.query(
         By.css('[depth="2"] h4')
       ).nativeElement;
@@ -452,31 +466,271 @@ describe('Navigation UI Component', () => {
       expect(document.activeElement).toEqual(firstChild.nativeElement);
     });
 
-    it('should restore default tabbing order for non flyout navigation', () => {
-      const childNode = {
-        title: 'Child',
-        url: '/child',
-      };
-      navigationComponent.flyout = true;
-      expect(navigationComponent.getTabIndex(childNode, 1)).toEqual(-1);
+    describe('onSpace — toggle a11yNavigationSpaceKeyOnKeyUp ON', () => {
+      beforeEach(() => {
+        navigationComponent['featureToggles'] = {
+          ...navigationComponent['featureToggles'],
+          a11yNavigationSpaceKeyOnKeyUp: true,
+        };
+      });
 
-      navigationComponent.flyout = false;
-      expect(navigationComponent.getTabIndex(childNode, 1)).toEqual(0);
+      it('should call toggleOpen on keyup', () => {
+        const spy = spyOn(navigationComponent, 'toggleOpen');
+        const keyupEvent = new KeyboardEvent('keyup', { code: 'Space' });
+        const dropDownButton = element.query(
+          By.css('nav button[aria-expanded="false"]')
+        ).nativeElement;
+        Object.defineProperty(keyupEvent, 'target', { value: dropDownButton });
+
+        navigationComponent.onSpace(keyupEvent);
+
+        expect(spy).toHaveBeenCalled();
+      });
+
+      it('should suppress action and only call preventDefault on keydown', () => {
+        const toggleSpy = spyOn(navigationComponent, 'toggleOpen');
+        const keydownEvent = new KeyboardEvent('keydown', {
+          code: 'Space',
+          cancelable: true,
+        });
+        spyOn(keydownEvent, 'preventDefault');
+        const dropDownButton = element.query(
+          By.css('nav button[aria-expanded="false"]')
+        ).nativeElement;
+        Object.defineProperty(keydownEvent, 'target', {
+          value: dropDownButton,
+        });
+
+        navigationComponent.onSpace(keydownEvent);
+
+        expect(keydownEvent.preventDefault).toHaveBeenCalled();
+        expect(toggleSpy).not.toHaveBeenCalled();
+      });
+
+      it('should not move focus or set up arrow controls on keydown', () => {
+        const focusSpy = spyOn(navigationComponent, 'focusOnNode');
+        const arrowSpy = spyOn(navigationComponent, 'setupArrowControls');
+        const keydownEvent = new KeyboardEvent('keydown', { code: 'Space' });
+
+        navigationComponent.onSpace(keydownEvent);
+
+        expect(focusSpy).not.toHaveBeenCalled();
+        expect(arrowSpy).not.toHaveBeenCalled();
+      });
+
+      it('should move focus and set up arrow controls on keyup', () => {
+        const focusSpy = spyOn(navigationComponent, 'focusOnNode');
+        const arrowSpy = spyOn(navigationComponent, 'setupArrowControls');
+        spyOn(navigationComponent, 'toggleOpen');
+        const keyupEvent = new KeyboardEvent('keyup', { code: 'Space' });
+        const dropDownButton = element.query(
+          By.css('nav button[aria-expanded="false"]')
+        ).nativeElement;
+        Object.defineProperty(keyupEvent, 'target', { value: dropDownButton });
+
+        navigationComponent.onSpace(keyupEvent);
+
+        expect(focusSpy).toHaveBeenCalled();
+        expect(arrowSpy).toHaveBeenCalled();
+      });
     });
 
-    it('return focus to node header after navigating back', fakeAsync(() => {
-      const mockNode = document.createElement('li');
-      const mockHeader = document.createElement('a');
-      mockHeader.setAttribute('aria-haspopup', 'true');
-      mockNode.appendChild(mockHeader);
-      navigationComponent['openNodes'] = [mockNode];
-      spyOn(mockHeader, 'focus');
+    describe('onSpace — toggle a11yNavigationSpaceKeyOnKeyUp OFF', () => {
+      beforeEach(() => {
+        navigationComponent['featureToggles'] = {
+          ...navigationComponent['featureToggles'],
+          a11yNavigationSpaceKeyOnKeyUp: false,
+        };
+      });
 
-      navigationComponent.back();
-      tick();
+      it('should call toggleOpen on keydown', () => {
+        const spy = spyOn(navigationComponent, 'toggleOpen');
+        const keydownEvent = new KeyboardEvent('keydown', { code: 'Space' });
+        const dropDownButton = element.query(
+          By.css('nav button[aria-expanded="false"]')
+        ).nativeElement;
+        Object.defineProperty(keydownEvent, 'target', {
+          value: dropDownButton,
+        });
 
-      expect(mockHeader.focus).toHaveBeenCalled();
-    }));
+        navigationComponent.onSpace(keydownEvent);
+
+        expect(spy).toHaveBeenCalled();
+      });
+
+      it('should ignore keyup and not call toggleOpen', () => {
+        const spy = spyOn(navigationComponent, 'toggleOpen');
+        const keyupEvent = new KeyboardEvent('keyup', { code: 'Space' });
+
+        navigationComponent.onSpace(keyupEvent);
+
+        expect(spy).not.toHaveBeenCalled();
+      });
+
+      it('should not move focus or set up arrow controls on keyup', () => {
+        const focusSpy = spyOn(navigationComponent, 'focusOnNode');
+        const arrowSpy = spyOn(navigationComponent, 'setupArrowControls');
+        const keyupEvent = new KeyboardEvent('keyup', { code: 'Space' });
+
+        navigationComponent.onSpace(keyupEvent);
+
+        expect(focusSpy).not.toHaveBeenCalled();
+        expect(arrowSpy).not.toHaveBeenCalled();
+      });
+
+      it('should move focus and set up arrow controls on keydown', () => {
+        const focusSpy = spyOn(navigationComponent, 'focusOnNode');
+        const arrowSpy = spyOn(navigationComponent, 'setupArrowControls');
+        spyOn(navigationComponent, 'toggleOpen');
+        const keydownEvent = new KeyboardEvent('keydown', { code: 'Space' });
+        const dropDownButton = element.query(
+          By.css('nav button[aria-expanded="false"]')
+        ).nativeElement;
+        Object.defineProperty(keydownEvent, 'target', {
+          value: dropDownButton,
+        });
+
+        navigationComponent.onSpace(keydownEvent);
+
+        expect(focusSpy).toHaveBeenCalled();
+        expect(arrowSpy).toHaveBeenCalled();
+      });
+    });
+
+    describe('toggleOpen — toggle a11yNavigationSpaceKeyOnKeyUp ON', () => {
+      let parentNode: HTMLElement;
+      let triggerButton: HTMLElement;
+
+      beforeEach(() => {
+        navigationComponent['featureToggles'] = {
+          ...navigationComponent['featureToggles'],
+          a11yNavigationSpaceKeyOnKeyUp: true,
+        };
+        triggerButton = element.query(
+          By.css('nav button[aria-expanded="false"]')
+        ).nativeElement;
+        parentNode = triggerButton.parentElement as HTMLElement;
+      });
+
+      it('should open node on keyup', () => {
+        const keyupEvent = new KeyboardEvent('keyup', {
+          code: 'Space',
+          cancelable: true,
+        });
+        Object.defineProperty(keyupEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(keyupEvent);
+
+        expect(navigationComponent['openNodes']).toContain(parentNode);
+      });
+
+      it('should call preventDefault and not open node on keydown', () => {
+        const keydownEvent = new KeyboardEvent('keydown', {
+          code: 'Space',
+          cancelable: true,
+        });
+        spyOn(keydownEvent, 'preventDefault');
+        Object.defineProperty(keydownEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(keydownEvent);
+
+        expect(keydownEvent.preventDefault).toHaveBeenCalled();
+        expect(navigationComponent['openNodes']).not.toContain(parentNode);
+      });
+
+      it('should call back() when keyup fires on an already-open node', () => {
+        const backSpy = spyOn(navigationComponent, 'back');
+        navigationComponent['openNodes'] = [parentNode];
+        const keyupEvent = new KeyboardEvent('keyup', { code: 'Space' });
+        Object.defineProperty(keyupEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(keyupEvent);
+
+        expect(backSpy).toHaveBeenCalled();
+      });
+
+      it('should open node on click regardless of toggle', () => {
+        const clickEvent = new MouseEvent('click');
+        Object.defineProperty(clickEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(clickEvent);
+
+        expect(navigationComponent['openNodes']).toContain(parentNode);
+      });
+    });
+
+    describe('toggleOpen — toggle a11yNavigationSpaceKeyOnKeyUp OFF', () => {
+      let parentNode: HTMLElement;
+      let triggerButton: HTMLElement;
+
+      beforeEach(() => {
+        navigationComponent['featureToggles'] = {
+          ...navigationComponent['featureToggles'],
+          a11yNavigationSpaceKeyOnKeyUp: false,
+        };
+        triggerButton = element.query(
+          By.css('nav button[aria-expanded="false"]')
+        ).nativeElement;
+        parentNode = triggerButton.parentElement as HTMLElement;
+      });
+
+      it('should open node on keydown', () => {
+        const keydownEvent = new KeyboardEvent('keydown', {
+          code: 'Space',
+          cancelable: true,
+        });
+        Object.defineProperty(keydownEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(keydownEvent);
+
+        expect(navigationComponent['openNodes']).toContain(parentNode);
+      });
+
+      it('should ignore keyup and not open node', () => {
+        const keyupEvent = new KeyboardEvent('keyup', { code: 'Space' });
+        Object.defineProperty(keyupEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(keyupEvent);
+
+        expect(navigationComponent['openNodes']).not.toContain(parentNode);
+      });
+
+      it('should call back() when keydown fires on an already-open node', () => {
+        const backSpy = spyOn(navigationComponent, 'back');
+        navigationComponent['openNodes'] = [parentNode];
+        const keydownEvent = new KeyboardEvent('keydown', { code: 'Space' });
+        Object.defineProperty(keydownEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(keydownEvent);
+
+        expect(backSpy).toHaveBeenCalled();
+      });
+
+      it('should open node on click regardless of toggle', () => {
+        const clickEvent = new MouseEvent('click');
+        Object.defineProperty(clickEvent, 'currentTarget', {
+          value: triggerButton,
+        });
+
+        navigationComponent.toggleOpen(clickEvent);
+
+        expect(navigationComponent['openNodes']).toContain(parentNode);
+      });
+    });
   });
 
   describe('transformIntoValidID', () => {
diff --git a/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.ts b/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.ts
index 259c3a0a38f..a2e7cc866ce 100644
--- a/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.ts
+++ b/core-libs/storefront/cms-components/navigation/navigation/navigation-ui.component.ts
@@ -198,14 +198,23 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
   }
 
   toggleOpen(event: UIEvent): void {
-    if (event.type === 'keydown') {
+    const isKeyboard = event.type === 'keydown' || event.type === 'keyup';
+    if (this.featureToggles?.a11yNavigationSpaceKeyOnKeyUp) {
+      if (event.type === 'keydown') {
+        event.preventDefault();
+        return;
+      }
+    } else if (event.type === 'keyup') {
+      return;
+    }
+    if (isKeyboard) {
       event.preventDefault();
     }
     this.ariaCollapseNodes();
     const node = <HTMLElement>event.currentTarget;
     const parentNode = <HTMLElement>node.parentNode;
     if (this.openNodes.includes(parentNode)) {
-      if (event.type === 'keydown') {
+      if (isKeyboard) {
         this.back();
       } else {
         this.openNodes = this.openNodes.filter((n) => n !== parentNode);
@@ -226,6 +235,14 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
    * Opens dropdown and starts keyboard navigation
    */
   onSpace(event: UIEvent): void {
+    if (this.featureToggles?.a11yNavigationSpaceKeyOnKeyUp) {
+      if (event.type === 'keydown') {
+        event.preventDefault();
+        return;
+      }
+    } else if (event.type === 'keyup') {
+      return;
+    }
     this.hamburgerMenuService.isExpanded
       .pipe(take(1))
       .subscribe((isExpanded) => {
diff --git a/core-libs/storefront/layout/a11y/index.ts b/core-libs/storefront/layout/a11y/index.ts
index 82411b53d92..133c31cda83 100644
--- a/core-libs/storefront/layout/a11y/index.ts
+++ b/core-libs/storefront/layout/a11y/index.ts
@@ -6,6 +6,7 @@
 
 export * from './btn-like-link';
 export * from './keyboard-focus/index';
+export * from './native-select-space';
 export * from './on-dom-change';
 export * from './skip-link/index';
 export * from './truncation-tooltip';
diff --git a/core-libs/storefront/layout/a11y/native-select-space/index.ts b/core-libs/storefront/layout/a11y/native-select-space/index.ts
new file mode 100644
index 00000000000..ca0f5e1c9df
--- /dev/null
+++ b/core-libs/storefront/layout/a11y/native-select-space/index.ts
@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: 2026 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './native-select-space.directive';
diff --git a/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.spec.ts b/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.spec.ts
new file mode 100644
index 00000000000..b9ed43652bf
--- /dev/null
+++ b/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.spec.ts
@@ -0,0 +1,114 @@
+/*
+ * SPDX-FileCopyrightText: 2026 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { FeatureToggles } from '@spartacus/core';
+import { provideMockFeatureToggles } from 'core-libs/core/src/features-config/feature-toggles/testing';
+import { NativeSelectSpaceDirective } from './native-select-space.directive';
+
+@Component({
+  template: `<select cxNativeSelectSpace>
+    <option value="a">A</option>
+  </select>`,
+  imports: [NativeSelectSpaceDirective],
+})
+class TestHostComponent {}
+
+describe('NativeSelectSpaceDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let selectEl: HTMLSelectElement;
+
+  const setup = async (toggleOn: boolean) => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+      providers: [
+        provideMockFeatureToggles({
+          a11yNavigationSpaceKeyOnKeyUp: toggleOn,
+        } as FeatureToggles),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    selectEl = fixture.debugElement.query(By.css('select')).nativeElement;
+  };
+
+  const dispatchKey = (
+    type: 'keydown' | 'keyup',
+    repeat = false
+  ): KeyboardEvent => {
+    const event = new KeyboardEvent(type, {
+      key: ' ',
+      code: 'Space',
+      cancelable: true,
+      bubbles: true,
+      repeat,
+    });
+    selectEl.dispatchEvent(event);
+    return event;
+  };
+
+  describe('toggle a11yNavigationSpaceKeyOnKeyUp ON', () => {
+    beforeEach(async () => setup(true));
+
+    it('should prevent keydown Space when event.repeat is true', () => {
+      const event = new KeyboardEvent('keydown', {
+        key: ' ',
+        code: 'Space',
+        cancelable: true,
+        bubbles: true,
+        repeat: true,
+      });
+      spyOn(event, 'preventDefault');
+      selectEl.dispatchEvent(event);
+      expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should not prevent keydown Space when event.repeat is false (first press)', () => {
+      const event = new KeyboardEvent('keydown', {
+        key: ' ',
+        code: 'Space',
+        cancelable: true,
+        bubbles: true,
+        repeat: false,
+      });
+      spyOn(event, 'preventDefault');
+      selectEl.dispatchEvent(event);
+      expect(event.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it('should call click() on the select element on keyup Space', () => {
+      spyOn(selectEl, 'click');
+      dispatchKey('keyup');
+      expect(selectEl.click).toHaveBeenCalled();
+    });
+  });
+
+  describe('toggle a11yNavigationSpaceKeyOnKeyUp OFF', () => {
+    beforeEach(async () => setup(false));
+
+    it('should not prevent keydown Space even when event.repeat is true', () => {
+      const event = new KeyboardEvent('keydown', {
+        key: ' ',
+        code: 'Space',
+        cancelable: true,
+        bubbles: true,
+        repeat: true,
+      });
+      spyOn(event, 'preventDefault');
+      selectEl.dispatchEvent(event);
+      expect(event.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it('should not call click() on keyup Space', () => {
+      spyOn(selectEl, 'click');
+      dispatchKey('keyup');
+      expect(selectEl.click).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts b/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts
new file mode 100644
index 00000000000..35dfa7f2fdc
--- /dev/null
+++ b/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts
@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: 2026 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Directive, HostListener, inject } from '@angular/core';
+import { FeatureToggles } from '@spartacus/core';
+
+/**
+ * Fixes WCAG 2.5.2 (Level A) on native `<select>` elements: holding the
+ * spacebar should not repeatedly open/close the dropdown.
+ *
+ * When `a11yNavigationSpaceKeyOnKeyUp` is enabled:
+ * - `keydown` Space is suppressed (prevents browser from opening the dropdown
+ *   on every key-repeat tick, which causes a visible blink).
+ * - `keyup` Space triggers a `click()` on the element, opening the dropdown
+ *   exactly once on key release.
+ *
+ * Affects: `SiteContextSelectorComponent`, `SiteThemeSwitcherComponent`
+ */
+@Directive({
+  selector: 'select[cxNativeSelectSpace]',
+  standalone: true,
+})
+export class NativeSelectSpaceDirective {
+  private featureToggles = inject(FeatureToggles);
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent): void {
+    if (
+      this.featureToggles?.a11yNavigationSpaceKeyOnKeyUp &&
+      (event.key === ' ' || event.code === 'Space')
+    ) {
+      if (event.repeat) {
+        event.preventDefault();
+      }
+    }
+  }
+
+  @HostListener('keyup', ['$event'])
+  onKeyUp(event: KeyboardEvent): void {
+    if (
+      this.featureToggles?.a11yNavigationSpaceKeyOnKeyUp &&
+      (event.key === ' ' || event.code === 'Space')
+    ) {
+      (event.target as HTMLSelectElement).click();
+    }
+  }
+}
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index 7504b05c3e8..1515c65ab16 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -368,6 +368,7 @@ if (environment.cpq) {
         asyncAuthConfigInitializer: false as boolean, // exception until sample data is updated
         siteIsolationForCustomLoginPage: true,
         applyBaseSiteThemeFromCms: true,
+        a11yNavigationSpaceKeyOnKeyUp: true,
         b2bCheckoutShippingAddressFilter: true,
       };
       return appFeatureToggles;

From 0a0c4afc71e154457c50f086acbcd97777b43146 Mon Sep 17 00:00:00 2001
From: Uros Lates <uroslates@gmail.com>
Date: Fri, 24 Jul 2026 20:09:39 +0200
Subject: [PATCH 2/4] chore: fix CI Sonar issue

---
 .../native-select-space/native-select-space.directive.ts   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts b/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts
index 35dfa7f2fdc..ca608be4376 100644
--- a/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts
+++ b/core-libs/storefront/layout/a11y/native-select-space/native-select-space.directive.ts
@@ -30,11 +30,10 @@ export class NativeSelectSpaceDirective {
   onKeyDown(event: KeyboardEvent): void {
     if (
       this.featureToggles?.a11yNavigationSpaceKeyOnKeyUp &&
-      (event.key === ' ' || event.code === 'Space')
+      (event.key === ' ' || event.code === 'Space') &&
+      event.repeat
     ) {
-      if (event.repeat) {
-        event.preventDefault();
-      }
+      event.preventDefault();
     }
   }
 

From 284e9c088a641d87540af0bc3c9cd6c1025e3530 Mon Sep 17 00:00:00 2001
From: u-lates_sap <u.lates@sap.com>
Date: Mon, 27 Jul 2026 17:57:25 +0200
Subject: [PATCH 3/4] fix(a11y): activate ng-select on key release for WCAG
 2.5.2 (CXSPA-12782)

- 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.
---
 .../site-context-selector.component.html      | 101 +++++++----
 .../site-context-selector.component.ts        |  38 +++-
 .../site-theme-switcher.component.html        | 117 ++++++++-----
 .../site-theme-switcher.component.spec.ts     |  82 +++++++++
 .../site-theme-switcher.component.ts          |  63 +++++--
 .../ng-select-a11y.directive.spec.ts          | 163 ++++++++++++++++++
 .../ng-select-a11y.directive.ts               |  51 +++++-
 .../layout/header/_site-context-selector.scss |  73 ++++++++
 .../_site-theme-switcher.scss                 |  73 ++++++++
 9 files changed, 662 insertions(+), 99 deletions(-)

diff --git a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html
index 03db828e718..fcfb4e23899 100644
--- a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html
+++ b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.html
@@ -1,37 +1,66 @@
-<label *ngIf="(items$ | async)?.length > 1 && (items$ | async) as items">
-  <span>{{ label$ | async | cxTranslate }}:</span>
-  <div *cxFeature="'a11ySiteContextCaretClick'" class="cx-select-wrapper">
-    <select cxNativeSelectSpace (change)="active = $any($event).target.value">
-      <option
-        [attr.aria-label]="ariaLabel$(item.label, i, items.length) | async"
-        *ngFor="let item of items; index as i"
-        value="{{ item.isocode }}"
-        [attr.selected]="(activeItem$ | async) === item.isocode ? '' : null"
-      >
-        {{ item.label }}
-      </option>
-    </select>
-    <cx-icon
-      aria-hidden="true"
-      [type]="iconTypes.CARET_DOWN"
-      class="small"
-    ></cx-icon>
-  </div>
-  <ng-container *cxFeature="'!a11ySiteContextCaretClick'">
-    <select cxNativeSelectSpace (change)="active = $any($event).target.value">
-      <option
-        [attr.aria-label]="ariaLabel$(item.label, i, items.length) | async"
-        *ngFor="let item of items; index as i"
-        value="{{ item.isocode }}"
-        [attr.selected]="(activeItem$ | async) === item.isocode ? '' : null"
-      >
-        {{ item.label }}
-      </option>
-    </select>
-    <cx-icon
-      aria-hidden="true"
-      [type]="iconTypes.CARET_DOWN"
-      class="small"
-    ></cx-icon>
+<ng-container *ngIf="items$ | async as items">
+  <ng-container *ngIf="items.length > 1">
+    <ng-container *cxFeature="'a11yNavigationSpaceKeyOnKeyUp'">
+      <div class="cx-ng-select-label">
+        <span>{{ label$ | async | cxTranslate }}:</span>
+        <ng-select
+          [searchable]="false"
+          [clearable]="false"
+          [items]="items"
+          bindValue="isocode"
+          bindLabel="label"
+          [ngModel]="selectedItem"
+          (change)="active = $event?.isocode"
+          ariaLabelDropdown="{{
+            'common.ngSelectDropdownOptionsList' | cxTranslate
+          }}"
+          [cxNgSelectA11y]="{ ariaLabel: label$ | async | cxTranslate }"
+        ></ng-select>
+      </div>
+    </ng-container>
+
+    <label *cxFeature="'!a11yNavigationSpaceKeyOnKeyUp'">
+      <span>{{ label$ | async | cxTranslate }}:</span>
+      <div *cxFeature="'a11ySiteContextCaretClick'" class="cx-select-wrapper">
+        <select
+          cxNativeSelectSpace
+          (change)="active = $any($event).target.value"
+        >
+          <option
+            [attr.aria-label]="ariaLabel$(item.label, i, items.length) | async"
+            *ngFor="let item of items; index as i"
+            value="{{ item.isocode }}"
+            [attr.selected]="(activeItem$ | async) === item.isocode ? '' : null"
+          >
+            {{ item.label }}
+          </option>
+        </select>
+        <cx-icon
+          aria-hidden="true"
+          [type]="iconTypes.CARET_DOWN"
+          class="small"
+        ></cx-icon>
+      </div>
+      <ng-container *cxFeature="'!a11ySiteContextCaretClick'">
+        <select
+          cxNativeSelectSpace
+          (change)="active = $any($event).target.value"
+        >
+          <option
+            [attr.aria-label]="ariaLabel$(item.label, i, items.length) | async"
+            *ngFor="let item of items; index as i"
+            value="{{ item.isocode }}"
+            [attr.selected]="(activeItem$ | async) === item.isocode ? '' : null"
+          >
+            {{ item.label }}
+          </option>
+        </select>
+        <cx-icon
+          aria-hidden="true"
+          [type]="iconTypes.CARET_DOWN"
+          class="small"
+        ></cx-icon>
+      </ng-container>
+    </label>
   </ng-container>
-</label>
+</ng-container>
diff --git a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts
index 61dce2ba4f2..bcb4180aeee 100644
--- a/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts
+++ b/core-libs/storefront/cms-components/misc/site-context-selector/site-context-selector.component.ts
@@ -7,10 +7,16 @@
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  DestroyRef,
   inject,
   Input,
+  OnInit,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { NgSelectComponent } from '@ng-select/ng-select';
 import {
   FeatureDirective,
   I18nModule,
@@ -20,6 +26,7 @@ import {
 } from '@spartacus/core';
 import { map, Observable } from 'rxjs';
 import { NativeSelectSpaceDirective } from '../../../layout/a11y/native-select-space/native-select-space.directive';
+import { NgSelectA11yDirective } from '../../../shared/components/ng-select-a11y/ng-select-a11y.directive';
 import { IconComponent } from '../icon/icon.component';
 import { ICON_TYPE } from '../icon/icon.model';
 import { SiteContextComponentService } from './site-context-component.service';
@@ -37,9 +44,12 @@ import { SiteContextType } from './site-context.model';
     I18nModule,
     FeatureDirective,
     NativeSelectSpaceDirective,
+    NgSelectComponent,
+    NgSelectA11yDirective,
+    FormsModule,
   ],
 })
-export class SiteContextSelectorComponent {
+export class SiteContextSelectorComponent implements OnInit {
   /**
    * @deprecated since 2011.21 removed unused property
    */
@@ -52,26 +62,36 @@ export class SiteContextSelectorComponent {
   @Input() context: SiteContextType;
 
   protected translationService = inject(TranslationService);
+  private destroyRef = inject(DestroyRef);
+  private cdr = inject(ChangeDetectorRef);
+
+  selectedItem: string | undefined;
 
   constructor(private componentService: SiteContextComponentService) {
     useFeatureStyles('a11ySiteContextCaretClick');
+    useFeatureStyles('a11yNavigationSpaceKeyOnKeyUp');
   }
 
-  get items$(): Observable<any> {
-    return this.componentService.getItems(this.context);
+  ngOnInit(): void {
+    this.items$ = this.componentService.getItems(this.context);
+    this.activeItem$ = this.componentService.getActiveItem(this.context);
+    this.label$ = this.componentService.getLabel(this.context);
+    this.activeItem$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        this.selectedItem = value;
+        this.cdr.markForCheck();
+      });
   }
 
-  get activeItem$(): Observable<string> {
-    return this.componentService.getActiveItem(this.context);
-  }
+  items$!: Observable<any>;
+  activeItem$!: Observable<string>;
 
   set active(value: string) {
     this.componentService.setActive(value, this.context);
   }
 
-  get label$(): Observable<any> {
-    return this.componentService.getLabel(this.context);
-  }
+  label$!: Observable<any>;
 
   ariaLabel$(label: string, index: number, length: number): Observable<string> {
     return this.translationService.translate('common.of').pipe(
diff --git a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
index a94e70aa969..329d4c78e62 100644
--- a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
+++ b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
@@ -1,43 +1,76 @@
-<label *ngIf="items$ | async as themes">
-  <span> {{ 'siteThemeSwitcher.theme' | cxTranslate }}:</span>
-  <div *cxFeature="'a11ySiteContextCaretClick'" class="cx-select-wrapper">
-    <select
-      cxNativeSelectSpace
-      (change)="activeItem = $any($event).target.value"
-    >
-      <option
-        [attr.aria-label]="ariaLabel$(theme, i, themes.length) | async"
-        *ngFor="let theme of themes; index as i"
-        value="{{ theme.className }}"
-        [selected]="(activeItem$ | async) === theme.className"
-      >
-        {{
-          theme.i18nNameKey
-            ? (theme.i18nNameKey | cxTranslate)
-            : theme.className
-        }}
-      </option>
-    </select>
-    <cx-icon aria-hidden="true" [type]="iconTypes.CARET_DOWN" class="small" />
-  </div>
-  <ng-container *cxFeature="'!a11ySiteContextCaretClick'">
-    <select
-      cxNativeSelectSpace
-      (change)="activeItem = $any($event).target.value"
-    >
-      <option
-        [attr.aria-label]="ariaLabel$(theme, i, themes.length) | async"
-        *ngFor="let theme of themes; index as i"
-        value="{{ theme.className }}"
-        [selected]="(activeItem$ | async) === theme.className"
-      >
-        {{
-          theme.i18nNameKey
-            ? (theme.i18nNameKey | cxTranslate)
-            : theme.className
-        }}
-      </option>
-    </select>
-    <cx-icon aria-hidden="true" [type]="iconTypes.CARET_DOWN" class="small" />
+<ng-container *ngIf="items$ | async as themes">
+  <ng-container *ngIf="themes.length">
+    <ng-container *cxFeature="'a11yNavigationSpaceKeyOnKeyUp'">
+      <div class="cx-ng-select-label">
+        <span>{{ 'siteThemeSwitcher.theme' | cxTranslate }}:</span>
+        <ng-select
+          [searchable]="false"
+          [clearable]="false"
+          [items]="translatedItems$ | async"
+          bindValue="className"
+          bindLabel="label"
+          [ngModel]="selectedItem"
+          (change)="activeItem = $event?.className"
+          ariaLabelDropdown="{{
+            'common.ngSelectDropdownOptionsList' | cxTranslate
+          }}"
+          [cxNgSelectA11y]="{
+            ariaLabel: 'siteThemeSwitcher.theme' | cxTranslate,
+          }"
+        ></ng-select>
+      </div>
+    </ng-container>
+
+    <label *cxFeature="'!a11yNavigationSpaceKeyOnKeyUp'">
+      <span> {{ 'siteThemeSwitcher.theme' | cxTranslate }}:</span>
+      <div *cxFeature="'a11ySiteContextCaretClick'" class="cx-select-wrapper">
+        <select
+          cxNativeSelectSpace
+          (change)="activeItem = $any($event).target.value"
+        >
+          <option
+            [attr.aria-label]="ariaLabel$(theme, i, themes.length) | async"
+            *ngFor="let theme of themes; index as i"
+            value="{{ theme.className }}"
+            [selected]="(activeItem$ | async) === theme.className"
+          >
+            {{
+              theme.i18nNameKey
+                ? (theme.i18nNameKey | cxTranslate)
+                : theme.className
+            }}
+          </option>
+        </select>
+        <cx-icon
+          aria-hidden="true"
+          [type]="iconTypes.CARET_DOWN"
+          class="small"
+        />
+      </div>
+      <ng-container *cxFeature="'!a11ySiteContextCaretClick'">
+        <select
+          cxNativeSelectSpace
+          (change)="activeItem = $any($event).target.value"
+        >
+          <option
+            [attr.aria-label]="ariaLabel$(theme, i, themes.length) | async"
+            *ngFor="let theme of themes; index as i"
+            value="{{ theme.className }}"
+            [selected]="(activeItem$ | async) === theme.className"
+          >
+            {{
+              theme.i18nNameKey
+                ? (theme.i18nNameKey | cxTranslate)
+                : theme.className
+            }}
+          </option>
+        </select>
+        <cx-icon
+          aria-hidden="true"
+          [type]="iconTypes.CARET_DOWN"
+          class="small"
+        />
+      </ng-container>
+    </label>
   </ng-container>
-</label>
+</ng-container>
diff --git a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.spec.ts b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.spec.ts
index 90a2470b031..ae491dce798 100644
--- a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.spec.ts
+++ b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.spec.ts
@@ -70,7 +70,11 @@ describe('ThemeSwitcherComponent', () => {
     });
 
     it('should get items from the service', (done: DoneFn) => {
+      // items$ is set in ngOnInit from the service stub — re-create with MOCK_ITEMS
       themeSwitcherComponentService.getItems.and.returnValue(of(MOCK_ITEMS));
+      fixture = TestBed.createComponent(SiteThemeSwitcherComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
 
       component.items$.subscribe((items) => {
         expect(items).toEqual(MOCK_ITEMS);
@@ -80,9 +84,13 @@ describe('ThemeSwitcherComponent', () => {
 
     it('should get active item from the service', (done: DoneFn) => {
       const activeItemMock = 'theme1';
+      // activeItem$ is set in ngOnInit — re-create with the desired stub value
       themeSwitcherComponentService.getActiveItem.and.returnValue(
         of(activeItemMock)
       );
+      fixture = TestBed.createComponent(SiteThemeSwitcherComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
 
       component.activeItem$.subscribe((activeItem) => {
         expect(activeItem).toBe(activeItemMock);
@@ -119,4 +127,78 @@ describe('ThemeSwitcherComponent', () => {
       });
     });
   });
+
+  describe('when a11yNavigationSpaceKeyOnKeyUp toggle is on', () => {
+    beforeEach(async () => {
+      await TestBed.resetTestingModule();
+      await TestBed.configureTestingModule({
+        imports: [
+          I18nTestingModule,
+          IconModule,
+          CommonModule,
+          SiteThemeSwitcherComponent,
+        ],
+        providers: [
+          {
+            provide: SiteThemeSwitcherComponentService,
+            useValue: jasmine.createSpyObj('ThemeSwitcherComponentService', [
+              'getItems',
+              'getActiveItem',
+              'setActive',
+            ]),
+          },
+          { provide: TranslationService, useClass: MockTranslationService },
+          provideMockFeatureToggles({
+            a11ySiteContextCaretClick: true,
+            a11yNavigationSpaceKeyOnKeyUp: true,
+          }),
+        ],
+      }).compileComponents();
+
+      themeSwitcherComponentService = TestBed.inject(
+        SiteThemeSwitcherComponentService
+      ) as jasmine.SpyObj<SiteThemeSwitcherComponentService>;
+      themeSwitcherComponentService.getItems.and.returnValue(of(MOCK_ITEMS));
+      themeSwitcherComponentService.getActiveItem.and.returnValue(of('theme1'));
+
+      fixture = TestBed.createComponent(SiteThemeSwitcherComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it('should render ng-select instead of native select', () => {
+      expect(fixture.debugElement.query(By.css('ng-select'))).toBeTruthy();
+      expect(fixture.debugElement.query(By.css('select'))).toBeNull();
+    });
+
+    it('should not render the native select label wrapper', () => {
+      expect(fixture.debugElement.query(By.css('label'))).toBeNull();
+    });
+
+    it('should render .cx-ng-select-label wrapper with a span', () => {
+      const wrapper = fixture.debugElement.query(By.css('.cx-ng-select-label'));
+      expect(wrapper).toBeTruthy();
+      expect(wrapper.query(By.css('span'))).toBeTruthy();
+    });
+
+    it('should sync selectedItem with the active item from the service', () => {
+      expect(component.selectedItem).toBe('theme1');
+    });
+
+    it('should call setActive on the service when selection changes', () => {
+      component.activeItem = 'theme2';
+      expect(themeSwitcherComponentService.setActive).toHaveBeenCalledWith(
+        'theme2'
+      );
+    });
+
+    it('should provide translatedItems$ with a label property for each theme', (done) => {
+      component.translatedItems$.subscribe((items) => {
+        expect(items.length).toBe(2);
+        // MockTranslationService.translate() returns 'of' for any key
+        items.forEach((item) => expect(item.label).toBe('of'));
+        done();
+      });
+    });
+  });
 });
diff --git a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts
index 31735b5ff3b..3d483211932 100644
--- a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts
+++ b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.ts
@@ -5,7 +5,17 @@
  */
 
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  inject,
+  OnInit,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { NgSelectComponent } from '@ng-select/ng-select';
 import {
   FeatureDirective,
   SiteTheme,
@@ -14,8 +24,9 @@ import {
   useFeatureStyles,
 } from '@spartacus/core';
 import { combineLatest, Observable, of } from 'rxjs';
-import { map, take } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 import { NativeSelectSpaceDirective } from '../../../layout/a11y/native-select-space/native-select-space.directive';
+import { NgSelectA11yDirective } from '../../../shared/components/ng-select-a11y/ng-select-a11y.directive';
 import { IconComponent } from '../icon/icon.component';
 import { ICON_TYPE } from '../icon/icon.model';
 import { SiteThemeSwitcherComponentService } from './site-theme-switcher.component.service';
@@ -35,26 +46,58 @@ import { SiteThemeSwitcherComponentService } from './site-theme-switcher.compone
     TranslatePipe,
     FeatureDirective,
     NativeSelectSpaceDirective,
+    NgSelectComponent,
+    NgSelectA11yDirective,
+    FormsModule,
   ],
 })
-export class SiteThemeSwitcherComponent {
+export class SiteThemeSwitcherComponent implements OnInit {
   readonly translationService = inject(TranslationService);
   iconTypes = ICON_TYPE;
 
-  constructor() {
-    useFeatureStyles('a11ySiteContextCaretClick');
-  }
+  private destroyRef = inject(DestroyRef);
+  private cdr = inject(ChangeDetectorRef);
 
   protected themeSwitcherComponentService = inject(
     SiteThemeSwitcherComponentService
   );
 
-  get items$(): Observable<Array<SiteTheme>> {
-    return this.themeSwitcherComponentService.getItems();
+  selectedItem: string | undefined;
+
+  constructor() {
+    useFeatureStyles('a11ySiteContextCaretClick');
+    useFeatureStyles('a11yNavigationSpaceKeyOnKeyUp');
   }
-  get activeItem$(): Observable<string> {
-    return this.themeSwitcherComponentService.getActiveItem();
+
+  ngOnInit(): void {
+    this.items$ = this.themeSwitcherComponentService.getItems();
+    this.activeItem$ = this.themeSwitcherComponentService.getActiveItem();
+    this.translatedItems$ = this.items$.pipe(
+      switchMap((themes) =>
+        themes.length
+          ? combineLatest(
+              themes.map((theme) =>
+                (theme.i18nNameKey
+                  ? this.translationService.translate(theme.i18nNameKey)
+                  : of(theme.className)
+                ).pipe(map((label) => ({ ...theme, label })))
+              )
+            )
+          : of([])
+      )
+    );
+    this.activeItem$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        this.selectedItem = value;
+        this.cdr.markForCheck();
+      });
   }
+
+  items$!: Observable<Array<SiteTheme>>;
+  activeItem$!: Observable<string>;
+  translatedItems$!: Observable<Array<SiteTheme & { label: string }>>;
+
   set activeItem(value: string) {
     this.themeSwitcherComponentService.setActive(value);
   }
diff --git a/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.spec.ts b/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.spec.ts
index 7ca39264356..56c754728b4 100644
--- a/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.spec.ts
+++ b/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.spec.ts
@@ -269,4 +269,167 @@ describe('NgSelectA11yDirective', () => {
       await Promise.resolve();
     });
   });
+
+  describe('a11yNavigationSpaceKeyOnKeyUp toggle', () => {
+    let directiveWithToggle: NgSelectA11yDirective;
+
+    beforeEach(() => {
+      // Re-configure with a11yNavigationSpaceKeyOnKeyUp enabled
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [
+          NgSelectA11yModule,
+          NgSelectModule,
+          MockComponent,
+          NgSelectA11yDirective,
+        ],
+        providers: [
+          provideMockFeatureToggles({
+            ...mockFeatureToggles,
+            a11yNavigationSpaceKeyOnKeyUp: true,
+          }),
+          { provide: TranslationService, useClass: MockTranslationService },
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(MockComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+      const directiveEl = fixture.debugElement.query(
+        By.directive(NgSelectA11yDirective)
+      );
+      directiveWithToggle = directiveEl.injector.get(NgSelectA11yDirective);
+    });
+
+    describe('interceptEnterKeyDown()', () => {
+      it('should wrap NgSelectComponent.handleKeyDown so Enter keydown when open sets wasOpenOnEnterKeydown and calls preventDefault', () => {
+        // Open the dropdown so isOpen() returns true
+        directiveWithToggle['selectComponent'].open();
+        fixture.detectChanges();
+
+        const enterEvent = new KeyboardEvent('keydown', {
+          key: 'Enter',
+          bubbles: true,
+          cancelable: true,
+        });
+        spyOn(enterEvent, 'preventDefault');
+
+        // Call the wrapped handleKeyDown directly (bypasses HostListener order)
+        directiveWithToggle['selectComponent'].handleKeyDown(enterEvent);
+
+        expect(enterEvent.preventDefault).toHaveBeenCalled();
+        expect(directiveWithToggle['wasOpenOnEnterKeydown']).toBeTrue();
+      });
+
+      it('should NOT intercept Enter keydown when dropdown is closed — delegates to original handler', () => {
+        // Dropdown is closed by default
+        const enterEvent = new KeyboardEvent('keydown', {
+          key: 'Enter',
+          bubbles: true,
+          cancelable: true,
+        });
+        spyOn(enterEvent, 'preventDefault');
+
+        directiveWithToggle['selectComponent'].handleKeyDown(enterEvent);
+
+        // Our intercept does not block it — preventDefault not called by us
+        expect(directiveWithToggle['wasOpenOnEnterKeydown']).toBeFalse();
+      });
+
+      it('should NOT intercept non-Enter keys when dropdown is open', () => {
+        directiveWithToggle['selectComponent'].open();
+        fixture.detectChanges();
+
+        const arrowEvent = new KeyboardEvent('keydown', {
+          key: 'ArrowDown',
+          bubbles: true,
+          cancelable: true,
+        });
+        spyOn(arrowEvent, 'preventDefault');
+
+        directiveWithToggle['selectComponent'].handleKeyDown(arrowEvent);
+
+        expect(directiveWithToggle['wasOpenOnEnterKeydown']).toBeFalse();
+      });
+    });
+
+    describe('onKeyUp() — Enter selection on key release (WCAG 2.5.2)', () => {
+      it('should call toggleItem on keyup-Enter when wasOpenOnEnterKeydown is set, then reset the flag', () => {
+        // Simulate that Enter was pressed while dropdown was open
+        directiveWithToggle['wasOpenOnEnterKeydown'] = true;
+        spyOn(
+          directiveWithToggle['selectComponent'],
+          'toggleItem'
+        ).and.callThrough();
+
+        const keyupEvent = new KeyboardEvent('keyup', {
+          key: 'Enter',
+          bubbles: true,
+        });
+        getNgSelect().nativeElement.dispatchEvent(keyupEvent);
+
+        expect(
+          directiveWithToggle['selectComponent'].toggleItem
+        ).toHaveBeenCalled();
+        // Flag is reset so repeated keyup does not re-fire
+        expect(directiveWithToggle['wasOpenOnEnterKeydown']).toBeFalse();
+      });
+
+      it('should NOT call toggleItem on keyup-Enter when wasOpenOnEnterKeydown is false', () => {
+        directiveWithToggle['wasOpenOnEnterKeydown'] = false;
+        spyOn(
+          directiveWithToggle['selectComponent'],
+          'toggleItem'
+        ).and.callThrough();
+
+        const keyupEvent = new KeyboardEvent('keyup', {
+          key: 'Enter',
+          bubbles: true,
+        });
+        getNgSelect().nativeElement.dispatchEvent(keyupEvent);
+
+        expect(
+          directiveWithToggle['selectComponent'].toggleItem
+        ).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('onKeyDown() — Space scroll prevention', () => {
+      it('should call preventDefault on Space keydown when dropdown is open to prevent page scroll', () => {
+        directiveWithToggle['selectComponent'].open();
+        fixture.detectChanges();
+
+        const spaceEvent = new KeyboardEvent('keydown', {
+          key: ' ',
+          code: 'Space',
+          bubbles: true,
+          cancelable: true,
+        });
+        spyOn(spaceEvent, 'preventDefault');
+
+        getNgSelect().nativeElement.dispatchEvent(spaceEvent);
+
+        expect(spaceEvent.preventDefault).toHaveBeenCalled();
+      });
+
+      it('should NOT prevent page scroll (no extra preventDefault) on Space keydown when dropdown is closed — ng-select opens normally', () => {
+        // When the dropdown is closed, Space should open it (ng-select default behaviour).
+        // Our directive only calls preventDefault when the dropdown is already open.
+        // Verify the dropdown opens normally rather than asserting on preventDefault,
+        // because ng-select itself calls preventDefault as part of its open logic.
+        const spaceEvent = new KeyboardEvent('keydown', {
+          key: ' ',
+          code: 'Space',
+          bubbles: true,
+          cancelable: true,
+        });
+
+        getNgSelect().nativeElement.dispatchEvent(spaceEvent);
+        fixture.detectChanges();
+
+        // ng-select should have opened — our code did not block it
+        expect(directiveWithToggle['selectComponent'].isOpen()).toBeTrue();
+      });
+    });
+  });
 });
diff --git a/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts b/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
index 895de0df36a..bf120752ac1 100644
--- a/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
+++ b/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
@@ -54,6 +54,8 @@ export class NgSelectA11yDirective implements AfterViewInit {
   protected selectObserver: MutationObserver | null = null;
   protected breakpointService = inject(BreakpointService, { optional: true });
 
+  private wasOpenOnEnterKeydown = false;
+
   /**
    * When we inside a combo box using JAWS screen reader and press escape key
    * an escape keyboard event doesn't get fired, instead an AltLeft is fired.
@@ -63,6 +65,17 @@ export class NgSelectA11yDirective implements AfterViewInit {
     const jawsEscapeCode = 'AltLeft';
     if (event.code === jawsEscapeCode) {
       this.selectComponent.close();
+      return;
+    }
+    if (
+      this.featureToggles.a11yNavigationSpaceKeyOnKeyUp &&
+      event.key === 'Enter' &&
+      this.wasOpenOnEnterKeydown
+    ) {
+      this.wasOpenOnEnterKeydown = false;
+      this.selectComponent.toggleItem(
+        this.selectComponent.itemsList.markedItem
+      );
     }
   }
 
@@ -82,8 +95,16 @@ export class NgSelectA11yDirective implements AfterViewInit {
    * reached `VisibleFocusDirective`, then clear the class on the closest
    * ancestor that has it.
    */
-  @HostListener('keydown')
-  onKeyDown() {
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    if (this.featureToggles.a11yNavigationSpaceKeyOnKeyUp) {
+      if (
+        (event.key === ' ' || event.code === 'Space') &&
+        this.selectComponent.isOpen()
+      ) {
+        event.preventDefault();
+      }
+    }
     if (!this.featureToggles.a11yRestoreFocusOnNgSelect) {
       return;
     }
@@ -183,6 +204,32 @@ export class NgSelectA11yDirective implements AfterViewInit {
           });
       }
     }
+
+    if (this.featureToggles.a11yNavigationSpaceKeyOnKeyUp) {
+      this.interceptEnterKeyDown();
+    }
+  }
+
+  /**
+   * Wraps `NgSelectComponent.handleKeyDown` to skip the built-in Enter handler
+   * when the dropdown is open, so selection is deferred to keyup (WCAG 2.5.2).
+   * `event.preventDefault()` alone cannot block another HostListener on the
+   * same element, hence the method wrap.
+   */
+  protected interceptEnterKeyDown(): void {
+    const selectComponent = this.selectComponent;
+    const original = selectComponent.handleKeyDown.bind(selectComponent);
+    selectComponent.handleKeyDown = ($event: KeyboardEvent) => {
+      if ($event.key === 'Enter' && selectComponent.isOpen()) {
+        this.wasOpenOnEnterKeydown = true;
+        $event.preventDefault();
+        return;
+      }
+      original($event);
+    };
+    this.destroyRef.onDestroy(() => {
+      selectComponent.handleKeyDown = original;
+    });
   }
 
   vocalizeItemCount() {
diff --git a/core-libs/styles/scss/components/layout/header/_site-context-selector.scss b/core-libs/styles/scss/components/layout/header/_site-context-selector.scss
index 83b6e36568c..b672c6dae73 100644
--- a/core-libs/styles/scss/components/layout/header/_site-context-selector.scss
+++ b/core-libs/styles/scss/components/layout/header/_site-context-selector.scss
@@ -83,6 +83,79 @@ $caretSize: 7px;
     }
   }
 
+  @include forFeature('a11yNavigationSpaceKeyOnKeyUp') {
+    .cx-ng-select-label {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      span {
+        color: var(--cx-color-text);
+        margin-inline-end: 5px;
+      }
+    }
+
+    ng-select.ng-select {
+      display: inline-block;
+
+      &.ng-select-single,
+      & {
+        .ng-select-container {
+          min-height: unset !important;
+          height: auto !important;
+          border: none !important;
+          background-color: unset !important;
+          cursor: pointer;
+          box-shadow: none !important;
+          padding: 0 !important;
+          line-height: inherit !important;
+
+          @include media-breakpoint-up(lg) {
+            background-color: var(--cx-color-light);
+          }
+
+          .ng-value-container {
+            padding: 0 4px;
+            align-items: center;
+
+            .ng-value {
+              color: var(--cx-color-text);
+              font-weight: var(--cx-font-weight-semi);
+              font-size: inherit;
+            }
+
+            .ng-input {
+              position: absolute;
+              top: 0;
+            }
+          }
+
+          .ng-arrow-wrapper {
+            display: none;
+          }
+        }
+      }
+
+      .ng-dropdown-panel {
+        width: auto;
+        min-width: 100%;
+        background-color: var(--cx-color-background, #fff);
+        z-index: 30;
+      }
+    }
+
+    @include cx-highContrastTheme {
+      ng-select.ng-select .ng-value {
+        color: var(--cx-color-text);
+      }
+    }
+
+    @include cx-highContrastTheme-light {
+      ng-select.ng-select .ng-value {
+        color: var(--cx-color-dark);
+      }
+    }
+  }
+
   @include cx-highContrastTheme {
     select {
       color: var(--cx-color-text);
diff --git a/core-libs/styles/scss/components/misc/site-theme-switcher/_site-theme-switcher.scss b/core-libs/styles/scss/components/misc/site-theme-switcher/_site-theme-switcher.scss
index a39953c1166..c8706db5810 100644
--- a/core-libs/styles/scss/components/misc/site-theme-switcher/_site-theme-switcher.scss
+++ b/core-libs/styles/scss/components/misc/site-theme-switcher/_site-theme-switcher.scss
@@ -83,6 +83,79 @@ $caretSize: 7px;
     }
   }
 
+  @include forFeature('a11yNavigationSpaceKeyOnKeyUp') {
+    .cx-ng-select-label {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      span {
+        color: var(--cx-color-text);
+        margin-inline-end: 5px;
+      }
+    }
+
+    ng-select.ng-select {
+      display: inline-block;
+
+      &.ng-select-single,
+      & {
+        .ng-select-container {
+          min-height: unset !important;
+          height: auto !important;
+          border: none !important;
+          background-color: unset !important;
+          cursor: pointer;
+          box-shadow: none !important;
+          padding: 0 !important;
+          line-height: inherit !important;
+
+          @include media-breakpoint-up(lg) {
+            background-color: var(--cx-color-light);
+          }
+
+          .ng-value-container {
+            padding: 0 4px;
+            align-items: center;
+
+            .ng-value {
+              color: var(--cx-color-text);
+              font-weight: var(--cx-font-weight-semi);
+              font-size: inherit;
+            }
+
+            .ng-input {
+              position: absolute;
+              top: 0;
+            }
+          }
+
+          .ng-arrow-wrapper {
+            display: none;
+          }
+        }
+      }
+
+      .ng-dropdown-panel {
+        width: auto;
+        min-width: 100%;
+        background-color: var(--cx-color-background, #fff);
+        z-index: 30;
+      }
+    }
+
+    @include cx-highContrastTheme {
+      ng-select.ng-select .ng-value {
+        color: var(--cx-color-text);
+      }
+    }
+
+    @include cx-highContrastTheme-light {
+      ng-select.ng-select .ng-value {
+        color: var(--cx-color-dark);
+      }
+    }
+  }
+
   @include cx-highContrastTheme {
     select {
       color: var(--cx-color-text);

From 624b872a546309313394362bacf2221dd4830c8b Mon Sep 17 00:00:00 2001
From: u-lates_sap <u.lates@sap.com>
Date: Tue, 28 Jul 2026 11:12:17 +0200
Subject: [PATCH 4/4] chore: fix CI issues (Sonar &  build)

---
 .../site-theme-switcher.component.html              |  2 +-
 .../ng-select-a11y/ng-select-a11y.directive.ts      | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
index 329d4c78e62..4cae1c2e4da 100644
--- a/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
+++ b/core-libs/storefront/cms-components/misc/site-theme-switcher/site-theme-switcher.component.html
@@ -6,7 +6,7 @@
         <ng-select
           [searchable]="false"
           [clearable]="false"
-          [items]="translatedItems$ | async"
+          [items]="(translatedItems$ | async) ?? []"
           bindValue="className"
           bindLabel="label"
           [ngModel]="selectedItem"
diff --git a/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts b/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
index bf120752ac1..0736cc19b10 100644
--- a/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
+++ b/core-libs/storefront/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
@@ -97,13 +97,12 @@ export class NgSelectA11yDirective implements AfterViewInit {
    */
   @HostListener('keydown', ['$event'])
   onKeyDown(event: KeyboardEvent) {
-    if (this.featureToggles.a11yNavigationSpaceKeyOnKeyUp) {
-      if (
-        (event.key === ' ' || event.code === 'Space') &&
-        this.selectComponent.isOpen()
-      ) {
-        event.preventDefault();
-      }
+    if (
+      this.featureToggles.a11yNavigationSpaceKeyOnKeyUp &&
+      (event.key === ' ' || event.code === 'Space') &&
+      this.selectComponent.isOpen()
+    ) {
+      event.preventDefault();
     }
     if (!this.featureToggles.a11yRestoreFocusOnNgSelect) {
       return;