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/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) {
-      disableBodyScroll(sidebar, { reserveScrollBarGap: true })
+    const contentElement = contentRef.current
+  
+    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>