Skip to content

Commit 457bd2f

Browse files
glo80771glo42707glo82145
authored
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 <[email protected]> Co-authored-by: Aanchal Pawar <[email protected]>
1 parent 6b1c0cb commit 457bd2f

File tree

14 files changed

+187
-62
lines changed

14 files changed

+187
-62
lines changed

‎packages/venia-ui/i18n/en_US.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"addressBookPage.addressBookText": "Address Book",
2828
"addressBookPage.editDialogTitle": "Edit Address",
2929
"addressBookPage.makeDefaultAddress": "Make this my default address",
30+
"addressBookPage.addAddressMessage": "You have added {count} address in your address book.",
3031
"addressBookPage.telephone": "Phone {telephone}",
3132
"addressCard.defaultText": "Default",
3233
"addToCartButton.addItemToCart": "ADD TO CART",
@@ -309,6 +310,7 @@
309310
"orderHistoryPage.loadMore": "Load More",
310311
"orderHistoryPage.pageInfo": "Showing {current} of {total}",
311312
"orderHistoryPage.pageTitleText": "Order History",
313+
"orderHistoryPage.ordersCount": "You have {count} orders in your history",
312314
"orderHistoryPage.search": "Search by Order Number",
313315
"orderItems.itemsHeading": "Items",
314316
"orderProgressBar.deliveredText": "Delivered",
@@ -393,6 +395,7 @@
393395
"savedPaymentsPage.addButtonText": "Add a credit card",
394396
"savedPaymentsPage.creditCard.errorRemoving": "Something went wrong deleting this payment method. Please refresh and try again.",
395397
"savedPaymentsPage.noSavedPayments": "You have no saved payments.",
398+
"savedPaymentsPage.Message": "You have {count} saved payments.",
396399
"savedPaymentsPage.title": "Saved Payments",
397400
"searchBar.heading": "Product Suggestions",
398401
"searchBar.label": " in {label}",
@@ -480,6 +483,7 @@
480483
"wishlistPage.headingText": "{count, plural, one {Favorites List} other {Favorites Lists}}",
481484
"wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
482485
"wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list",
486+
"wishlist.itemsMessage": "You have {count} items in your wishlist",
483487
"wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
484488
"wishlist.loadMore": "Load More",
485489
"LegacyMiniCart.buttonExpanded":"More Options Expanded",

‎packages/venia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ exports[`renders form error 1`] = `
55
className="root"
66
>
77
Account Information
8-
<h1
8+
<div
99
aria-live="polite"
1010
className="title"
1111
>
1212
<mock-FormattedMessage
1313
defaultMessage="Account Information"
1414
id="accountInformationPage.accountInformation"
1515
/>
16-
</h1>
16+
</div>
1717
<p
1818
className="root"
1919
>

‎packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ const AccountInformationPage = props => {
126126
defaultMessage: 'Account Information'
127127
})}
128128
</StoreTitle>
129-
<h1
129+
<div
130130
aria-live="polite"
131131
className={classes.title}
132132
data-cy="AccountInformationPage-title"
@@ -135,7 +135,7 @@ const AccountInformationPage = props => {
135135
id={'accountInformationPage.accountInformation'}
136136
defaultMessage={'Account Information'}
137137
/>
138-
</h1>
138+
</div>
139139
{errorMessage ? errorMessage : pageContent}
140140
</div>
141141
);

‎packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing addresses 1`] = `
55
className="root"
66
>
77
Title
8-
<h1
8+
<div
99
aria-live="polite"
1010
className="heading"
1111
>
1212
Address Book
13-
</h1>
13+
<div
14+
aria-label="You have added 3 address in your address book."
15+
aria-live="polite"
16+
/>
17+
</div>
1418
<div
1519
className="content"
1620
>
@@ -125,12 +129,16 @@ exports[`renders correctly when there are no existing addresses 1`] = `
125129
className="root"
126130
>
127131
Title
128-
<h1
132+
<div
129133
aria-live="polite"
130134
className="heading"
131135
>
132136
Address Book
133-
</h1>
137+
<div
138+
aria-label="You have added 0 address in your address book."
139+
aria-live="polite"
140+
/>
141+
</div>
134142
<div
135143
className="content"
136144
>
@@ -200,12 +208,16 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
200208
className="root"
201209
>
202210
Title
203-
<h1
211+
<div
204212
aria-live="polite"
205213
className="heading"
206214
>
207215
Address Book
208-
</h1>
216+
<div
217+
aria-label="You have added 3 address in your address book."
218+
aria-live="polite"
219+
/>
220+
</div>
209221
<div
210222
className="content"
211223
>

