PWA-3182::Accessibility || screen reader reading wrong quantity into… (…

…#4172) * PWA-3182::Accessibility || srcreen reader reading wrong quantity into sub-folder of My account even when havnig atleast 1 item or more or zero * PWA-3182::Updated unit test cases --------- Co-authored-by: arpit khare <84493875+glo42707@users.noreply.github.com> Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
magento · Oct 4, 2023 · 457bd2f · 457bd2f
1 parent 6b1c0cb
commit 457bd2f
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 62 deletions.
diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
@@ -27,6 +27,7 @@
     "addressBookPage.addressBookText": "Address Book",
     "addressBookPage.editDialogTitle": "Edit Address",
     "addressBookPage.makeDefaultAddress": "Make this my default address",
+    "addressBookPage.addAddressMessage": "You have added {count} address in your address book.",
     "addressBookPage.telephone": "Phone {telephone}",
     "addressCard.defaultText": "Default",
     "addToCartButton.addItemToCart": "ADD TO CART",
@@ -309,6 +310,7 @@
     "orderHistoryPage.loadMore": "Load More",
     "orderHistoryPage.pageInfo": "Showing {current} of {total}",
     "orderHistoryPage.pageTitleText": "Order History",
+    "orderHistoryPage.ordersCount": "You have {count} orders in your history",
     "orderHistoryPage.search": "Search by Order Number",
     "orderItems.itemsHeading": "Items",
     "orderProgressBar.deliveredText": "Delivered",
@@ -393,6 +395,7 @@
     "savedPaymentsPage.addButtonText": "Add a credit card",
     "savedPaymentsPage.creditCard.errorRemoving": "Something went wrong deleting this payment method. Please refresh and try again.",
     "savedPaymentsPage.noSavedPayments": "You have no saved payments.",
+    "savedPaymentsPage.Message": "You have {count} saved payments.",
     "savedPaymentsPage.title": "Saved Payments",
     "searchBar.heading": "Product Suggestions",
     "searchBar.label": " in {label}",
@@ -480,6 +483,7 @@
     "wishlistPage.headingText": "{count, plural, one {Favorites List} other {Favorites Lists}}",
     "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
     "wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list",
+    "wishlist.itemsMessage": "You have {count} items in your wishlist",
     "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
     "wishlist.loadMore": "Load More",
     "LegacyMiniCart.buttonExpanded":"More Options Expanded",

diff --git a/...onents/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap b/...onents/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap
@@ -5,15 +5,15 @@ exports[`renders form error 1`] = `
   className="root"
 >
   Account Information
-  <h1
+  <div
     aria-live="polite"
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Account Information"
       id="accountInformationPage.accountInformation"
     />
-  </h1>
+  </div>
   <p
     className="root"
   >

diff --git a/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js b/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
@@ -126,7 +126,7 @@ const AccountInformationPage = props => {
                     defaultMessage: 'Account Information'
                 })}
             </StoreTitle>
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.title}
                 data-cy="AccountInformationPage-title"
@@ -135,7 +135,7 @@ const AccountInformationPage = props => {
                     id={'accountInformationPage.accountInformation'}
                     defaultMessage={'Account Information'}
                 />
-            </h1>
+            </div>
             {errorMessage ? errorMessage : pageContent}
         </div>
     );

diff --git a/...ia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap b/...ia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap
@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing addresses 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 3 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -125,12 +129,16 @@ exports[`renders correctly when there are no existing addresses 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 0 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -200,12 +208,16 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 3 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >

diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
@@ -90,16 +90,26 @@ const AddressBookPage = props => {
         return fullPageLoadingIndicator;
     }
 
+    const addressBookPageMessage = formatMessage(
+        {
+            id: 'addressBookPage.addAddressMessage',
+            defaultMessage:
+                'You have added {count} address in your address book.'
+        },
+        { count: customerAddresses.length }
+    );
+
     return (
         <div className={classes.root}>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.heading}
                 data-cy="AddressBookPage-heading"
             >
                 {PAGE_TITLE}
-            </h1>
+                <div aria-live="polite" aria-label={addressBookPageMessage} />
+            </div>
             <div className={classes.content} data-cy="AddressBookPage-content">
                 {addressBookElements}
                 <LinkButton

diff --git a/...lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap b/...lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
@@ -5,14 +5,14 @@ exports[`renders empty form without data 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -114,14 +114,14 @@ exports[`renders form error 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -223,14 +223,14 @@ exports[`renders prefilled form with data with disabled buttons 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -334,14 +334,14 @@ exports[`renders prefilled form with data with enabled buttons 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."

diff --git a/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js b/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
@@ -45,12 +45,12 @@ const CommunicationsPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{title}</StoreTitle>
-            <h1 className={classes.title}>
+            <div className={classes.title}>
                 <FormattedMessage
                     id={'communicationsPage.communicationsText'}
                     defaultMessage={'Communications'}
                 />
-            </h1>
+            </div>
             <p>
                 <FormattedMessage
                     id={'communicationsPage.optInText'}

diff --git a/...-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap b/...-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap
@@ -6,12 +6,16 @@ exports[`renders correctly with data 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 3 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -209,12 +213,16 @@ exports[`renders correctly without data 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -388,12 +396,16 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -581,12 +593,16 @@ exports[`renders loading indicator 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -794,12 +810,16 @@ exports[`renders no orders message is orders is empty 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >

diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js b/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
@@ -56,6 +56,15 @@ const OrderHistoryPage = props => {
         id: 'orderHistoryPage.search',
         defaultMessage: 'Search by Order Number'
     });
+
+    const ordersCountMessage = formatMessage(
+        {
+            id: 'orderHistoryPage.ordersCount',
+            defaultMessage: 'You have {count} orders in your history.'
+        },
+        { count: orders.length }
+    );
+
     const classes = useStyle(defaultClasses, props.classes);
 
     const orderRows = useMemo(() => {
@@ -160,9 +169,11 @@ const OrderHistoryPage = props => {
         <OrderHistoryContextProvider>
             <div className={classes.root}>
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
-                <h1 aria-live="polite" className={classes.heading}>
+                <div aria-live="polite" className={classes.heading}>
                     {PAGE_TITLE}
-                </h1>
+                    <div aria-live="polite" aria-label={ordersCountMessage} />
+                </div>
+
                 <div className={classes.filterRow}>
                     <span className={classes.pageInfo}>{pageInfoLabel}</span>
                     <Form className={classes.search} onSubmit={handleSubmit}>

diff --git a/...i/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap b/...i/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing saved payments 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Saved Payments
-  </h1>
+    <div
+      aria-label="You have 1 saved payments."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -37,12 +41,16 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Saved Payments
-  </h1>
+    <div
+      aria-label="You have no saved payments."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   />