diff --git a/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.ts b/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.ts index 8916fc1a982..485e895d860 100644 --- a/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.ts +++ b/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.ts @@ -157,6 +157,15 @@ export class QuickOrderFormComponent implements OnInit, OnDestroy { // Focus on first index moving to last if (results.length) { + if ( + this.featureConfigService.isEnabled( + 'a11ySearchableDropdownFirstElementFocus' + ) + ) { + this.winRef.document + .querySelector('main') + ?.classList.remove('mouse-focus'); + } if (focusedIndex >= results.length - 1) { results[0].focus(); } else { diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts index b6d8bfd742e..519b3d3586a 100644 --- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts +++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts @@ -794,6 +794,12 @@ export interface FeatureTogglesInterface { */ a11yAddPaddingToCarouselPanel?: boolean; + /** + * Search dropdowns will display the focus ring correctly when navigating to the options using the down arrow key. + * Affects: SearchBoxComponent, QuickOrderFormComponent + */ + a11ySearchableDropdownFirstElementFocus?: boolean; + /** * Hides the 'Consent Management' button from the tab order when the cookies banner is visible. * Ensures the button is re-enabled and part of the tab order once consent is given and the banner disappears. @@ -1063,6 +1069,7 @@ export const defaultFeatureToggles: Required = { a11yQuickOrderSearchBoxRefocusOnClose: false, a11yKeyboardFocusInSearchBox: false, a11yAddPaddingToCarouselPanel: false, + a11ySearchableDropdownFirstElementFocus: false, a11yHideConsentButtonWhenBannerVisible: false, occCartNameAndDescriptionInHttpRequestBody: false, cmsBottomHeaderSlotUsingFlexStyles: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 60f0a9e7dc0..7910d368e90 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -416,6 +416,7 @@ if (environment.cpq) { a11yQuickOrderSearchBoxRefocusOnClose: true, a11yKeyboardFocusInSearchBox: true, a11yAddPaddingToCarouselPanel: true, + a11ySearchableDropdownFirstElementFocus: true, a11yHideConsentButtonWhenBannerVisible: true, cmsBottomHeaderSlotUsingFlexStyles: true, useSiteThemeService: true, diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts index fad9059411e..5afcf32a15d 100644 --- a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts +++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts @@ -481,6 +481,15 @@ export class SearchBoxComponent implements OnInit, OnDestroy { ]; // Focus on first index moving to last if (results.length) { + if ( + this.featureConfigService?.isEnabled( + 'a11ySearchableDropdownFirstElementFocus' + ) + ) { + this.winRef.document + .querySelector('header') + ?.classList.remove('mouse-focus'); + } if (focusedIndex >= results.length - 1) { results[0].focus(); } else {