From cffabc3a8d9eed04a4d3604496f74d4c2d9a7077 Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Thu, 10 Oct 2024 11:27:20 +0200 Subject: [PATCH 1/2] 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 | 6 +++++- .../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, 22 insertions(+), 1 deletion(-) 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 8f5c9073fea..b195c47204e 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('a11yViewHoursButtonIconContrast'); + } + ngOnInit(): void { this.isInStock = storeHasStock(this.storeDetails); } 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 f62e15dc4be..05151da577b 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 b801e210391..ee65b1e29af 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 { */ a11yItemCounterFocus?: 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 = { a11yAddToWishlistFocus: false, a11ySearchBoxFocusOnEscape: false, a11yItemCounterFocus: 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 3450ac8113d..ff663953600 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) { a11yAddToWishlistFocus: true, a11ySearchBoxFocusOnEscape: true, a11yItemCounterFocus: true, + a11yViewHoursButtonIconContrast: true, cmsBottomHeaderSlotUsingFlexStyles: true, useSiteThemeService: false, enableConsecutiveCharactersPasswordRequirement: true, From ffcc4c785e99206c0c326cb0de127b7cac800a78 Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Thu, 10 Oct 2024 22:59:24 +0200 Subject: [PATCH 2/2] 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 ee65b1e29af..decfc411f23 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;