From 04d05cf731a908d1c739191d7d6f6dc854f836cc Mon Sep 17 00:00:00 2001
From: Brendan Offer <brendanoffer@gmail.com>
Date: Mon, 12 Apr 2021 21:25:08 -0400
Subject: [PATCH] make the cart icon tab focusable

currently the cart icon is not focusable. updated to be a button with a meaningful aria-label
---
 components/common/UserNav/UserNav.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx
index 4d00970a9..013de9707 100644
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@@ -26,9 +26,16 @@ const UserNav: FC<Props> = ({ className }) => {
     <nav className={cn(s.root, className)}>
       <div className={s.mainContainer}>
         <ul className={s.list}>
-          <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+          <li className={s.item}>
+            <button
+              aria-label={`Cart items: ${itemsCount}`}
+              onClick={toggleSidebar}
+            >
+              <Bag />
+              {itemsCount > 0 && (
+                <span className={s.bagCount}>{itemsCount}</span>
+              )}
+            </button>
           </li>
           {process.env.COMMERCE_WISHLIST_ENABLED && (
             <li className={s.item}>