@W-12627135 - Fix ARIA for ListMenuTrigger Component (#1600)

* Fix aria for popover trigger * Update CHANGELOG.md
SalesforceCommerceCloud · Dec 6, 2023 · 7af089b · 7af089b
1 parent 14b9c5d
commit 7af089b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Accessibility Improvements
 
 <!-- Order by Pull Request ID! -->
+- Ensure the ListMenuTrigger component applies ARIA attributes to the correct element for the trigger icon [#1600](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1600)
 - 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)

diff --git a/packages/template-retail-react-app/app/components/list-menu/index.jsx b/packages/template-retail-react-app/app/components/list-menu/index.jsx
@@ -69,21 +69,21 @@ const ListMenuTrigger = ({item, name, isOpen, onOpen, onClose, hasItems}) => {
                 {name}
             </Link>
 
-            <Link
-                as={RouteLink}
-                to={'#'}
-                onMouseOver={onOpen}
-                onKeyDown={(e) => {
-                    keyMap[e.key]?.(e)
-                }}
-                {...baseStyle.listMenuTriggerLinkIcon}
-            >
-                <PopoverTrigger>
+            <PopoverTrigger>
+                <Link
+                    as={RouteLink}
+                    to={'#'}
+                    onMouseOver={onOpen}
+                    onKeyDown={(e) => {
+                        keyMap[e.key]?.(e)
+                    }}
+                    {...baseStyle.listMenuTriggerLinkIcon}
+                >
                     <Fade in={hasItems}>
                         <ChevronIconTrigger {...baseStyle.selectedButtonIcon} />
                     </Fade>
-                </PopoverTrigger>
-            </Link>
+                </Link>
+            </PopoverTrigger>
         </Box>
     )
 }