Improve a11y on the cart and sidebar (#411)

* Improve a11y on the cart

* Fix button style

* Remove extra space

* Move cart item count to the right position

Co-authored-by: Luis Alvarez D <luis@vercel.com>

components/common/UserNav/UserNav.tsx

@@ -7,6 +7,7 @@ import useCustomer from '@framework/customer/use-customer'
 import { Avatar } from '@components/common'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
+import Button from '@components/ui/Button'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
 
@@ -26,9 +27,11 @@ const UserNav: FC<Props> = ({ className }) => {
     <nav className={cn(s.root, className)}>
       <ul className={s.list}>
         {process.env.COMMERCE_CART_ENABLED && (
-          <li className={s.item} onClick={toggleSidebar}>
+          <li className={s.item}>
+            <Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label="Cart">
               <Bag />
               {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+            </Button>
           </li>
         )}
         {process.env.COMMERCE_WISHLIST_ENABLED && (

components/ui/Button/Button.module.css

@@ -35,6 +35,15 @@
   @apply border-accent-9 bg-accent-9 text-accent-0;
 }
 
+.naked {
+  @apply bg-transparent font-semibold border-none shadow-none outline-none py-0 px-0;
+}
+
+.naked:hover,
+.naked:focus {
+  @apply bg-transparent border-none;
+}
+
 .disabled,
 .disabled:hover {
   @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;

components/ui/Button/Button.tsx

@@ -12,7 +12,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'flat' | 'slim' | 'ghost'
+  variant?: 'flat' | 'slim' | 'ghost' | 'naked'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -41,6 +41,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.ghost]: variant === 'ghost',
       [s.slim]: variant === 'slim',
+      [s.naked]: variant === 'naked',
       [s.loading]: loading,
       [s.disabled]: disabled,
     },

components/ui/Sidebar/Sidebar.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply fixed inset-0 h-full z-50 box-border;
+  @apply fixed inset-0 h-full z-50 box-border outline-none;
 }
 
 .sidebar {

components/ui/Sidebar/Sidebar.tsx

@@ -13,28 +13,44 @@ interface SidebarProps {
 }
 
 const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
-  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
+  const sidebarRef = useRef() as React.MutableRefObject<HTMLDivElement>
+  const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>
+
+  const onKeyDownSidebar = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Escape') {
+      onClose()
+    }
+  }
 
   useEffect(() => {
-    const sidebar = ref.current
+    if (sidebarRef.current) {
+      sidebarRef.current.focus()
+    }
 
-    if (sidebar) {
+    const contentElement = contentRef.current
-      disableBodyScroll(sidebar, { reserveScrollBarGap: true })
+  
+    if (contentElement) {
+      disableBodyScroll(contentElement, { reserveScrollBarGap: true })
     }
 
     return () => {
-      if (sidebar) enableBodyScroll(sidebar)
+      if (contentElement) enableBodyScroll(contentElement)
       clearAllBodyScrollLocks()
     }
   }, [])
 
   return (
-    <div className={cn(s.root)}>
+    <div
+      className={cn(s.root)}
+      ref={sidebarRef}
+      onKeyDown={onKeyDownSidebar}
+      tabIndex={1}
+    >
       <div className="absolute inset-0 overflow-hidden">
         <div className={s.backdrop} onClick={onClose} />
         <section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
           <div className="h-full w-full md:w-screen md:max-w-md">
-            <div className={s.sidebar} ref={ref}>
+            <div className={s.sidebar} ref={contentRef}>
               {children}
             </div>
           </div>