fix: (CXSPA-2338) - Reorder dialog a11y fixes (#18648)

Co-authored-by: Piotr Bartkowiak <[email protected]>
SAP · Apr 9, 2024 · 3e40cc2 · 3e40cc2
1 parent 62e321c
commit 3e40cc2
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 4 deletions.
diff --git a/...omponents/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.html b/...omponents/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.html
@@ -2,6 +2,8 @@
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
   class="cx-modal-container"
+  role="dialog"
+  aria-modal="true"
 >
   <div class="cx-modal-content">
     <ng-container>
@@ -52,7 +54,7 @@
         </ng-container>
         <ng-template #result>
           <ng-container *ngIf="!(loading$ | async); else loading">
-            <p>
+            <p aria-live="polite">
               <ng-container
                 *ngIf="!cartModifications?.length; else cartResponse"
               >

diff --git a/...onents/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.spec.ts b/...onents/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.spec.ts
@@ -7,7 +7,7 @@ import {
   CartModificationList,
   MultiCartFacade,
 } from '@spartacus/cart/base/root';
-import { I18nTestingModule } from '@spartacus/core';
+import { FeatureConfigService, I18nTestingModule } from '@spartacus/core';
 import { ReorderOrderFacade } from '@spartacus/order/root';
 import {
   ICON_TYPE,
@@ -107,6 +107,12 @@ export class MockFocusDirective {
   @Input('cxFocus') protected config: any;
 }
 
+class MockFeatureConfigService {
+  isEnabled(_feature: string): boolean {
+    return true;
+  }
+}
+
 describe('ReorderDialogComponent', () => {
   let component: ReorderDialogComponent;
   let fixture: ComponentFixture<ReorderDialogComponent>;
@@ -140,6 +146,10 @@ describe('ReorderDialogComponent', () => {
             provide: MultiCartFacade,
             useClass: MockMultiCartService,
           },
+          {
+            provide: FeatureConfigService,
+            useClass: MockFeatureConfigService,
+          },
         ],
       }).compileComponents();
     })
@@ -184,5 +194,13 @@ describe('ReorderDialogComponent', () => {
       fixture.detectChanges();
       expect(el.query(By.css('.success')).nativeElement).toBeDefined();
     });
+    it('should restore focus after content updates', () => {
+      const focusSpy = spyOn(el.query(By.css('.close')).nativeElement, 'focus');
+      fixture.detectChanges();
+      el.queryAll(
+        By.css('.cx-reorder-dialog-footer div button')
+      )[1].nativeElement.dispatchEvent(new MouseEvent('click'));
+      expect(focusSpy).toHaveBeenCalled();
+    });
   });
 });
diff --git a/.../components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.ts b/.../components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.ts
@@ -4,19 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Optional,
+  inject,
+} from '@angular/core';
 import {
   CartModification,
   CartModificationList,
   CartValidationStatusCode,
   MultiCartFacade,
 } from '@spartacus/cart/base/root';
-import { OCC_CART_ID_CURRENT } from '@spartacus/core';
+import { FeatureConfigService, OCC_CART_ID_CURRENT } from '@spartacus/core';
 import { ReorderOrderFacade } from '@spartacus/order/root';
 import {
   FocusConfig,
   ICON_TYPE,
   LaunchDialogService,
+  SelectFocusUtility,
 } from '@spartacus/storefront';
 import { BehaviorSubject } from 'rxjs';
 
@@ -40,6 +47,16 @@ export class ReorderDialogComponent {
   showDecisionPrompt$ = new BehaviorSubject(true);
   data$ = this.launchDialogService.data$;
 
+  // TODO: (CXSPA-6585) - Remove FeatureConfigService and make depenencies required
+  @Optional() selectFocusUtility = inject(SelectFocusUtility, {
+    optional: true,
+  });
+
+  @Optional() elementRef = inject(ElementRef, { optional: true });
+  @Optional() featureConfigService = inject(FeatureConfigService, {
+    optional: true,
+  });
+
   constructor(
     protected launchDialogService: LaunchDialogService,
     protected reorderOrderFacade: ReorderOrderFacade,
@@ -55,9 +72,20 @@ export class ReorderDialogComponent {
         this.multiCartFacade.reloadCart(OCC_CART_ID_CURRENT);
         this.cartModifications = cartModificationList.cartModifications;
         this.loading$.next(false);
+        this.recaptureFocus();
       });
   }
 
+  recaptureFocus(): void {
+    // TODO: (CXSPA-6585) - Remove feature flag next major release
+    if (!this.featureConfigService?.isEnabled('a11yReorderDialog')) {
+      return;
+    }
+    this.selectFocusUtility
+      ?.findFirstFocusable(this.elementRef?.nativeElement)
+      ?.focus();
+  }
+
   close(reason: string): void {
     this.launchDialogService.closeDialog(reason);
   }

diff --git a/projects/storefrontapp/src/app/app.module.ts b/projects/storefrontapp/src/app/app.module.ts
@@ -97,6 +97,7 @@ if (!environment.production) {
         a11yNavigationUiKeyboardControls: true,
         a11yOrderConfirmationHeadingOrder: true,
         a11yStarRating: true,
+        a11yReorderDialog: true,
         a11yPopoverFocus: true,
         a11yScheduleReplenishment: true,
         a11yScrollToTop: true,