crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-19 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

make the cart icon tab focusable

Browse Source 
currently the cart icon is not focusable. updated to be a button with a meaningful aria-label
This commit is contained in:
Brendan Offer 2021-04-12 21:25:08 -04:00
parent 1f5a65086f
commit 04d05cf731
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/common/UserNav/UserNav.tsx
View File

@ -26,9 +26,16 @@ const UserNav: FC<Props> = ({ className }) => {
<nav className={cn(s.root, className)}> <nav className={cn(s.root, className)}>
<div className={s.mainContainer}> <div className={s.mainContainer}>
<ul className={s.list}> <ul className={s.list}>
<li className={s.item} onClick={toggleSidebar}> <li className={s.item}>
<button
aria-label={`Cart items: ${itemsCount}`}
onClick={toggleSidebar}
>
<Bag /> <Bag />
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>} {itemsCount > 0 && (
<span className={s.bagCount}>{itemsCount}</span>
)}
</button>
</li> </li>
{process.env.COMMERCE_WISHLIST_ENABLED && ( {process.env.COMMERCE_WISHLIST_ENABLED && (
<li className={s.item}> <li className={s.item}>