diff --git a/feature-libs/cart/wish-list/components/wish-list/wish-list.component.ts b/feature-libs/cart/wish-list/components/wish-list/wish-list.component.ts index 7908b0b7bef..62b51da4a90 100644 --- a/feature-libs/cart/wish-list/components/wish-list/wish-list.component.ts +++ b/feature-libs/cart/wish-list/components/wish-list/wish-list.component.ts @@ -7,6 +7,7 @@ import { Component } from '@angular/core'; import { Cart, OrderEntry } from '@spartacus/cart/base/root'; import { WishListFacade } from '@spartacus/cart/wish-list/root'; +import { useFeatureStyles } from '@spartacus/core'; import { Observable } from 'rxjs'; @Component({ @@ -17,7 +18,9 @@ export class WishListComponent { wishList$: Observable = this.wishListFacade.getWishList(); loading$: Observable = this.wishListFacade.getWishListLoading(); - constructor(protected wishListFacade: WishListFacade) {} + constructor(protected wishListFacade: WishListFacade) { + useFeatureStyles('a11yVisibleFocusOverflows'); + } removeEntry(item: OrderEntry) { this.wishListFacade.removeEntry(item); diff --git a/feature-libs/cart/wish-list/styles/_wish-list.scss b/feature-libs/cart/wish-list/styles/_wish-list.scss index 3114b8fdfce..217aefd6b61 100644 --- a/feature-libs/cart/wish-list/styles/_wish-list.scss +++ b/feature-libs/cart/wish-list/styles/_wish-list.scss @@ -19,6 +19,12 @@ } } } + + @include forFeature('a11yVisibleFocusOverflows') { + .cx-remove-btn { + margin-top: 0.5rem; + } + } } .cx-empty-wish-list { diff --git a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts index fd6821a2cf4..658d781ab8a 100644 --- a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts +++ b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts @@ -5,6 +5,7 @@ */ import { Component, Input, OnDestroy, OnInit, Optional } from '@angular/core'; +import { useFeatureStyles } from '@spartacus/core'; import { PointOfServiceNames, @@ -28,7 +29,9 @@ export class SetPreferredStoreComponent implements OnInit, OnDestroy { constructor( protected preferredStoreFacade: PreferredStoreFacade, @Optional() protected outlet: OutletContextData - ) {} + ) { + useFeatureStyles('a11yVisibleFocusOverflows'); + } ngOnInit() { this.subscription.add( diff --git a/feature-libs/pickup-in-store/components/presentational/store/store.component.ts b/feature-libs/pickup-in-store/components/presentational/store/store.component.ts index 8f5c9073fea..337d2acd768 100644 --- a/feature-libs/pickup-in-store/components/presentational/store/store.component.ts +++ b/feature-libs/pickup-in-store/components/presentational/store/store.component.ts @@ -5,7 +5,7 @@ */ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { PointOfServiceStock } from '@spartacus/core'; +import { PointOfServiceStock, useFeatureStyles } from '@spartacus/core'; import { storeHasStock } from '@spartacus/pickup-in-store/core'; import { ICON_TYPE } from '@spartacus/storefront'; @@ -29,6 +29,10 @@ export class StoreComponent implements OnInit { openHoursOpen = false; readonly ICON_TYPE = ICON_TYPE; + constructor() { + useFeatureStyles('a11yVisibleFocusOverflows'); + } + ngOnInit(): void { this.isInStock = storeHasStock(this.storeDetails); } diff --git a/feature-libs/pickup-in-store/styles/_set-preferred-store.scss b/feature-libs/pickup-in-store/styles/_set-preferred-store.scss index 45f36136d57..a016eccd775 100644 --- a/feature-libs/pickup-in-store/styles/_set-preferred-store.scss +++ b/feature-libs/pickup-in-store/styles/_set-preferred-store.scss @@ -16,6 +16,11 @@ text-decoration: underline; border: none; background: none; + + @include forFeature('a11yVisibleFocusOverflows') { + padding-inline-start: 0; + margin-inline-start: 0.5rem; + } } } } diff --git a/feature-libs/pickup-in-store/styles/_store.scss b/feature-libs/pickup-in-store/styles/_store.scss index f62e15dc4be..a1dccd4a573 100644 --- a/feature-libs/pickup-in-store/styles/_store.scss +++ b/feature-libs/pickup-in-store/styles/_store.scss @@ -38,6 +38,11 @@ padding-top: 0.5rem; border: none; background: none; + + @include forFeature('a11yVisibleFocusOverflows') { + padding-top: 0; + margin-top: 0.5rem; + } } .cx-stock-level { 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 0e440786b05..39093d4098d 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 @@ -366,7 +366,8 @@ export interface FeatureTogglesInterface { /** * Stops the focus indicator from overflowing and being obstructed by other elements. * Modifies the 'visible-focus' mixin. Includes style changes for: - * 'StarRatingComponent', AddToWishListComponent, StarRatingComponent, 'SkipLinkComponent' + * `StarRatingComponent`, `AddToWishListComponent`, `StarRatingComponent`, `SkipLinkComponent`, + * `StoreComponent`, `SetPreferredStoreComponent`, `WishListComponent` */ a11yVisibleFocusOverflows?: boolean;