A11Y: Quote modal needs enhancements for screen readers (#17959)

Closes CXSPA-4923
SAP · Oct 19, 2023 · 705ba85 · 705ba85
1 parent be7be9a
commit 705ba85
Show file tree

Hide file tree

Showing 8 changed files with 333 additions and 7 deletions.
diff --git a/feature-libs/quote/assets/translations/en/quote.i18n.ts b/feature-libs/quote/assets/translations/en/quote.i18n.ts
@@ -29,42 +29,63 @@ export const quote = {
         option: { yes: 'Yes', no: 'No' },
         buyer: {
           submit: {
+            a11y: {
+              close: 'Close submit quote modal',
+            },
             title: 'Submit Quote Request {{ code }}?',
             confirmNote: 'Are you sure you want to submit this quote request?',
             successMessage: 'Quote request submitted successfully',
           },
           cancel: {
+            a11y: {
+              close: 'Close cancel quote modal',
+            },
             title: 'Cancel Quote Request {{ code }}?',
-            confirmNote: 'Are you sure you want to cancel this quote request',
+            confirmNote: 'Are you sure you want to cancel this quote request?',
             successMessage: 'Quote request cancelled',
           },
         },
         buyer_offer: {
           edit: {
+            a11y: {
+              close: 'Close edit quote modal',
+            },
             title: 'Confirm Edit Quote {{ code }}?',
             confirmNote: 'Are you sure you want to edit this approved quote?',
             warningNote:
               'This Quote has been Approved. Editing this Quote will prevent Checkout until new edits are approved.',
           },
           cancel: {
+            a11y: {
+              close: 'Close cancel quote modal',
+            },
             title: 'Cancel Quote {{ code }}?',
             confirmNote: 'Are you sure you want to cancel this quote?',
             successMessage: 'Quote cancelled',
           },
           checkout: {
+            a11y: {
+              close: 'Close checkout quote modal',
+            },
             title: 'Checkout Quote {{ code }}?',
             confirmNote:
               'Are you sure you want to accept and checkout this quote?',
           },
         },
         expired: {
           edit: {
+            a11y: {
+              close: 'Close edit quote modal',
+            },
             title: 'Confirm Edit Quote {{ code }}?',
             confirmNote: 'Are you sure you want to edit this expired quote?',
             warningNote:
               'This Quote is expired. Editing this quote will prevent checkout until new edits are approved.',
           },
           requote: {
+            a11y: {
+              close: 'Close requote modal',
+            },
             title: 'Recreate Quote Request {{ code }}?',
             confirmNote:
               'Are you sure you want to recreate this quote request?',
@@ -74,6 +95,9 @@ export const quote = {
         },
         seller: {
           submit: {
+            a11y: {
+              close: 'Close submit quote modal',
+            },
             title: 'Submit Quote {{ code }}?',
             confirmNote: 'Are you sure you want to submit this quote?',
             warningNote:
@@ -83,18 +107,27 @@ export const quote = {
         },
         approver: {
           approve: {
+            a11y: {
+              close: 'Close approve quote modal',
+            },
             title: 'Approve Quote {{ code }}?',
             confirmNote: 'Are you sure you want to approve this quote?',
             successMessage: 'Quote approved successfully',
           },
           reject: {
+            a11y: {
+              close: 'Close reject quote modal',
+            },
             title: 'Reject Quote {{ code }}?',
             confirmNote: 'Are you sure you want to reject this quote?',
             successMessage: 'Quote rejected',
           },
         },
         all: {
           edit: {
+            a11y: {
+              close: 'Close edit quote modal',
+            },
             title: 'Edit Quote {{ code }}?',
             confirmNote: 'Are you sure you want to edit this quote?',
             warningNote:
@@ -180,5 +213,6 @@ export const quote = {
       CANCELLED: 'Cancelled',
       EXPIRED: 'Expired',
     },
+    a11y: {},
   },
 };
diff --git a/feature-libs/quote/components/actions/by-role/quote-actions-by-role.component.spec.ts b/feature-libs/quote/components/actions/by-role/quote-actions-by-role.component.spec.ts
@@ -92,10 +92,12 @@ const mockQuoteDetails$ = new BehaviorSubject<Quote>(mockQuote);
 const currentCart: Partial<Cart> = {};
 
 let dialogClose$: BehaviorSubject<any | undefined>;
+
 class MockLaunchDialogService implements Partial<LaunchDialogService> {
   closeDialog(reason: any): void {
     dialogClose$.next(reason);
   }
+
   openDialog(
     _caller: LAUNCH_CALLER,
     _openElement?: ElementRef,
@@ -104,6 +106,7 @@ class MockLaunchDialogService implements Partial<LaunchDialogService> {
   ) {
     return of();
   }
+
   get dialogClose() {
     return dialogClose$.asObservable();
   }
@@ -113,12 +116,14 @@ class MockCommerceQuotesFacade implements Partial<QuoteFacade> {
   getQuoteDetails(): Observable<Quote> {
     return mockQuoteDetails$.asObservable();
   }
+
   performQuoteAction(
     _quote: Quote,
     _quoteAction: QuoteActionType
   ): Observable<unknown> {
     return EMPTY;
   }
+
   requote = createSpy();
 }
 
@@ -226,6 +231,9 @@ describe('QuoteActionsByRoleComponent', () => {
       title: 'quote.actions.confirmDialog.buyer.submit.title',
       confirmNote: 'quote.actions.confirmDialog.buyer.submit.confirmNote',
       successMessage: 'quote.actions.confirmDialog.buyer.submit.successMessage',
+      a11y: {
+        close: 'quote.actions.confirmDialog.buyer.submit.a11y.close',
+      },
     };
     mockQuoteDetails$.next(quoteForSubmitAction);
     fixture.detectChanges();
@@ -259,6 +267,9 @@ describe('QuoteActionsByRoleComponent', () => {
       confirmNote: 'quote.actions.confirmDialog.buyer_offer.edit.confirmNote',
       warningNote: 'quote.actions.confirmDialog.buyer_offer.edit.warningNote',
       validity: 'quote.actions.confirmDialog.validity',
+      a11y: {
+        close: 'quote.actions.confirmDialog.buyer_offer.edit.a11y.close',
+      },
     };
     mockQuoteDetails$.next(quoteInBuyerOfferState);
     fixture.detectChanges();
@@ -308,6 +319,9 @@ describe('QuoteActionsByRoleComponent', () => {
       title: 'quote.actions.confirmDialog.expired.requote.title',
       confirmNote: 'quote.actions.confirmDialog.expired.requote.confirmNote',
       warningNote: 'quote.actions.confirmDialog.expired.requote.warningNote',
+      a11y: {
+        close: 'quote.actions.confirmDialog.expired.requote.a11y.close',
+      },
     };
     mockQuoteDetails$.next(expiredQuote);
     fixture.detectChanges();
@@ -573,6 +587,9 @@ describe('QuoteActionsByRoleComponent', () => {
         title: 'title',
         confirmNote: 'confirmNote',
         successMessage: 'successMessage',
+        a11y: {
+          close: 'A11y text for close modal',
+        },
       };
     });
 

diff --git a/feature-libs/quote/components/actions/by-role/quote-actions-by-role.component.ts b/feature-libs/quote/components/actions/by-role/quote-actions-by-role.component.ts
@@ -186,6 +186,9 @@ export class QuoteActionsByRoleComponent implements OnInit, OnDestroy {
       quote: quote,
       title: dialogConfig.i18nKeyPrefix + '.title',
       confirmNote: dialogConfig.i18nKeyPrefix + '.confirmNote',
+      a11y: {
+        close: dialogConfig.i18nKeyPrefix + '.a11y.close',
+      },
     };
     if (dialogConfig.showWarningNote) {
       confirmationContext.warningNote =

diff --git a/...-libs/quote/components/actions/confirm-dialog/quote-actions-confirm-dialog.component.html b/...-libs/quote/components/actions/confirm-dialog/quote-actions-confirm-dialog.component.html
@@ -19,7 +19,7 @@
       <button
         type="button"
         class="close"
-        [attr.aria-label]="'common.close' | cxTranslate"
+        [attr.aria-label]="confirmationContext.a11y.close | cxTranslate"
         (click)="dismissModal('Cross click')"
       >
         <span aria-hidden="true">
@@ -83,5 +83,10 @@
         </button>
       </div>
     </div>
+
+    <!-- For screen reader purposes (not visual)-->
+    <div class="cx-visually-hidden" aria-live="polite" aria-atomic="true">
+      {{ getA11yModalText(confirmationContext) }}
+    </div>
   </div>
 </div>