‎packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,26 @@ const AddressBookPage = props => {
9090
return fullPageLoadingIndicator;
9191
}
9292

93+
const addressBookPageMessage = formatMessage(
94+
{
95+
id: 'addressBookPage.addAddressMessage',
96+
defaultMessage:
97+
'You have added {count} address in your address book.'
98+
},
99+
{ count: customerAddresses.length }
100+
);
101+
93102
return (
94103
<div className={classes.root}>
95104
<StoreTitle>{PAGE_TITLE}</StoreTitle>
96-
<h1
105+
<div
97106
aria-live="polite"
98107
className={classes.heading}
99108
data-cy="AddressBookPage-heading"
100109
>
101110
{PAGE_TITLE}
102-
</h1>
111+
<div aria-live="polite" aria-label={addressBookPageMessage} />
112+
</div>
103113
<div className={classes.content} data-cy="AddressBookPage-content">
104114
{addressBookElements}
105115
<LinkButton

‎packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ exports[`renders empty form without data 1`] = `
55
className="root"
66
>
77
Communications
8-
<h1
8+
<div
99
className="title"
1010
>
1111
<mock-FormattedMessage
1212
defaultMessage="Communications"
1313
id="communicationsPage.communicationsText"
1414
/>
15-
</h1>
15+
</div>
1616
<p>
1717
<mock-FormattedMessage
1818
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`] = `
114114
className="root"
115115
>
116116
Communications
117-
<h1
117+
<div
118118
className="title"
119119
>
120120
<mock-FormattedMessage
121121
defaultMessage="Communications"
122122
id="communicationsPage.communicationsText"
123123
/>
124-
</h1>
124+
</div>
125125
<p>
126126
<mock-FormattedMessage
127127
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`] = `
223223
className="root"
224224
>
225225
Communications
226-
<h1
226+
<div
227227
className="title"
228228
>
229229
<mock-FormattedMessage
230230
defaultMessage="Communications"
231231
id="communicationsPage.communicationsText"
232232
/>
233-
</h1>
233+
</div>
234234
<p>
235235
<mock-FormattedMessage
236236
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`] = `
334334
className="root"
335335
>
336336
Communications
337-
<h1
337+
<div
338338
className="title"
339339
>
340340
<mock-FormattedMessage
341341
defaultMessage="Communications"
342342
id="communicationsPage.communicationsText"
343343
/>
344-
</h1>
344+
</div>
345345
<p>
346346
<mock-FormattedMessage
347347
defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."

‎packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@ const CommunicationsPage = props => {
4545
return (
4646
<div className={classes.root}>
4747
<StoreTitle>{title}</StoreTitle>
48-
<h1 className={classes.title}>
48+
<div className={classes.title}>
4949
<FormattedMessage
5050
id={'communicationsPage.communicationsText'}
5151
defaultMessage={'Communications'}
5252
/>
53-
</h1>
53+
</div>
5454
<p>
5555
<FormattedMessage
5656
id={'communicationsPage.optInText'}

‎packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,16 @@ exports[`renders correctly with data 1`] = `
66
className="root"
77
>
88
Title
9-
<h1
9+
<div
1010
aria-live="polite"
1111
className="heading"
1212
>
1313
Order History
14-
</h1>
14+
<div
15+
aria-label="You have 3 orders in your history"
16+
aria-live="polite"
17+
/>
18+
</div>
1519
<div
1620
className="filterRow"
1721
>
@@ -209,12 +213,16 @@ exports[`renders correctly without data 1`] = `
209213
className="root"
210214
>
211215
Title
212-
<h1
216+
<div
213217
aria-live="polite"
214218
className="heading"
215219
>
216220
Order History
217-
</h1>
221+
<div
222+
aria-label="You have 0 orders in your history"
223+
aria-live="polite"
224+
/>
225+
</div>
218226
<div
219227
className="filterRow"
220228
>
@@ -388,12 +396,16 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
388396
className="root"
389397
>
390398
Title
391-
<h1
399+
<div
392400
aria-live="polite"
393401
className="heading"
394402
>
395403
Order History
396-
</h1>
404+
<div
405+
aria-label="You have 0 orders in your history"
406+
aria-live="polite"
407+
/>
408+
</div>
397409
<div
398410
className="filterRow"
399411
>
@@ -581,12 +593,16 @@ exports[`renders loading indicator 1`] = `
581593
className="root"
582594
>
583595
Title
584-
<h1
596+
<div
585597
aria-live="polite"
586598
className="heading"
587599
>
588600
Order History
589-
</h1>
601+
<div
602+
aria-label="You have 0 orders in your history"
603+
aria-live="polite"
604+
/>
605+
</div>
590606
<div
591607
className="filterRow"
592608
>
@@ -794,12 +810,16 @@ exports[`renders no orders message is orders is empty 1`] = `
794810
className="root"
795811
>
796812
Title
797-
<h1
813+
<div
798814
aria-live="polite"
799815
className="heading"
800816
>
801817
Order History
802-
</h1>
818+
<div
819+
aria-label="You have 0 orders in your history"
820+
aria-live="polite"
821+
/>
822+
</div>
803823
<div
804824
className="filterRow"
805825
>

‎packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,15 @@ const OrderHistoryPage = props => {
5656
id: 'orderHistoryPage.search',
5757
defaultMessage: 'Search by Order Number'
5858
});
59+
60+
const ordersCountMessage = formatMessage(
61+
{
62+
id: 'orderHistoryPage.ordersCount',
63+
defaultMessage: 'You have {count} orders in your history.'
64+
},
65+
{ count: orders.length }
66+
);
67+
5968
const classes = useStyle(defaultClasses, props.classes);
6069

6170
const orderRows = useMemo(() => {
@@ -160,9 +169,11 @@ const OrderHistoryPage = props => {
160169
<OrderHistoryContextProvider>
161170
<div className={classes.root}>
162171
<StoreTitle>{PAGE_TITLE}</StoreTitle>
163-
<h1 aria-live="polite" className={classes.heading}>
172+
<div aria-live="polite" className={classes.heading}>
164173
{PAGE_TITLE}
165-
</h1>
174+
<div aria-live="polite" aria-label={ordersCountMessage} />
175+
</div>
176+
166177
<div className={classes.filterRow}>
167178
<span className={classes.pageInfo}>{pageInfoLabel}</span>
168179
<Form className={classes.search} onSubmit={handleSubmit}>

‎packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing saved payments 1`] = `
55
className="root"
66
>
77
Title
8-
<h1
8+
<div
99
aria-live="polite"
1010
className="heading"
1111
>
1212
Saved Payments
13-
</h1>
13+
<div
14+
aria-label="You have 1 saved payments."
15+
aria-live="polite"
16+
/>
17+
</div>
1418
<div
1519
className="content"
1620
>
@@ -37,12 +41,16 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
3741
className="root"
3842
>
3943
Title
40-
<h1
44+
<div
4145
aria-live="polite"
4246
className="heading"
4347
>
4448
Saved Payments
45-
</h1>
49+
<div
50+
aria-label="You have no saved payments."
51+
aria-live="polite"
52+
/>
53+
</div>
4654
<div
4755
className="content"
4856
/>

0 commit comments

Comments
 (0)