From 9134e71b8ffb6dea020fb12afe9edb2cde5ce8f8 Mon Sep 17 00:00:00 2001
From: sdrozdsap <163305268+sdrozdsap@users.noreply.github.com>
Date: Tue, 10 Sep 2024 10:27:24 +0100
Subject: [PATCH] feat(a11y): Pronounce cart import file selection (#19124)

---
 .../assets/translations/en/importExport.json          |  1 +
 .../import-entries-form.component.html                | 11 +++++++++++
 .../import-entries-form.component.ts                  |  2 ++
 .../import-to-new-saved-cart-form.component.html      | 11 +++++++++++
 .../import-to-cart/import-order-entries.module.ts     |  3 +++
 .../feature-toggles/config/feature-toggles.ts         |  7 +++++++
 .../src/app/spartacus/spartacus-features.module.ts    |  1 +
 .../components/form/file-upload/file-upload.module.ts |  9 ++++++++-
 8 files changed, 44 insertions(+), 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
index 6ba68a2e74e..0e2ffeea8ec 100644
--- 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/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.html b/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.html
index b435184f999..b488e9e6dde 100644
--- a/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.html
+++ b/feature-libs/cart/import-export/components/import-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/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.ts b/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.ts
index 84b2e9411c1..dd487afc6a6 100644
--- a/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-form/import-entries-form.component.ts
+++ b/feature-libs/cart/import-export/components/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/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html b/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html
index e5f28956984..121e854bb0f 100644
--- a/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html
+++ b/feature-libs/cart/import-export/components/import-to-cart/import-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
index d24e749dfb7..fd83f23ec83 100644
--- 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
index bdaf590323b..1d45cae3b4f 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
@@ -224,6 +224,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'.
    */
@@ -537,6 +543,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
index 401b9cd0a9d..678896c6a4a 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -316,6 +316,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
index 47c415af008..67a402a3e9a 100644
--- 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],
 })