Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Oct 4, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
007fc2b
PWA-3182::Accessibility || srcreen reader reading wrong quantity into…
glo80771 Sep 28, 2023
a5f66ab
PWA-3182::Updated unit test cases
glo80771 Sep 28, 2023
6cea907
Merge branch 'develop' into PWA-3182
glo42707 Oct 3, 2023
94b1728
Merge branch 'develop' into PWA-3182
glo82145 Oct 4, 2023
0f9363f
Merge branch 'develop' into PWA-3182
glo82145 Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/venia-ui/i18n/en_US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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}",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions ...onents/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
4 changes: 2 additions & 2 deletions packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const AccountInformationPage = props => {
defaultMessage: 'Account Information'
})}
</StoreTitle>
<h1
<div
aria-live="polite"
className={classes.title}
data-cy="AccountInformationPage-title"
Expand All @@ -135,7 +135,7 @@ const AccountInformationPage = props => {
id={'accountInformationPage.accountInformation'}
defaultMessage={'Account Information'}
/>
</h1>
</div>
{errorMessage ? errorMessage : pageContent}
</div>
);
Expand Down
24 changes: 18 additions & 6 deletions ...ia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down
14 changes: 12 additions & 2 deletions packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 8 additions & 8 deletions ...lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down Expand Up @@ -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."
Expand Down Expand Up @@ -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."
Expand Down Expand Up @@ -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."
Expand Down
4 changes: 2 additions & 2 deletions packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand Down
40 changes: 30 additions & 10 deletions ...-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down
15 changes: 13 additions & 2 deletions packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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}>
Expand Down
16 changes: 12 additions & 4 deletions ...i/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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"
/>
Expand Down
Loading