Merge branch 'develop' into epic/ssr-error-handling

SAP · Sep 10, 2024 · e85a748 · e85a748
2 parents f129911 + 9134e71
commit e85a748
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 1 deletion.
diff --git a/feature-libs/cart/import-export/assets/translations/en/importExport.json b/feature-libs/cart/import-export/assets/translations/en/importExport.json
@@ -19,6 +19,7 @@
     "importProductsNewSavedCartSubtitle": "Add products by importing a .CSV file and creating a new saved cart.",
     "importProductFileDetails": "Text file should contain list of products with required columns separated by comma: SKU and quantity.",
     "selectFile": "Select File",
+    "selectedSuccessfully": "CSV file has been successfully selected.",
     "savedCartName": "Saved Cart Name",
     "savedCartDescription": "Saved Cart Description",
     "optional": "optional",

diff --git a/...port-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.html b/...port-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.html
@@ -3,6 +3,17 @@
   [formGroup]="form"
   (submit)="formSubmitSubject$.next(undefined)"
 >
+  <ng-container *cxFeature="'a11yCartImportConfirmationMessage'">
+    <div aria-live="assertive" aria-atomic="true">
+      <cx-message
+        *ngIf="form.get('file')?.value && form.get('file')?.valid"
+        [text]="'importEntriesDialog.selectedSuccessfully' | cxTranslate"
+        [type]="globalMessageType.MSG_TYPE_CONFIRMATION"
+        [isVisibleCloseButton]="false"
+        [cxFocus]="{ autofocus: '.cx-message' }"
+      ></cx-message>
+    </div>
+  </ng-container>
   <p class="cx-import-entries-subtitle">
     {{ 'importEntriesDialog.importProductsSubtitle' | cxTranslate }}
   </p>

diff --git a/...import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.ts b/...import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.ts
@@ -28,6 +28,7 @@ import {
 import { of, Subject } from 'rxjs';
 import { filter, startWith, switchMap, take, tap } from 'rxjs/operators';
 import { ImportProductsFromCsvService } from '../../import-products-from-csv.service';
+import { GlobalMessageType } from '@spartacus/core';
 
 @Component({
   selector: 'cx-import-entries-form',
@@ -38,6 +39,7 @@ export class ImportEntriesFormComponent implements OnInit {
   form: UntypedFormGroup;
   loadedFile: string[][] | null;
   formSubmitSubject$ = new Subject();
+  globalMessageType = GlobalMessageType;
 
   @Output()
   submitEvent = new EventEmitter<{

diff --git a/...entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html b/...entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html
@@ -3,6 +3,17 @@
   [formGroup]="form"
   (submit)="formSubmitSubject$.next(undefined)"
 >
+  <ng-container *cxFeature="'a11yCartImportConfirmationMessage'">
+    <div aria-live="assertive" aria-atomic="true">
+      <cx-message
+        *ngIf="form.get('file')?.value && form.get('file')?.valid"
+        [text]="'importEntriesDialog.selectedSuccessfully' | cxTranslate"
+        [type]="globalMessageType.MSG_TYPE_CONFIRMATION"
+        [isVisibleCloseButton]="false"
+        [cxFocus]="{ autofocus: '.cx-message' }"
+      ></cx-message>
+    </div>
+  </ng-container>
   <p class="cx-import-entries-subtitle">
     {{ 'importEntriesDialog.importProductsNewSavedCartSubtitle' | cxTranslate }}
   </p>

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
@@ -19,6 +19,7 @@ import {
   FormErrorsModule,
   IconModule,
   KeyboardFocusModule,
+  MessageComponentModule,
 } from '@spartacus/storefront';
 import { defaultImportEntriesLayoutConfig } from './default-import-entries-layout.config';
 import { ImportEntriesDialogComponent } from './import-entries-dialog/import-entries-dialog.component';
@@ -37,6 +38,8 @@ import { ImportOrderEntriesComponent } from './import-entries/import-order-entri
     KeyboardFocusModule,
     FileUploadModule,
     I18nModule,
+    MessageComponentModule,
+    FeaturesConfigModule,
     ConfigModule.withConfig(<CmsConfig>{
       cmsComponents: {
         ImportOrderEntriesComponent: {

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
@@ -243,6 +243,12 @@ export interface FeatureTogglesInterface {
    */
   a11yOrganizationListHeadingOrder?: boolean;
 
+  /**
+   * In `ImportToNewSavedCartFormComponent`,`ImportEntriesFormComponent` after selecting a file
+   * confirmation message is displayed and read out
+   */
+  a11yCartImportConfirmationMessage?: boolean;
+
   /**
    * Changes 'order days' check list into a fieldset inside of 'CheckoutScheduleReplenishmentOrderComponent'.
    */
@@ -558,6 +564,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yMobileVisibleFocus: false,
   a11yOrganizationsBanner: false,
   a11yOrganizationListHeadingOrder: false,
+  a11yCartImportConfirmationMessage: false,
   a11yReplenishmentOrderFieldset: false,
   a11yListOversizedFocus: false,
   a11yStoreFinderOverflow: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -318,6 +318,7 @@ if (environment.cpq) {
         a11yMobileVisibleFocus: true,
         a11yOrganizationsBanner: true,
         a11yOrganizationListHeadingOrder: true,
+        a11yCartImportConfirmationMessage: true,
         a11yReplenishmentOrderFieldset: true,
         a11yListOversizedFocus: true,
         a11yStoreFinderOverflow: true,

diff --git a/projects/storefrontlib/shared/components/form/file-upload/file-upload.module.ts b/projects/storefrontlib/shared/components/form/file-upload/file-upload.module.ts
@@ -10,9 +10,16 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { I18nModule } from '@spartacus/core';
 import { FormErrorsModule } from '../form-errors/form-errors.module';
 import { FileUploadComponent } from './file-upload.component';
+import { KeyboardFocusModule } from '../../../../layout/a11y';
 
 @NgModule({
-  imports: [CommonModule, ReactiveFormsModule, FormErrorsModule, I18nModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormErrorsModule,
+    I18nModule,
+    KeyboardFocusModule,
+  ],
   declarations: [FileUploadComponent],
   exports: [FileUploadComponent],
 })