@W-12627180@ Improve keyboard accessibility of product scroller

packages/template-retail-react-app/CHANGELOG.md

@@ -1,14 +1,22 @@
 ## v2.2.0-dev (Nov 3, 2023)
 
-- (A11y) Ensure active user interface components have sufficient contrast [#1534](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1534)
-- (A11y) Ensure form fields and icons have accessible labels [#1526](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1526)
-- Implement gift option for basket [#1546]https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1546
-- (A11y) Ensure all interactive functionality is operable with the keyboard [#1546]https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1546
-- (A11y) Fix improper nesting of elements in product tile [#1541](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1541)
+### Accessibility Improvements
+
+<!-- Order by Pull Request ID! -->
+- Ensure form fields and icons have accessible labels [#1526](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1526)
+- Ensure active user interface components have sufficient contrast [#1534](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1534)
+- Fix outline on keyboard focus [#1536](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1536/files)
+- 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)
+- Improve keyboard accessibility of product scroller [#1559](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1559)
+
+### Other Features
+
+- Implement gift option for basket [#1546](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1546)
 
 ## v2.1.0 (Nov 3, 2023)
 
-- Support Storefront Preview 
+- Support Storefront Preview
   - [#1413](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1413)
   - [#1440](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1440)
 - Show discounted and strikethrough prices when there is a promotion on product detail page [1455](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1455)

packages/template-retail-react-app/app/components/product-scroller/index.jsx

@@ -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
@@ -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.
@@ -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},
@@ -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, 4].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={{
@@ -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"
@@ -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"

packages/template-retail-react-app/app/components/product-tile/index.jsx

@@ -135,10 +135,23 @@ const ProductTile = (props) => {
                     }}
                 >
                     <IconButtonWithRegistration
-                        aria-label={intl.formatMessage({
-                            id: 'product_tile.assistive_msg.wishlist',
-                            defaultMessage: 'Wishlist'
-                        })}
+                        aria-label={
+                            intl.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}
+                                  )
+                        }
                         icon={isFavourite ? <HeartSolidIcon /> : <HeartIcon />}
                         {...styles.favIcon}
                         disabled={isFavouriteLoading}
@@ -190,7 +203,7 @@ ProductTile.propTypes = {
      */
     enableFavourite: PropTypes.bool,
     /**
-     * Display the product as a faviourite.
+     * Display the product as a favourite.
      */
     isFavourite: PropTypes.bool,
     /**

packages/template-retail-react-app/app/static/translations/compiled/en-GB.json

@@ -2295,10 +2295,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": [

packages/template-retail-react-app/app/static/translations/compiled/en-US.json

@@ -2295,10 +2295,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": [

packages/template-retail-react-app/app/static/translations/compiled/en-XA.json

@@ -4911,14 +4911,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,

packages/template-retail-react-app/translations/en-GB.json

@@ -993,8 +993,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}"