fix: (CXSPA-1129) - Mute form error icon (#18967)

Co-authored-by: Miguel Estrada <[email protected]>
SAP · Jul 11, 2024 · 8134ee3 · 8134ee3
1 parent 6645861
commit 8134ee3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
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
@@ -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<FeatureTogglesInterface> = {
  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
@@ -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
@@ -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
@@ -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;