diff --git a/feature-libs/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts b/feature-libs/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts index 3d351d30134..1d87ea9e0a9 100644 --- a/feature-libs/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts +++ b/feature-libs/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts @@ -10,6 +10,7 @@ import { Page, PointOfService, RoutingService, + useFeatureStyles, } from '@spartacus/core'; import { PickupLocationsSearchFacade, @@ -66,6 +67,8 @@ export class MyPreferredStoreComponent implements OnInit { this.pointOfService = store; }) ); + + useFeatureStyles('a11yViewHoursButtonIconContrast'); } ngOnInit(): void { 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 337d2acd768..3e304cc3bab 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 @@ -31,6 +31,7 @@ export class StoreComponent implements OnInit { constructor() { useFeatureStyles('a11yVisibleFocusOverflows'); + useFeatureStyles('a11yViewHoursButtonIconContrast'); } ngOnInit(): void { diff --git a/feature-libs/pickup-in-store/styles/_my-preferred-store.scss b/feature-libs/pickup-in-store/styles/_my-preferred-store.scss index fddea5c347d..18e6c92245d 100644 --- a/feature-libs/pickup-in-store/styles/_my-preferred-store.scss +++ b/feature-libs/pickup-in-store/styles/_my-preferred-store.scss @@ -10,6 +10,9 @@ .cx-store-opening-hours-icon { color: var(--cx-color-secondary); opacity: var(--cx-opacity, 0.5); + @include forFeature('a11yViewHoursButtonIconContrast') { + opacity: var(--cx-opacity, 1); + } } padding-inline-start: 0; padding-top: 0.5rem; diff --git a/feature-libs/pickup-in-store/styles/_store.scss b/feature-libs/pickup-in-store/styles/_store.scss index a1dccd4a573..748d57522b8 100644 --- a/feature-libs/pickup-in-store/styles/_store.scss +++ b/feature-libs/pickup-in-store/styles/_store.scss @@ -33,6 +33,9 @@ .cx-store-opening-hours-icon { color: var(--cx-color-secondary); opacity: var(--cx-opacity, 0.5); + @include forFeature('a11yViewHoursButtonIconContrast') { + opacity: var(--cx-opacity, 1); + } } padding-inline-start: 0; padding-top: 0.5rem; 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 bee1088f562..5c0757de1ff 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 @@ -582,6 +582,12 @@ export interface FeatureTogglesInterface { */ a11ySearchBoxFocusOnEscape?: boolean; + /** + * `StoreComponent and MyPreferredStoreComponent` an icon in a button that triggers showing + * store's opening hours has an acceptable contrast ratio in a default theme + */ + a11yViewHoursButtonIconContrast?: boolean; + /** * In OCC cart requests, it puts parameters of a cart name and cart description * into a request body, instead of query params. @@ -725,6 +731,7 @@ export const defaultFeatureToggles: Required = { a11yDialogTriggerRefocus: false, a11yAddToWishlistFocus: false, a11ySearchBoxFocusOnEscape: false, + a11yViewHoursButtonIconContrast: false, occCartNameAndDescriptionInHttpRequestBody: false, cmsBottomHeaderSlotUsingFlexStyles: false, useSiteThemeService: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 49b896e9cdc..d05893f4f9d 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -376,6 +376,7 @@ if (environment.cpq) { a11yDialogTriggerRefocus: true, a11yAddToWishlistFocus: true, a11ySearchBoxFocusOnEscape: true, + a11yViewHoursButtonIconContrast: true, cmsBottomHeaderSlotUsingFlexStyles: true, useSiteThemeService: false, enableConsecutiveCharactersPasswordRequirement: true,