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

@W-12627180@ Improve keyboard accessibility of product scroller #1559

Merged
merged 14 commits into from
Nov 22, 2023
Merged

@W-12627180@ Improve keyboard accessibility of product scroller #1559

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5219586
Don't render scroll left/right buttons when loading.
wjhsf Nov 20, 2023
4d1de43
Simplify double `isLoading` check.
wjhsf Nov 20, 2023
513efc2
Improve accessibility of wishlist toggle button.
wjhsf Nov 20, 2023
289504a
Convert ARIA labels to translatable messages.
wjhsf Nov 21, 2023
a443b04
Add vertical padding so full focus indicator is visible.
wjhsf Nov 21, 2023
0c7b9d8
Merge branch 'develop' into wjh/W-12627180/keyboard-a11y-product-links
wjhsf Nov 21, 2023
385f4e6
Merge branch 'develop' into wjh/W-12627180/keyboard-a11y-product-links
wjhsf Nov 21, 2023
f4ef230
Update changelog.
wjhsf Nov 21, 2023
599a7c5
Fix PR link.
wjhsf Nov 21, 2023
9922454
Apply suggestions from code review
wjhsf Nov 21, 2023
21a452f
Merge branch 'develop' into wjh/W-12627180/keyboard-a11y-product-links
wjhsf Nov 21, 2023
461af5b
Merge branch 'develop' into wjh/W-12627180/keyboard-a11y-product-links
wjhsf Nov 22, 2023
7247b07
Flip add/remove logic so it's correct.
wjhsf Nov 22, 2023
00290b2
The message id no longer have a space in it
vmarta Nov 22, 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
1 change: 1 addition & 0 deletions packages/template-retail-react-app/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- Fix improper nesting of elements in product tile [#1541](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1541)
- Ensure all interactive functionality is operable with the keyboard [#1546](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1546)
- Make security code tooltip receive keyboard focus [#1551](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1551)
- Improve keyboard accessibility of product scroller [#1559](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1559)

### Other Features

Expand Down
90 changes: 54 additions & 36 deletions packages/template-retail-react-app/app/components/product-scroller/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@salesforce/retail-react-app/app/components/shared/ui'
import ProductTile from '@salesforce/retail-react-app/app/components/product-tile'
import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
import {useIntl} from 'react-intl'

/**
* Renders a scrollable, horizontal container of products with native scroll
Expand All @@ -35,6 +36,7 @@ const ProductScroller = forwardRef(
},
ref
) => {
const intl = useIntl()
const scrollRef = useRef()

// Renders nothing if we aren't loading and have no products.
Expand Down Expand Up @@ -72,6 +74,7 @@ const ProductScroller = forwardRef(
wrap="nowrap"
overflowX="scroll"
px={{base: 4, md: 8, lg: 0}}
py={1}
{...scrollProps}
sx={{
scrollPadding: {base: 16, md: 32, lg: 0},
Expand All @@ -80,43 +83,52 @@ const ProductScroller = forwardRef(
...scrollProps?.sx
}}
>
{(isLoading ? [0, 1, 2, 4] : products).map((product, idx) => {
return (
<Box
key={product?.id || idx}
flex="0 0 auto"
width={itemWidth}
style={{scrollSnapAlign: 'start'}}
>
{isLoading ? (
<Stack data-testid="product-scroller-item-skeleton">
<AspectRatio ratio={1}>
<Skeleton />
</AspectRatio>
<Stack spacing={2}>
<Skeleton width="150px" height={5} />
<Skeleton width="75px" height={5} />
</Stack>
</Stack>
) : (
<ProductTile
data-testid="product-scroller-item"
product={product}
{...(typeof productTileProps === 'function'
? {...productTileProps(product)}
: {...productTileProps})}
dynamicImageProps={{
widths: ['70vw', '70vw', '40vw', '30vw']
}}
/>
)}
</Box>
)
})}
{isLoading
? [0, 1, 2, 3].map((key) => {
return (
<Box
key={key}
flex="0 0 auto"
width={itemWidth}
style={{scrollSnapAlign: 'start'}}
>
<Stack data-testid="product-scroller-item-skeleton">
<AspectRatio ratio={1}>
<Skeleton />
</AspectRatio>
<Stack spacing={2}>
<Skeleton width="150px" height={5} />
<Skeleton width="75px" height={5} />
</Stack>
</Stack>
</Box>
)
})
: products.map((product, idx) => {
return (
<Box
key={product?.id || idx}
flex="0 0 auto"
width={itemWidth}
style={{scrollSnapAlign: 'start'}}
>
<ProductTile
data-testid="product-scroller-item"
product={product}
{...(typeof productTileProps === 'function'
? {...productTileProps(product)}
: {...productTileProps})}
dynamicImageProps={{
widths: ['70vw', '70vw', '40vw', '30vw']
}}
/>
</Box>
)
})}
</Stack>
</Stack>

{products?.length > 3 && (
{!isLoading && products?.length > 3 && (
<>
<Box
display={{
Expand All @@ -130,7 +142,10 @@ const ProductScroller = forwardRef(
>
<IconButton
data-testid="product-scroller-nav-left"
aria-label="Scroll products left"
aria-label={intl.formatMessage({
id: 'product_scroller.assistive_msg.scroll_left',
defaultMessage: 'Scroll products left'
})}
icon={<ChevronLeftIcon color="black" />}
borderRadius="full"
colorScheme="whiteAlpha"
Expand All @@ -150,7 +165,10 @@ const ProductScroller = forwardRef(
>
<IconButton
data-testid="product-scroller-nav-right"
aria-label="Scroll products right"
aria-label={intl.formatMessage({
id: 'product_scroller.assistive_msg.scroll_right',
defaultMessage: 'Scroll products right'
})}
icon={<ChevronRightIcon color="black" />}
borderRadius="full"
colorScheme="whiteAlpha"
Expand Down
23 changes: 18 additions & 5 deletions packages/template-retail-react-app/app/components/product-tile/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,23 @@ const ProductTile = (props) => {
}}
>
<IconButtonWithRegistration
aria-label={intl.formatMessage({
id: 'product_tile.assistive_msg.wishlist',
defaultMessage: 'Wishlist'
})}
aria-label={
isFavourite
? intl.formatMessage(
{
id: 'product_tile.assistive_msg.add_to_wishlist',
defaultMessage: 'Add {product} to wishlist'
},
{product: localizedProductName}
)
: intl.formatMessage(
{
id: 'product_tile.assistive_msg.remove_from wishlist',
defaultMessage: 'Remove {product} from wishlist'
},
{product: localizedProductName}
)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The order of the messages should be reversed: if it's favourite, then clicking the icon means removing the product from wishlist.

icon={isFavourite ? <HeartSolidIcon /> : <HeartIcon />}
{...styles.favIcon}
disabled={isFavouriteLoading}
Expand Down Expand Up @@ -190,7 +203,7 @@ ProductTile.propTypes = {
*/
enableFavourite: PropTypes.bool,
/**
* Display the product as a faviourite.
* Display the product as a favourite.
*/
isFavourite: PropTypes.bool,
/**
Expand Down
38 changes: 36 additions & 2 deletions packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2301,10 +2301,44 @@
"value": "sortOption"
}
],
"product_tile.assistive_msg.wishlist": [
"product_scroller.assistive_msg.scroll_left": [
{
"type": 0,
"value": "Wishlist"
"value": "Scroll products left"
}
],
"product_scroller.assistive_msg.scroll_right": [
{
"type": 0,
"value": "Scroll products right"
}
],
"product_tile.assistive_msg.add_to_wishlist": [
{
"type": 0,
"value": "Add "
},
{
"type": 1,
"value": "product"
},
{
"type": 0,
"value": " to wishlist"
}
],
"product_tile.assistive_msg.remove_from wishlist": [
{
"type": 0,
"value": "Remove "
},
{
"type": 1,
"value": "product"
},
{
"type": 0,
"value": " from wishlist"
}
],
"product_tile.label.starting_at_price": [
Expand Down
38 changes: 36 additions & 2 deletions packages/template-retail-react-app/app/static/translations/compiled/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2301,10 +2301,44 @@
"value": "sortOption"
}
],
"product_tile.assistive_msg.wishlist": [
"product_scroller.assistive_msg.scroll_left": [
{
"type": 0,
"value": "Wishlist"
"value": "Scroll products left"
}
],
"product_scroller.assistive_msg.scroll_right": [
{
"type": 0,
"value": "Scroll products right"
}
],
"product_tile.assistive_msg.add_to_wishlist": [
{
"type": 0,
"value": "Add "
},
{
"type": 1,
"value": "product"
},
{
"type": 0,
"value": " to wishlist"
}
],
"product_tile.assistive_msg.remove_from wishlist": [
{
"type": 0,
"value": "Remove "
},
{
"type": 1,
"value": "product"
},
{
"type": 0,
"value": " from wishlist"
}
],
"product_tile.label.starting_at_price": [
Expand Down
62 changes: 60 additions & 2 deletions packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4925,14 +4925,72 @@
"value": "]"
}
],
"product_tile.assistive_msg.wishlist": [
"product_scroller.assistive_msg.scroll_left": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Ẇīşħŀīşŧ"
"value": "Şƈřǿǿŀŀ ƥřǿǿḓŭŭƈŧş ŀḗḗƒŧ"
},
{
"type": 0,
"value": "]"
}
],
"product_scroller.assistive_msg.scroll_right": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Şƈřǿǿŀŀ ƥřǿǿḓŭŭƈŧş řīɠħŧ"
},
{
"type": 0,
"value": "]"
}
],
"product_tile.assistive_msg.add_to_wishlist": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Ȧḓḓ "
},
{
"type": 1,
"value": "product"
},
{
"type": 0,
"value": " ŧǿǿ ẇīşħŀīşŧ"
},
{
"type": 0,
"value": "]"
}
],
"product_tile.assistive_msg.remove_from wishlist": [
{
"type": 0,
"value": "["
},
{
"type": 0,
"value": "Řḗḗḿǿǿṽḗḗ "
},
{
"type": 1,
"value": "product"
},
{
"type": 0,
"value": " ƒřǿǿḿ ẇīşħŀīşŧ"
},
{
"type": 0,
Expand Down
13 changes: 11 additions & 2 deletions packages/template-retail-react-app/translations/en-GB.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -996,8 +996,17 @@
"product_list.select.sort_by": {
"defaultMessage": "Sort By: {sortOption}"
},
"product_tile.assistive_msg.wishlist": {
"defaultMessage": "Wishlist"
"product_scroller.assistive_msg.scroll_left": {
"defaultMessage": "Scroll products left"
},
"product_scroller.assistive_msg.scroll_right": {
"defaultMessage": "Scroll products right"
},
"product_tile.assistive_msg.add_to_wishlist": {
"defaultMessage": "Add {product} to wishlist"
},
"product_tile.assistive_msg.remove_from wishlist": {
"defaultMessage": "Remove {product} from wishlist"
},
"product_tile.label.starting_at_price": {
"defaultMessage": "Starting at {price}"
Expand Down
13 changes: 11 additions & 2 deletions packages/template-retail-react-app/translations/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -996,8 +996,17 @@
"product_list.select.sort_by": {
"defaultMessage": "Sort By: {sortOption}"
},
"product_tile.assistive_msg.wishlist": {
"defaultMessage": "Wishlist"
"product_scroller.assistive_msg.scroll_left": {
"defaultMessage": "Scroll products left"
},
"product_scroller.assistive_msg.scroll_right": {
"defaultMessage": "Scroll products right"
},
"product_tile.assistive_msg.add_to_wishlist": {
"defaultMessage": "Add {product} to wishlist"
},
"product_tile.assistive_msg.remove_from wishlist": {
"defaultMessage": "Remove {product} from wishlist"
},
"product_tile.label.starting_at_price": {
"defaultMessage": "Starting at {price}"
Expand Down