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 02b27d7e45d..6e5c591caa7 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 @@ -358,6 +358,11 @@ export interface FeatureTogglesInterface { */ a11yFacetsDialogFocusHandling?: boolean; + /** + * Stops the icon inside 'FormErrorsComponent' from being read out by screen readers. + */ + a11yFormErrorMuteIcon?: boolean; + /** * `MessageComponent` gets focused after a message with an action is rendered. */ @@ -445,6 +450,7 @@ export const defaultFeatureToggles: Required = { a11yUseButtonsForBtnLinks: false, a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: false, a11yFacetsDialogFocusHandling: false, + a11yFormErrorMuteIcon: false, a11yCxMessageFocus: false, a11yLinkBtnsToTertiaryBtns: false, a11yStoreFinderSearchboxBloat: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index eaf0e683bf5..42a552d85ee 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -326,6 +326,7 @@ if (environment.estimatedDeliveryDate) { a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: true, a11yFacetsDialogFocusHandling: true, + a11yFormErrorMuteIcon: true, a11yCxMessageFocus: true, occCartNameAndDescriptionInHttpRequestBody: true, a11yLinkBtnsToTertiaryBtns: true, diff --git a/projects/storefrontlib/shared/components/form/form-errors/form-errors.component.ts b/projects/storefrontlib/shared/components/form/form-errors/form-errors.component.ts index 188a6d14aeb..1644e33582b 100644 --- a/projects/storefrontlib/shared/components/form/form-errors/form-errors.component.ts +++ b/projects/storefrontlib/shared/components/form/form-errors/form-errors.component.ts @@ -16,7 +16,11 @@ import { inject, } from '@angular/core'; import { AbstractControl, UntypedFormControl } from '@angular/forms'; -import { FeatureConfigService, isObject } from '@spartacus/core'; +import { + FeatureConfigService, + isObject, + useFeatureStyles, +} from '@spartacus/core'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; @@ -40,7 +44,9 @@ export class FormErrorsComponent implements DoCheck { constructor( protected ChangeDetectionRef: ChangeDetectorRef, protected keyValueDiffers: KeyValueDiffers - ) {} + ) { + useFeatureStyles('a11yFormErrorMuteIcon'); + } _control: UntypedFormControl | AbstractControl; diff --git a/projects/storefrontstyles/scss/cxbase/blocks/forms.scss b/projects/storefrontstyles/scss/cxbase/blocks/forms.scss index 6c80a6e65d6..8c1e2331ef4 100644 --- a/projects/storefrontstyles/scss/cxbase/blocks/forms.scss +++ b/projects/storefrontstyles/scss/cxbase/blocks/forms.scss @@ -68,6 +68,10 @@ cx-form-errors { &::after { content: '!'; + // TODO: (CXSPA-7588) - Remove feature flag next major release + @include forFeature('a11yFormErrorMuteIcon') { + content: '!' / ''; + } color: var(--cx-color-inverse); font-weight: var(--cx-font-weight-bold); text-align: center;