@salesforce/retail-react-app 2.2.0 → 2.3.0-nightly-20231212080144

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## v2.3.0-dev (Nov 8, 2023)
+### Accessibility improvements
+
+- Change radio refinements (for example, filtering by Price) from radio inputs to styled buttons [#1605](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1605)
+
 ## v2.2.0 (Nov 8, 2023)
 
 ### Accessibility Improvements
@@ -14,12 +19,14 @@
 - Improve keyboard accessibility of product scroller [#1559](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1559)
 - Fix focus indicator for hero features links on homepage [#1561](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1561)
 - Ensure color is not the sole means of communicating information [#1570](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1570)
+- Improve keyboard accessibility of account menu and nav bar [#1572](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1572)
 
 ### Other Features
 
 - Add [Active Data](https://help.salesforce.com/s/articleView?id=cc.b2c_active_data_attributes.htm&type=5) files, update pages (app index.jsx, product list and product details pages) to trigger events on product category and product detail views [#1555](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1555)
 - Replace max-age with s-maxage to only cache shared caches [#1564](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1564)
 - Implement gift option for basket [#1546](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1546)
+- Added option to specify `isLoginPage` function to the `withRegistration` component. The default behavior is "all pages ending in `/login`". [#1572](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1572)
 - Update `extract-default-messages` script to support multiple locales [#1574](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1574)
 - Update engine compatibility to include npm 10 [#1597](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1597)
 - Add support for localization in icon component [#1609](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1609)

package/app/components/_app/index.jsx

@@ -18,7 +18,6 @@ import {
     useAccessToken,
     useCategory,
     useCommerceApi,
-    useCustomerType,
     useCustomerBaskets,
     useShopperBasketsMutation
 } from '@salesforce/commerce-sdk-react'
@@ -123,7 +122,6 @@ const App = (props) => {
     const history = useHistory()
     const location = useLocation()
     const authModal = useAuthModal()
-    const {isRegistered} = useCustomerType()
     const {site, locale, buildUrl} = useMultiSite()
 
     const [isOnline, setIsOnline] = useState(true)
@@ -257,18 +255,13 @@ const App = (props) => {
     }
 
     const onAccountClick = () => {
-        // Link to account page for registered customer, open auth modal otherwise
-        if (isRegistered) {
-            const path = buildUrl('/account')
-            history.push(path)
-        } else {
-            // if they already are at the login page, do not show login modal
-            if (new RegExp(`^/login$`).test(location.pathname)) return
-            authModal.onOpen()
-        }
+        // Link to account page if registered; Header component will show auth modal for guest users
+        const path = buildUrl('/account')
+        history.push(path)
     }
 
     const onWishlistClick = () => {
+        // Link to wishlist page if registered; Header component will show auth modal for guest users
         const path = buildUrl('/account/wishlist')
         history.push(path)
     }

package/app/components/field/index.jsx

@@ -19,6 +19,7 @@ import {
     Checkbox
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {VisibilityIcon, VisibilityOffIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {useIntl} from 'react-intl'
 
 const Field = ({
     name,
@@ -35,8 +36,18 @@ const Field = ({
     helpText,
     children
 }) => {
+    const intl = useIntl()
     const [hidePassword, setHidePassword] = useState(true)
     const PasswordIcon = hidePassword ? VisibilityIcon : VisibilityOffIcon
+    const passwordIconLabel = hidePassword
+        ? intl.formatMessage({
+              id: 'field.password.assistive_msg.show_password',
+              defaultMessage: 'Show password'
+          })
+        : intl.formatMessage({
+              id: 'field.password.assistive_msg.hide_password',
+              defaultMessage: 'Hide password'
+          })
     const inputType =
         type === 'password' && hidePassword ? 'password' : type === 'password' ? 'text' : type
     return (
@@ -51,8 +62,7 @@ const Field = ({
 
                 return (
                     <FormControl id={name} isInvalid={error}>
-                        {!['checkbox', 'radio'].includes(type) &&
-                            type !== 'hidden' &&
+                        {!['checkbox', 'radio', 'hidden'].includes(type) &&
                             (formLabel || <FormLabel>{label}</FormLabel>)}
 
                         <InputGroup>
@@ -83,7 +93,7 @@ const Field = ({
                                 <InputRightElement>
                                     <IconButton
                                         variant="ghosted"
-                                        aria-label="Show password"
+                                        aria-label={passwordIconLabel}
                                         icon={<PasswordIcon color="gray.500" boxSize={6} />}
                                         onClick={() => setHidePassword(!hidePassword)}
                                     />
@@ -120,7 +130,7 @@ const Field = ({
                             {children}
                         </InputGroup>
 
-                        {error && !type !== 'hidden' && (
+                        {error && type !== 'hidden' && (
                             <FormErrorMessage color="red.600">{error.message}</FormErrorMessage>
                         )}
 

package/app/components/header/index.jsx

@@ -49,8 +49,6 @@ import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 import {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
 
-const ENTER_KEY = 'Enter'
-
 const IconButtonWithRegistration = withRegistration(IconButton)
 /**
  * The header is the main source for accessing
@@ -86,7 +84,13 @@ const Header = ({
     const {isRegistered} = useCustomerType()
     const logout = useAuthHelper(AuthHelpers.Logout)
     const navigate = useNavigation()
-    const {isOpen, onClose, onOpen} = useDisclosure()
+    const {
+        getButtonProps: getAccountMenuButtonProps,
+        getDisclosureProps: getAccountMenuDisclosureProps,
+        isOpen: isAccountMenuOpen,
+        onClose: onAccountMenuClose,
+        onOpen: onAccountMenuOpen
+    } = useDisclosure()
     const [isDesktop] = useMediaQuery('(min-width: 992px)')
 
     const [showLoading, setShowLoading] = useState(false)
@@ -103,15 +107,10 @@ const Header = ({
         setShowLoading(false)
     }
 
-    const keyMap = {
-        Escape: () => onClose(),
-        Enter: () => onOpen()
-    }
-
     const handleIconsMouseLeave = () => {
         // don't close the menu if users enter the popover content
         setTimeout(() => {
-            if (!hasEnterPopoverContent.current) onClose()
+            if (!hasEnterPopoverContent.current) onAccountMenuClose()
         }, 100)
     }
 
@@ -154,39 +153,37 @@ const Header = ({
                             {...styles.search}
                         />
                     </Box>
-                    <AccountIcon
-                        {...styles.accountIcon}
-                        tabIndex={0}
-                        onMouseOver={isDesktop ? onOpen : noop}
-                        onKeyDown={(e) => {
-                            e.key === ENTER_KEY ? onMyAccountClick() : noop
-                        }}
-                        onClick={onMyAccountClick}
+                    <IconButtonWithRegistration
+                        icon={<AccountIcon {...styles.accountIcon} />}
                         aria-label={intl.formatMessage({
                             id: 'header.button.assistive_msg.my_account',
                             defaultMessage: 'My account'
                         })}
+                        variant="unstyled"
+                        onClick={onMyAccountClick}
+                        onMouseOver={isDesktop ? onAccountMenuOpen : noop}
                     />
 
                     {isRegistered && isHydrated() && (
                         <Popover
                             isLazy
                             arrowSize={15}
-                            isOpen={isOpen}
+                            isOpen={isAccountMenuOpen}
                             placement="bottom-end"
-                            onClose={onClose}
-                            onOpen={onOpen}
+                            onClose={onAccountMenuClose}
+                            onOpen={onAccountMenuOpen}
                         >
                             <PopoverTrigger>
-                                <ChevronDownIcon
-                                    aria-label="My account trigger"
+                                <IconButton
+                                    aria-label={intl.formatMessage({
+                                        id: 'header.button.assistive_msg.my_account_menu',
+                                        defaultMessage: 'Open account menu'
+                                    })}
+                                    icon={<ChevronDownIcon {...styles.arrowDown} />}
+                                    variant="unstyled"
+                                    {...getAccountMenuButtonProps()}
+                                    onMouseOver={onAccountMenuOpen}
                                     onMouseLeave={handleIconsMouseLeave}
-                                    onKeyDown={(e) => {
-                                        keyMap[e.key]?.(e)
-                                    }}
-                                    {...styles.arrowDown}
-                                    onMouseOver={onOpen}
-                                    tabIndex={0}
                                 />
                             </PopoverTrigger>
 
@@ -194,11 +191,12 @@ const Header = ({
                                 {...styles.popoverContent}
                                 onMouseLeave={() => {
                                     hasEnterPopoverContent.current = false
-                                    onClose()
+                                    onAccountMenuClose()
                                 }}
                                 onMouseOver={() => {
                                     hasEnterPopoverContent.current = true
                                 }}
+                                {...getAccountMenuDisclosureProps()}
                             >
                                 <PopoverArrow />
                                 <PopoverHeader>

package/app/components/header/index.test.js

@@ -62,11 +62,11 @@ test('renders Header', async () => {
     renderWithProviders(<Header />)
 
     await waitFor(() => {
-        const menu = document.querySelector('button[aria-label="Menu"]')
-        const logo = document.querySelector('button[aria-label="Logo"]')
-        const account = document.querySelector('svg[aria-label="My account"]')
-        const cart = document.querySelector('button[aria-label="My cart, number of items: 0"]')
-        const wishlist = document.querySelector('button[aria-label="Wishlist"]')
+        const menu = screen.getByLabelText('Menu')
+        const logo = screen.getByLabelText('Logo')
+        const account = screen.getByLabelText('My account')
+        const cart = screen.getByLabelText('My cart, number of items: 0')
+        const wishlist = screen.getByLabelText('Wishlist')
         const searchInput = document.querySelector('input[type="search"]')
         expect(menu).toBeInTheDocument()
         expect(logo).toBeInTheDocument()
@@ -91,10 +91,10 @@ test('renders Header with event handlers', async () => {
         />
     )
     await waitFor(() => {
-        const menu = document.querySelector('button[aria-label="Menu"]')
-        const logo = document.querySelector('button[aria-label="Logo"]')
-        const account = document.querySelector('svg[aria-label="My account"]')
-        const cart = document.querySelector('button[aria-label="My cart, number of items: 0"]')
+        const menu = screen.getByLabelText('Menu')
+        const logo = screen.getByLabelText('Logo')
+        const account = screen.getByLabelText('My account')
+        const cart = screen.getByLabelText('My cart, number of items: 0')
         expect(menu).toBeInTheDocument()
         fireEvent.click(menu)
         expect(onMenuClick).toHaveBeenCalledTimes(1)
@@ -124,7 +124,7 @@ test.each(testBaskets)(
         renderWithProviders(<Header />)
 
         await waitFor(() => {
-            const cart = document.querySelector('button[aria-label="My cart, number of items: 0"]')
+            const cart = screen.getByLabelText('My cart, number of items: 0')
             const badge = document.querySelector(
                 'button[aria-label="My cart, number of items: 0"] .chakra-badge'
             )
@@ -141,9 +141,7 @@ test('renders cart badge when basket is loaded', async () => {
 
     await waitFor(() => {
         // Look for badge.
-        const badge = document.querySelector(
-            'button[aria-label="My cart, number of items: 2"] .chakra-badge'
-        )
+        const badge = screen.getByLabelText('My cart, number of items: 2')
         expect(badge).toBeInTheDocument()
     })
 })
@@ -156,10 +154,10 @@ test('route to account page when an authenticated users click on account icon',
 
     await waitFor(() => {
         // Look for account icon
-        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        const accountTrigger = screen.getByLabelText('Open account menu')
         expect(accountTrigger).toBeInTheDocument()
     })
-    const accountIcon = document.querySelector('svg[aria-label="My account"]')
+    const accountIcon = screen.getByLabelText('My account')
     fireEvent.click(accountIcon)
     await waitFor(() => {
         expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))
@@ -181,7 +179,7 @@ test('route to wishlist page when an authenticated users click on wishlist icon'
 
     await waitFor(() => {
         // Look for account icon
-        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        const accountTrigger = screen.getByLabelText('Open account menu')
         expect(accountTrigger).toBeInTheDocument()
     })
     const wishlistIcon = screen.getByRole('button', {name: /wishlist/i})
@@ -207,10 +205,10 @@ test('shows dropdown menu when an authenticated users hover on the account icon'
 
     await waitFor(() => {
         // Look for account icon
-        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        const accountTrigger = screen.getByLabelText('Open account menu')
         expect(accountTrigger).toBeInTheDocument()
     })
-    const accountIcon = document.querySelector('svg[aria-label="My account"]')
+    const accountIcon = screen.getByLabelText('My account')
     fireEvent.click(accountIcon)
     await waitFor(() => {
         expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))

package/app/components/list-menu/index.jsx

@@ -225,6 +225,7 @@ const ListMenu = ({root, maxColumns = MAXIMUM_NUMBER_COLUMNS}) => {
     const theme = useTheme()
     const {baseStyle} = theme.components.ListMenu
     const [ariaBusy, setAriaBusy] = useState(true)
+    const intl = useIntl()
 
     useEffect(() => {
         setAriaBusy(false)
@@ -233,7 +234,10 @@ const ListMenu = ({root, maxColumns = MAXIMUM_NUMBER_COLUMNS}) => {
     return (
         <nav
             id="list-menu"
-            aria-label="main"
+            aria-label={intl.formatMessage({
+                id: 'list_menu.nav.assistive_msg',
+                defaultMessage: 'Main navigation'
+            })}
             aria-live="polite"
             aria-busy={ariaBusy}
             aria-atomic="true"

package/app/components/list-menu/index.test.js

@@ -19,7 +19,7 @@ describe('ListMenu', () => {
         const categoryTrigger = screen.getByText(/Mens/i)
         await user.hover(categoryTrigger)
         expect(categoryTrigger).toBeInTheDocument()
-        expect(screen.getByRole('navigation', {name: 'main'})).toBeInTheDocument()
+        expect(screen.getByRole('navigation', {name: 'Main navigation'})).toBeInTheDocument()
         const suit = screen.getByText(/suits/i)
         expect(suit).toBeInTheDocument()
     })

package/app/components/pagination/index.jsx

@@ -53,7 +53,10 @@ const Pagination = (props) => {
                 // as intended, the workaround is to use the current url when its disabled.
                 href={prev || currentURL}
                 to={prev || currentURL}
-                aria-label="Previous Page"
+                aria-label={intl.formatMessage({
+                    id: 'pagination.link.prev.assistive_msg',
+                    defaultMessage: 'Previous Page'
+                })}
                 aria-disabled={!prev}
                 variant="link"
             >
@@ -102,7 +105,10 @@ const Pagination = (props) => {
                 // as intended, the workaround is to use the current url when its disabled.
                 href={next || currentURL}
                 to={next || currentURL}
-                aria-label="Next Page"
+                aria-label={intl.formatMessage({
+                    id: 'pagination.link.next.assistive_msg',
+                    defaultMessage: 'Next Page'
+                })}
                 aria-disabled={!next}
                 variant="link"
             >

package/app/components/with-registration/index.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2023, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
@@ -13,20 +13,31 @@ import {useLocation} from 'react-router-dom'
 import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 
-const withRegistration = (Component) => {
+/**
+ * Higher-order component that modifies the given component's `onClick` to show the login form if
+ * the user is not logged in.
+ * @param {React.Component} component Component to wrap.
+ * @param {(location: Location, locale: string) => boolean} [options.isLoginPage] Function that
+ * determines whether the current page is the "login" page, to avoid showing a duplicate modal.
+ * Defaults to all paths ending with "/login".
+ * @returns {React.Component} wrapped component
+ */
+const withRegistration = (
+    Component,
+    {isLoginPage = (loc) => loc.pathname.endsWith('/login')} = {}
+) => {
     const WrappedComponent = ({onClick = noop, ...passThroughProps}) => {
         const {data: customer} = useCurrentCustomer()
         const authModal = useAuthModal()
+        const showToast = useToast()
         const location = useLocation()
         const {formatMessage, locale} = useIntl()
-        const isLoginPage = new RegExp(`^/${locale}/login$`).test(location.pathname)
-        const showToast = useToast()
 
         const handleClick = (e) => {
             e.preventDefault()
             if (!customer.isRegistered) {
                 // Do not show auth modal if users is already on the login page
-                if (isLoginPage) {
+                if (isLoginPage(location, locale)) {
                     showToast({
                         title: formatMessage({
                             defaultMessage: 'Please sign in to continue!',

package/app/hooks/use-auth-modal.js

@@ -278,7 +278,12 @@ export const AuthModal = ({
         >
             <ModalOverlay />
             <ModalContent>
-                <ModalCloseButton />
+                <ModalCloseButton
+                    aria-label={formatMessage({
+                        id: 'auth_modal.button.close.assistive_msg',
+                        defaultMessage: 'Close login form'
+                    })}
+                />
                 <ModalBody pb={8} bg="white" paddingBottom={14} marginTop={14}>
                     {!form.formState.isSubmitSuccessful && currentView === LOGIN_VIEW && (
                         <LoginForm

package/app/page-designer/layouts/carousel/index.jsx

@@ -18,6 +18,7 @@ import {
 import {Component, regionPropType} from '@salesforce/commerce-sdk-react/components'
 import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {useEffect} from 'react'
+import {useIntl} from 'react-intl'
 
 /**
  * Display child components in a carousel slider manner. Configurations include the number of
@@ -37,6 +38,7 @@ import {useEffect} from 'react'
  * @returns {React.ReactElement} - Carousel component.
  */
 export const Carousel = (props = {}) => {
+    const intl = useIntl()
     const scrollRef = useRef()
     const breakpoint = useBreakpoint()
     const [hasOverflow, setHasOverflow] = useState(false)
@@ -172,11 +174,14 @@ export const Carousel = (props = {}) => {
                     {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */}
                     <IconButton
                         data-testid="carousel-nav-left"
-                        aria-label="Scroll carousel left"
+                        aria-label={intl.formatMessage({
+                            id: 'carousel.button.scroll_left.assistive_msg',
+                            defaultMessage: 'Scroll carousel left'
+                        })}
                         icon={<ChevronLeftIcon color="black" />}
                         borderRadius="full"
                         colorScheme="whiteAlpha"
-                        boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'}
+                        boxShadow="0 3px 10px rgb(0 0 0 / 20%) !important"
                         onClick={() => scroll(-1)}
                     />
                 </Box>
@@ -191,11 +196,14 @@ export const Carousel = (props = {}) => {
                     {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */}
                     <IconButton
                         data-testid="carousel-nav-right"
-                        aria-label="Scroll carousel right"
+                        aria-label={intl.formatMessage({
+                            id: 'carousel.button.scroll_right.assistive_msg',
+                            defaultMessage: 'Scroll carousel right'
+                        })}
                         icon={<ChevronRightIcon color="black" />}
                         borderRadius="full"
                         colorScheme="whiteAlpha"
-                        boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'}
+                        boxShadow="0 3px 10px rgb(0 0 0 / 20%) !important"
                         onClick={() => scroll(1)}
                     />
                 </Box>

package/app/pages/product-list/partials/radio-refinements.jsx

@@ -1,66 +1,74 @@
 /*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2023, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React from 'react'
-import {
-    Box,
-    Text,
-    Radio,
-    RadioGroup,
-    Stack
-} from '@salesforce/retail-react-app/app/components/shared/ui'
+import React, {useRef} from 'react'
+import {Box, Text, Radio, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 
-const RadioRefinements = ({filter, toggleFilter, selectedFilters}) => {
+const RadioRefinement = ({filter, value, toggleFilter, selectedFilters}) => {
+    const buttonRef = useRef()
+    // Because choosing a refinement is equivalent to a form submission, the best semantic choice
+    // for the refinement is a button or a link, rather than a radio input. The radio element here
+    // is purely for visual purposes, and should probably be replaced with a simple icon.
     return (
         <Box>
-            <RadioGroup
-                // The following `false` fallback is required to avoid the radio group
-                // from switching to "uncontrolled mode" when `selectedFilters` is empty.
-                value={selectedFilters[0] ?? false}
+            <Radio
+                display="inline-flex"
+                height={{base: '44px', lg: '24px'}}
+                isChecked={selectedFilters.includes(value.value)}
+                // Ideally, this "icon" would be part of the button, but doing so with a radio input
+                // triggers `onClick` twice. The radio must be separate, and therefore we must add
+                // these workarounds to prevent it from receiving focus.
+                inputProps={{'aria-hidden': true, tabIndex: -1}}
+                onClick={() => buttonRef.current?.click()}
+            />
+            <Text
+                ref={buttonRef}
+                ml={2}
+                as="button"
+                fontSize="sm"
+                onClick={() => toggleFilter(value, filter.attributeId, false, false)}
             >
-                <Stack spacing={1}>
-                    {filter.values
-                        .filter((refinementValue) => refinementValue.hitCount > 0)
-                        .map((value) => {
-                            return (
-                                <Box key={value.value}>
-                                    <Radio
-                                        display="flex"
-                                        alignItems="center"
-                                        height={{base: '44px', lg: '24px'}}
-                                        value={value.value}
-                                        onChange={() =>
-                                            toggleFilter(
-                                                value,
-                                                filter.attributeId,
-                                                selectedFilters.includes(value.value),
-                                                false
-                                            )
-                                        }
-                                        fontSize="sm"
-                                    >
-                                        <Text marginLeft={-1} fontSize="sm">
-                                            {value.label}
-                                        </Text>
-                                    </Radio>
-                                </Box>
-                            )
-                        })}
-                </Stack>
-            </RadioGroup>
+                {value.label}
+            </Text>
         </Box>
     )
 }
 
+RadioRefinement.propTypes = {
+    filter: PropTypes.object,
+    value: PropTypes.object,
+    toggleFilter: PropTypes.func,
+    selectedFilters: PropTypes.arrayOf(PropTypes.object)
+}
+
+const RadioRefinements = ({filter, toggleFilter, selectedFilters}) => {
+    return (
+        <Stack spacing={1}>
+            {filter.values.map(
+                (value) =>
+                    value.hitCount > 0 && (
+                        <RadioRefinement
+                            key={value.value}
+                            value={value}
+                            filter={filter}
+                            toggleFilter={toggleFilter}
+                            selectedFilters={selectedFilters}
+                        />
+                    )
+            )}
+        </Stack>
+    )
+}
+
 RadioRefinements.propTypes = {
     filter: PropTypes.object,
     toggleFilter: PropTypes.func,
-    selectedFilters: PropTypes.array
+    selectedFilters: PropTypes.arrayOf(PropTypes.object)
 }
 
 export default RadioRefinements

package/app/pages/product-list/partials/refinements.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2023, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
@@ -25,7 +25,8 @@ import LinkRefinements from '@salesforce/retail-react-app/app/pages/product-list
 import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
 import {FILTER_ACCORDION_SATE} from '@salesforce/retail-react-app/app/constants'
 
-const componentMap = {
+/** Map of refinement attribute IDs to the components used to display values as filter options. */
+export const componentMap = {
     cgid: LinkRefinements,
     c_refinementColor: ColorRefinements,
     c_size: SizeRefinements,

package/app/static/translations/compiled/en-GB.json

@@ -355,6 +355,12 @@
       "value": "You Might Also Like"
     }
   ],
+  "auth_modal.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Close login form"
+    }
+  ],
   "auth_modal.description.now_signed_in": [
     {
       "type": 0,
@@ -413,6 +419,18 @@
       "value": "Password Reset"
     }
   ],
+  "carousel.button.scroll_left.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Scroll carousel left"
+    }
+  ],
+  "carousel.button.scroll_right.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Scroll carousel right"
+    }
+  ],
   "cart.info.removed_from_cart": [
     {
       "type": 0,
@@ -1163,6 +1181,18 @@
       "value": "Top Sellers"
     }
   ],
+  "field.password.assistive_msg.hide_password": [
+    {
+      "type": 0,
+      "value": "Hide password"
+    }
+  ],
+  "field.password.assistive_msg.show_password": [
+    {
+      "type": 0,
+      "value": "Show password"
+    }
+  ],
   "footer.column.account": [
     {
       "type": 0,
@@ -1375,6 +1405,12 @@
       "value": "My account"
     }
   ],
+  "header.button.assistive_msg.my_account_menu": [
+    {
+      "type": 0,
+      "value": "Open account menu"
+    }
+  ],
   "header.button.assistive_msg.my_cart_with_num_items": [
     {
       "type": 0,
@@ -1613,6 +1649,12 @@
       "value": "Please select all your options above"
     }
   ],
+  "list_menu.nav.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Main navigation"
+    }
+  ],
   "locale_text.message.ar-SA": [
     {
       "type": 0,
@@ -2123,12 +2165,24 @@
       "value": "Next"
     }
   ],
+  "pagination.link.next.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Next Page"
+    }
+  ],
   "pagination.link.prev": [
     {
       "type": 0,
       "value": "Prev"
     }
   ],
+  "pagination.link.prev.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Previous Page"
+    }
+  ],
   "password_card.info.password_updated": [
     {
       "type": 0,

package/app/static/translations/compiled/en-US.json

@@ -355,6 +355,12 @@
       "value": "You Might Also Like"
     }
   ],
+  "auth_modal.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Close login form"
+    }
+  ],
   "auth_modal.description.now_signed_in": [
     {
       "type": 0,
@@ -413,6 +419,18 @@
       "value": "Password Reset"
     }
   ],
+  "carousel.button.scroll_left.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Scroll carousel left"
+    }
+  ],
+  "carousel.button.scroll_right.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Scroll carousel right"
+    }
+  ],
   "cart.info.removed_from_cart": [
     {
       "type": 0,
@@ -1163,6 +1181,18 @@
       "value": "Top Sellers"
     }
   ],
+  "field.password.assistive_msg.hide_password": [
+    {
+      "type": 0,
+      "value": "Hide password"
+    }
+  ],
+  "field.password.assistive_msg.show_password": [
+    {
+      "type": 0,
+      "value": "Show password"
+    }
+  ],
   "footer.column.account": [
     {
       "type": 0,
@@ -1375,6 +1405,12 @@
       "value": "My account"
     }
   ],
+  "header.button.assistive_msg.my_account_menu": [
+    {
+      "type": 0,
+      "value": "Open account menu"
+    }
+  ],
   "header.button.assistive_msg.my_cart_with_num_items": [
     {
       "type": 0,
@@ -1613,6 +1649,12 @@
       "value": "Please select all your options above"
     }
   ],
+  "list_menu.nav.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Main navigation"
+    }
+  ],
   "locale_text.message.ar-SA": [
     {
       "type": 0,
@@ -2123,12 +2165,24 @@
       "value": "Next"
     }
   ],
+  "pagination.link.next.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Next Page"
+    }
+  ],
   "pagination.link.prev": [
     {
       "type": 0,
       "value": "Prev"
     }
   ],
+  "pagination.link.prev.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Previous Page"
+    }
+  ],
   "password_card.info.password_updated": [
     {
       "type": 0,

package/app/static/translations/compiled/en-XA.json

@@ -739,6 +739,20 @@
       "value": "]"
     }
   ],
+  "auth_modal.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈŀǿǿşḗḗ ŀǿǿɠīƞ ƒǿǿřḿ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "auth_modal.description.now_signed_in": [
     {
       "type": 0,
@@ -845,6 +859,34 @@
       "value": "]"
     }
   ],
+  "carousel.button.scroll_left.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Şƈřǿǿŀŀ ƈȧȧřǿǿŭŭşḗḗŀ ŀḗḗƒŧ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "carousel.button.scroll_right.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Şƈřǿǿŀŀ ƈȧȧřǿǿŭŭşḗḗŀ řīɠħŧ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "cart.info.removed_from_cart": [
     {
       "type": 0,
@@ -2411,6 +2453,34 @@
       "value": "]"
     }
   ],
+  "field.password.assistive_msg.hide_password": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ħīḓḗḗ ƥȧȧşşẇǿǿřḓ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "field.password.assistive_msg.show_password": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Şħǿǿẇ ƥȧȧşşẇǿǿřḓ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "footer.column.account": [
     {
       "type": 0,
@@ -2863,6 +2933,20 @@
       "value": "]"
     }
   ],
+  "header.button.assistive_msg.my_account_menu": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ǿƥḗḗƞ ȧȧƈƈǿǿŭŭƞŧ ḿḗḗƞŭŭ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "header.button.assistive_msg.my_cart_with_num_items": [
     {
       "type": 0,
@@ -3397,6 +3481,20 @@
       "value": "]"
     }
   ],
+  "list_menu.nav.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḿȧȧīƞ ƞȧȧṽīɠȧȧŧīǿǿƞ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "locale_text.message.ar-SA": [
     {
       "type": 0,
@@ -4531,6 +4629,20 @@
       "value": "]"
     }
   ],
+  "pagination.link.next.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƞḗḗẋŧ Ƥȧȧɠḗḗ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "pagination.link.prev": [
     {
       "type": 0,
@@ -4545,6 +4657,20 @@
       "value": "]"
     }
   ],
+  "pagination.link.prev.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƥřḗḗṽīǿǿŭŭş Ƥȧȧɠḗḗ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "password_card.info.password_updated": [
     {
       "type": 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "2.2.0",
+  "version": "2.3.0-nightly-20231212080144",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -45,10 +45,10 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "1.2.0",
-    "@salesforce/pwa-kit-dev": "3.3.0",
-    "@salesforce/pwa-kit-react-sdk": "3.3.0",
-    "@salesforce/pwa-kit-runtime": "3.3.0",
+    "@salesforce/commerce-sdk-react": "1.3.0-nightly-20231212080144",
+    "@salesforce/pwa-kit-dev": "3.4.0-nightly-20231212080144",
+    "@salesforce/pwa-kit-react-sdk": "3.4.0-nightly-20231212080144",
+    "@salesforce/pwa-kit-runtime": "3.4.0-nightly-20231212080144",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -100,5 +100,5 @@
       "maxSize": "320 kB"
     }
   ],
-  "gitHead": "93894bb7d823f3510e10affdb1eb8e6750b25822"
+  "gitHead": "dbf0d4f2e45234cfc395f412a1fa94c364a877c2"
 }

package/translations/en-GB.json

@@ -144,6 +144,9 @@
   "add_to_cart_modal.recommended_products.title.might_also_like": {
     "defaultMessage": "You Might Also Like"
   },
+  "auth_modal.button.close.assistive_msg": {
+    "defaultMessage": "Close login form"
+  },
   "auth_modal.description.now_signed_in": {
     "defaultMessage": "You're now signed in."
   },
@@ -162,6 +165,12 @@
   "auth_modal.password_reset_success.title.password_reset": {
     "defaultMessage": "Password Reset"
   },
+  "carousel.button.scroll_left.assistive_msg": {
+    "defaultMessage": "Scroll carousel left"
+  },
+  "carousel.button.scroll_right.assistive_msg": {
+    "defaultMessage": "Scroll carousel right"
+  },
   "cart.info.removed_from_cart": {
     "defaultMessage": "Item removed from cart"
   },
@@ -471,6 +480,12 @@
   "empty_search_results.recommended_products.title.top_sellers": {
     "defaultMessage": "Top Sellers"
   },
+  "field.password.assistive_msg.hide_password": {
+    "defaultMessage": "Hide password"
+  },
+  "field.password.assistive_msg.show_password": {
+    "defaultMessage": "Show password"
+  },
   "footer.column.account": {
     "defaultMessage": "Account"
   },
@@ -561,6 +576,9 @@
   "header.button.assistive_msg.my_account": {
     "defaultMessage": "My account"
   },
+  "header.button.assistive_msg.my_account_menu": {
+    "defaultMessage": "Open account menu"
+  },
   "header.button.assistive_msg.my_cart_with_num_items": {
     "defaultMessage": "My cart, number of items: {numItems}"
   },
@@ -674,6 +692,9 @@
   "lCPCxk": {
     "defaultMessage": "Please select all your options above"
   },
+  "list_menu.nav.assistive_msg": {
+    "defaultMessage": "Main navigation"
+  },
   "locale_text.message.ar-SA": {
     "defaultMessage": "Arabic (Saudi Arabia)"
   },
@@ -909,9 +930,15 @@
   "pagination.link.next": {
     "defaultMessage": "Next"
   },
+  "pagination.link.next.assistive_msg": {
+    "defaultMessage": "Next Page"
+  },
   "pagination.link.prev": {
     "defaultMessage": "Prev"
   },
+  "pagination.link.prev.assistive_msg": {
+    "defaultMessage": "Previous Page"
+  },
   "password_card.info.password_updated": {
     "defaultMessage": "Password updated"
   },

package/translations/en-US.json

@@ -144,6 +144,9 @@
   "add_to_cart_modal.recommended_products.title.might_also_like": {
     "defaultMessage": "You Might Also Like"
   },
+  "auth_modal.button.close.assistive_msg": {
+    "defaultMessage": "Close login form"
+  },
   "auth_modal.description.now_signed_in": {
     "defaultMessage": "You're now signed in."
   },
@@ -162,6 +165,12 @@
   "auth_modal.password_reset_success.title.password_reset": {
     "defaultMessage": "Password Reset"
   },
+  "carousel.button.scroll_left.assistive_msg": {
+    "defaultMessage": "Scroll carousel left"
+  },
+  "carousel.button.scroll_right.assistive_msg": {
+    "defaultMessage": "Scroll carousel right"
+  },
   "cart.info.removed_from_cart": {
     "defaultMessage": "Item removed from cart"
   },
@@ -471,6 +480,12 @@
   "empty_search_results.recommended_products.title.top_sellers": {
     "defaultMessage": "Top Sellers"
   },
+  "field.password.assistive_msg.hide_password": {
+    "defaultMessage": "Hide password"
+  },
+  "field.password.assistive_msg.show_password": {
+    "defaultMessage": "Show password"
+  },
   "footer.column.account": {
     "defaultMessage": "Account"
   },
@@ -561,6 +576,9 @@
   "header.button.assistive_msg.my_account": {
     "defaultMessage": "My account"
   },
+  "header.button.assistive_msg.my_account_menu": {
+    "defaultMessage": "Open account menu"
+  },
   "header.button.assistive_msg.my_cart_with_num_items": {
     "defaultMessage": "My cart, number of items: {numItems}"
   },
@@ -674,6 +692,9 @@
   "lCPCxk": {
     "defaultMessage": "Please select all your options above"
   },
+  "list_menu.nav.assistive_msg": {
+    "defaultMessage": "Main navigation"
+  },
   "locale_text.message.ar-SA": {
     "defaultMessage": "Arabic (Saudi Arabia)"
   },
@@ -909,9 +930,15 @@
   "pagination.link.next": {
     "defaultMessage": "Next"
   },
+  "pagination.link.next.assistive_msg": {
+    "defaultMessage": "Next Page"
+  },
   "pagination.link.prev": {
     "defaultMessage": "Prev"
   },
+  "pagination.link.prev.assistive_msg": {
+    "defaultMessage": "Previous Page"
+  },
   "password_card.info.password_updated": {
     "defaultMessage": "Password updated"
   },