From edff1cea8fa0097982d84396440af38727a38f7f Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Thu, 10 Oct 2024 11:27:20 +0200 Subject: [PATCH 1/3] fix: (CXSPA-7992) Store, MyPreferredStoreComponent 'view hours button' icon contrast * fixed an opacity of button's icon to meet a colour contrast requirement. * closes https://jira.tools.sap/browse/CXSPA-7992 --- .../my-preferred-store/my-preferred-store.component.ts | 3 +++ .../components/presentational/store/store.component.ts | 1 + .../pickup-in-store/styles/_my-preferred-store.scss | 3 +++ feature-libs/pickup-in-store/styles/_store.scss | 3 +++ .../feature-toggles/config/feature-toggles.ts | 7 +++++++ .../src/app/spartacus/spartacus-features.module.ts | 1 + 6 files changed, 18 insertions(+) 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 39093d4098d..bd8e4f12b59 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 + * stores 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, From 43cb1ce1003293e32bb874bb84ba23832eb81c56 Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Thu, 10 Oct 2024 22:59:24 +0200 Subject: [PATCH 2/3] fix: (CXSPA-7992) Store, MyPreferredStoreComponent 'view hours button' icon contrast * fixed an opacity of button's icon to meet a colour contrast requirement. * closes https://jira.tools.sap/browse/CXSPA-7992 --- .../features-config/feature-toggles/config/feature-toggles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 bd8e4f12b59..8ef9d450401 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 @@ -584,7 +584,7 @@ export interface FeatureTogglesInterface { /** * `StoreComponent and MyPreferredStoreComponent` an icon in a button that triggers showing - * stores opening hours has an acceptable contrast ratio in a default theme + * store's opening hours has an acceptable contrast ratio in a default theme */ a11yViewHoursButtonIconContrast?: boolean; From f26b49b95f85eb7c32d3ef3bf411fe982c2755ba Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Tue, 15 Oct 2024 12:57:19 +0200 Subject: [PATCH 3/3] Trigger Build