fix: (CXSPA-7939) - Modal title headings (#19127)

SAP · Sep 2, 2024 · e465b0e · e465b0e
1 parent 47ce082
commit e465b0e
Show file tree

Hide file tree

Showing 39 changed files with 348 additions and 81 deletions.
diff --git a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html
@@ -149,7 +149,22 @@
     <!-- Modal Header -->
     <ng-container *ngIf="loaded$ | async; else loading">
       <div class="cx-dialog-header modal-header">
-        <div id="dialogTitle" class="cx-dialog-title modal-title">
+        <h3
+          *cxFeature="'a11yDialogsHeading'"
+          id="dialogTitle"
+          class="cx-dialog-title modal-title"
+        >
+          {{
+            (addedEntryWasMerged$ | async)
+              ? ('addToCart.itemsIncrementedInYourCart' | cxTranslate)
+              : ('addToCart.itemsAddedToYourCart' | cxTranslate)
+          }}
+        </h3>
+        <div
+          *cxFeature="'!a11yDialogsHeading'"
+          id="dialogTitle"
+          class="cx-dialog-title modal-title"
+        >
           {{
             (addedEntryWasMerged$ | async)
               ? ('addToCart.itemsIncrementedInYourCart' | cxTranslate)
@@ -262,7 +277,16 @@
 
     <ng-template #loading>
       <div class="cx-dialog-header modal-header">
-        <div class="cx-dialog-title modal-title">
+        <h2
+          *cxFeature="'a11yDialogsHeading'"
+          class="cx-dialog-title modal-title"
+        >
+          {{ 'addToCart.updatingCart' | cxTranslate }}
+        </h2>
+        <div
+          *cxFeature="'!a11yDialogsHeading'"
+          class="cx-dialog-title modal-title"
+        >
           {{ 'addToCart.updatingCart' | cxTranslate }}
         </div>
         <button

diff --git a/...ure-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.spec.ts b/...ure-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.spec.ts
@@ -34,10 +34,10 @@ import {
   SpinnerModule,
 } from '@spartacus/storefront';
 import { cold } from 'jasmine-marbles';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, EMPTY, Observable, of } from 'rxjs';
 import { skip, take } from 'rxjs/operators';
 import { AddedToCartDialogComponent } from './added-to-cart-dialog.component';
-import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 
 class MockActiveCartService implements Partial<ActiveCartFacade> {
   updateEntry(_entryNumber: number, _quantity: number): void {}

diff --git a/...e-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html b/...e-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html
@@ -13,7 +13,18 @@
       ></div>
       <!-- Modal Header -->
       <div class="modal-header cx-clear-cart-header">
-        <div id="dialogTitle" class="cx-clear-cart-title modal-title">
+        <h3
+          *cxFeature="'a11yDialogsHeading'"
+          id="dialogTitle"
+          class="cx-clear-cart-title modal-title"
+        >
+          {{ 'clearCart.clearCart' | cxTranslate }}
+        </h3>
+        <div
+          *cxFeature="'!a11yDialogsHeading'"
+          id="dialogTitle"
+          class="cx-clear-cart-title modal-title"
+        >
           {{ 'clearCart.clearCart' | cxTranslate }}
         </div>
 
@@ -59,7 +70,16 @@
 
 <ng-template #loading>
   <div class="modal-header cx-clear-cart-header">
-    <div class="cx-clear-cart-title modal-title">
+    <h2
+      *cxFeature="'a11yDialogsHeading'"
+      class="cx-clear-cart-title modal-title"
+    >
+      {{ 'clearCart.clearingCart' | cxTranslate }}
+    </h2>
+    <div
+      *cxFeature="'!a11yDialogsHeading'"
+      class="cx-clear-cart-title modal-title"
+    >
       {{ 'clearCart.clearingCart' | cxTranslate }}
     </div>
   </div>

diff --git a/...ibs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.spec.ts b/...ibs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.spec.ts
@@ -1,13 +1,14 @@
-import { ClearCartDialogComponentService } from './clear-cart-dialog-component.service';
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { I18nTestingModule } from '@spartacus/core';
 import {
   IconTestingModule,
   KeyboardFocusTestingModule,
 } from '@spartacus/storefront';
-import { I18nTestingModule } from '@spartacus/core';
-import { CommonModule } from '@angular/common';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
+import { ClearCartDialogComponentService } from './clear-cart-dialog-component.service';
 import { ClearCartDialogComponent } from './clear-cart-dialog.component';
-import { By } from '@angular/platform-browser';
 
 const mockCloseReason = 'Cancel Clear Cart';
 
@@ -29,7 +30,7 @@ describe('ClearCartDialogComponent', () => {
         KeyboardFocusTestingModule,
         IconTestingModule,
       ],
-      declarations: [ClearCartDialogComponent],
+      declarations: [ClearCartDialogComponent, MockFeatureDirective],
       providers: [
         {
           provide: ClearCartDialogComponentService,

diff --git a/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.module.ts b/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.module.ts
@@ -6,7 +6,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { I18nModule } from '@spartacus/core';
+import { FeaturesConfigModule, I18nModule } from '@spartacus/core';
 import {
   IconModule,
   KeyboardFocusModule,
@@ -21,6 +21,7 @@ import { ClearCartDialogComponent } from './clear-cart-dialog.component';
     I18nModule,
     IconModule,
     KeyboardFocusModule,
+    FeaturesConfigModule,
   ],
   declarations: [ClearCartDialogComponent],
   exports: [ClearCartDialogComponent],

diff --git a/...port/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html b/...port/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html
@@ -9,7 +9,18 @@
     <!-- Modal Header -->
     <div class="modal-header cx-import-entries-header">
       <ng-container>
-        <div id="dialogTitle" class="cx-import-entries-title modal-title">
+        <h3
+          *cxFeature="'a11yDialogsHeading'"
+          id="dialogTitle"
+          class="cx-import-entries-title modal-title"
+        >
+          {{ 'importEntriesDialog.importProducts' | cxTranslate }}
+        </h3>
+        <div
+          *cxFeature="'!a11yDialogsHeading'"
+          id="dialogTitle"
+          class="cx-import-entries-title modal-title"
+        >
           {{ 'importEntriesDialog.importProducts' | cxTranslate }}
         </div>
       </ng-container>

diff --git a/...t/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.spec.ts b/...t/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.spec.ts
@@ -13,6 +13,7 @@ import {
   KeyboardFocusTestingModule,
   LaunchDialogService,
 } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { ImportEntriesDialogComponent } from './import-entries-dialog.component';
 
@@ -71,6 +72,7 @@ describe('ImportEntriesDialogComponent', () => {
       declarations: [
         ImportEntriesDialogComponent,
         MockImportEntriesFormComponent,
+        MockFeatureDirective,
       ],
       providers: [
         { provide: LaunchDialogService, useClass: MockLaunchDialogService },

diff --git a/feature-libs/cart/import-export/components/import-to-cart/import-order-entries.module.ts b/feature-libs/cart/import-export/components/import-to-cart/import-order-entries.module.ts
@@ -10,6 +10,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   CmsConfig,
   ConfigModule,
+  FeaturesConfigModule,
   I18nModule,
   provideDefaultConfig,
 } from '@spartacus/core';
@@ -43,6 +44,7 @@ import { ImportOrderEntriesComponent } from './import-entries/import-order-entri
         },
       },
     }),
+    FeaturesConfigModule,
   ],
   declarations: [
     ImportOrderEntriesComponent,

diff --git a/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html b/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
@@ -10,7 +10,29 @@
       <!-- Modal Header -->
       <div class="modal-header cx-saved-cart-form-header">
         <ng-container [ngSwitch]="layoutOption">
-          <div id="dialogTitle" class="cx-saved-cart-form-title modal-title">
+          <h3
+            *cxFeature="'a11yDialogsHeading'"
+            id="dialogTitle"
+            class="cx-saved-cart-form-title modal-title"
+          >
+            <ng-container *ngSwitchCase="savedCartFormType.EDIT">
+              {{ 'savedCartDialog.editSavedCart' | cxTranslate }}
+            </ng-container>
+            <ng-container *ngSwitchCase="savedCartFormType.DELETE">
+              {{ 'savedCartDialog.deleteSavedCart' | cxTranslate }}
+            </ng-container>
+            <ng-container *ngSwitchCase="savedCartFormType.SAVE">
+              {{ 'savedCartDialog.saveForLater' | cxTranslate }}
+            </ng-container>
+            <ng-container *ngSwitchCase="savedCartFormType.RESTORE">
+              {{ 'savedCartDialog.restoreSavedCart' | cxTranslate }}
+            </ng-container>
+          </h3>
+          <div
+            *cxFeature="'!a11yDialogsHeading'"
+            id="dialogTitle"
+            class="cx-saved-cart-form-title modal-title"
+          >
             <ng-container *ngSwitchCase="savedCartFormType.EDIT">
               {{ 'savedCartDialog.editSavedCart' | cxTranslate }}
             </ng-container>

diff --git a/...up-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.html b/...up-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.html
@@ -9,7 +9,18 @@
   <div class="cx-dialog-content">
     <!-- Modal Header -->
     <div class="modal-header cx-dialog-header">
-      <div id="cx-pickup-option-dialog-title" class="cx-dialog-title">
+      <h3
+        *cxFeature="'a11yDialogsHeading'"
+        id="cx-pickup-option-dialog-title"
+        class="cx-dialog-title"
+      >
+        {{ 'pickupOptionDialog.modalHeader' | cxTranslate }}
+      </h3>
+      <div
+        *cxFeature="'!a11yDialogsHeading'"
+        id="cx-pickup-option-dialog-title"
+        class="cx-dialog-title"
+      >
         {{ 'pickupOptionDialog.modalHeader' | cxTranslate }}
       </div>
 

diff --git a/...in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.spec.ts b/...in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.spec.ts
@@ -15,10 +15,11 @@ import {
 import {
   IconTestingModule,
   KeyboardFocusModule,
-  LaunchDialogService,
   LAUNCH_CALLER,
+  LaunchDialogService,
   SpinnerModule,
 } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { EMPTY, Observable, of } from 'rxjs';
 import { MockIntendedPickupLocationService } from '../../../core/facade/intended-pickup-location.service.spec';
 import { MockPickupLocationsSearchService } from '../../../core/facade/pickup-locations-search.service.spec';
@@ -92,6 +93,7 @@ describe('PickupOptionDialogComponent', () => {
         PickupOptionDialogComponent,
         StoreSearchStubComponent,
         StoreListStubComponent,
+        MockFeatureDirective,
       ],
       imports: [
         CommonModule,

diff --git a/.../pickup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.module.ts b/.../pickup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.module.ts
@@ -6,7 +6,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { I18nModule } from '@spartacus/core';
+import { FeaturesConfigModule, I18nModule } from '@spartacus/core';
 import {
   IconModule,
   KeyboardFocusModule,
@@ -25,6 +25,7 @@ import { PickupOptionDialogComponent } from './pickup-option-dialog.component';
     SpinnerModule,
     StoreListModule,
     StoreSearchModule,
+    FeaturesConfigModule,
   ],
   declarations: [PickupOptionDialogComponent],
   exports: [PickupOptionDialogComponent],

diff --git a/...ased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.html b/...ased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.html
@@ -17,7 +17,20 @@
   <div class="cx-modal-content" [cxFocus]="focusConfig">
     <!-- Modal Header -->
     <div class="cx-dialog-header modal-header">
-      <div id="dialogTitle" class="cx-dialog-title modal-title" tabindex="0">
+      <h3
+        *cxFeature="'a11yDialogsHeading'"
+        id="dialogTitle"
+        class="cx-dialog-title modal-title"
+        tabindex="0"
+      >
+        {{ 'configurator.header.resolveIssue' | cxTranslate }}
+      </h3>
+      <div
+        *cxFeature="'!a11yDialogsHeading'"
+        id="dialogTitle"
+        class="cx-dialog-title modal-title"
+        tabindex="0"
+      >
         {{ 'configurator.header.resolveIssue' | cxTranslate }}
       </div>
       <button

diff --git a/...d/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.spec.ts b/...d/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.spec.ts
@@ -1,27 +1,27 @@
-import { Component, Directive, Input } from '@angular/core';
+import { Component, Directive, Input, Type } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ConfiguratorConflictSolverDialogComponent } from './configurator-conflict-solver-dialog.component';
 import { I18nTestingModule } from '@spartacus/core';
 import {
+  CommonConfigurator,
+  ConfiguratorRouter,
+  ConfiguratorType,
+} from '@spartacus/product-configurator/common';
+import {
+  FocusConfig,
   ICON_TYPE,
   IconLoaderService,
   IconModule,
-  LaunchDialogService,
-  FocusConfig,
   KeyboardFocusService,
+  LaunchDialogService,
 } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, NEVER, Observable, of } from 'rxjs';
-import { Configurator } from '../../core/model/configurator.model';
+import { CommonConfiguratorTestUtilsService } from '../../../common/testing/common-configurator-test-utils.service';
 import { ConfiguratorCommonsService } from '../../core/facade/configurator-commons.service';
-import { Type } from '@angular/core';
+import { Configurator } from '../../core/model/configurator.model';
 import * as ConfigurationTestData from '../../testing/configurator-test-data';
 import { ConfiguratorStorefrontUtilsService } from './../service/configurator-storefront-utils.service';
-import { CommonConfiguratorTestUtilsService } from '../../../common/testing/common-configurator-test-utils.service';
-import {
-  CommonConfigurator,
-  ConfiguratorRouter,
-  ConfiguratorType,
-} from '@spartacus/product-configurator/common';
+import { ConfiguratorConflictSolverDialogComponent } from './configurator-conflict-solver-dialog.component';
 
 export class MockIconFontLoaderService {
   getStyleClasses(_iconType: ICON_TYPE): void {}
@@ -98,6 +98,7 @@ describe('ConfiguratorConflictSolverDialogComponent', () => {
         MockConfiguratorDefaultFormComponent,
         ConfiguratorConflictSolverDialogComponent,
         MockKeyboardFocusDirective,
+        MockFeatureDirective,
       ],
       providers: [
         { provide: IconLoaderService, useClass: MockIconFontLoaderService },

diff --git a/...rulebased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.module.ts b/...rulebased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.module.ts
@@ -6,11 +6,15 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import { IconModule, KeyboardFocusModule } from '@spartacus/storefront';
-import { ConfiguratorConflictSolverDialogComponent } from './configurator-conflict-solver-dialog.component';
-import { ConfiguratorConflictSolverDialogLauncherService } from './configurator-conflict-solver-dialog-launcher.service';
 import { ConfiguratorGroupModule } from '../group/configurator-group.module';
+import { ConfiguratorConflictSolverDialogLauncherService } from './configurator-conflict-solver-dialog-launcher.service';
+import { ConfiguratorConflictSolverDialogComponent } from './configurator-conflict-solver-dialog.component';
 import { defaultConfiguratorConflictSolverLayoutConfig } from './default-configurator-conflict-solver-layout.config';
 
 @NgModule({
@@ -20,6 +24,7 @@ import { defaultConfiguratorConflictSolverLayoutConfig } from './default-configu
     I18nModule,
     ConfiguratorGroupModule,
     KeyboardFocusModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(defaultConfiguratorConflictSolverLayoutConfig),

diff --git a/...ased/components/overview-filter-dialog/configurator-overview-filter-dialog.component.html b/...ased/components/overview-filter-dialog/configurator-overview-filter-dialog.component.html
@@ -11,7 +11,18 @@
     (esc)="closeFilterModal()"
   >
     <div class="cx-dialog-header modal-header">
-      <div id="dialogTitle" class="cx-dialog-title modal-title">
+      <h3
+        *cxFeature="'a11yDialogsHeading'"
+        id="dialogTitle"
+        class="cx-dialog-title modal-title"
+      >
+        {{ 'configurator.overviewFilter.title' | cxTranslate }}
+      </h3>
+      <div
+        *cxFeature="'!a11yDialogsHeading'"
+        id="dialogTitle"
+        class="cx-dialog-title modal-title"
+      >
         {{ 'configurator.overviewFilter.title' | cxTranslate }}
       </div>
       <button