Improve a11y on the cart

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,8 +27,10 @@ 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}>
-            <Bag />
+          <li className={s.item}>
+            <Button variant="naked" onClick={toggleSidebar} aria-label="Cart">
+              <Bag />
+            </Button>
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
           </li>
         )}

components/ui/Button/Button.module.css

@@ -35,6 +35,15 @@
   @apply border-accent-9 bg-accent-9 text-accent-0;
 }
 
+.naked {
+  @apply bg-white text-gray-800 font-semibold border-none shadow-none outline-none py-0 px-0;
+}
+
+.naked:hover,
+.naked:focus {
+  @apply bg-white 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,27 +13,44 @@ interface SidebarProps {
 }
 
 const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
+  const innerRef = useRef() as React.MutableRefObject<HTMLDivElement>
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
+  const onKeyDownSidebar = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Escape') {
+      onClose()
+    }
+  }
+
   useEffect(() => {
     if (ref.current) {
-      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
+      ref.current.focus()
     }
+
+    if (innerRef.current) {
+      disableBodyScroll(innerRef.current, { reserveScrollBarGap: true })
+    }
+
     return () => {
-      if (ref && ref.current) {
-        enableBodyScroll(ref.current)
+      if (innerRef && innerRef.current) {
+        enableBodyScroll(innerRef.current)
       }
       clearAllBodyScrollLocks()
     }
   }, [])
 
   return (
-    <div className={cn(s.root)}>
+    <div
+      className={cn(s.root)}
+      ref={ref}
+      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={innerRef}>
               {children}
             </div>
           </div>