From 4d59699e432f986fae71bb0c35c2efdd0f7eb26c Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Fri, 13 Dec 2024 11:47:10 +0700
Subject: [PATCH] Update theme a11y and clean up

---
 app/components/drawer.tsx                     | 39 -------------------
 app/components/header/menu/mobile-menu.tsx    |  8 ++--
 app/modules/cart.tsx                          | 14 +++----
 app/sections/collection-filters/tools-bar.tsx |  5 ++-
 4 files changed, 14 insertions(+), 52 deletions(-)
 delete mode 100644 app/components/drawer.tsx

diff --git a/app/components/drawer.tsx b/app/components/drawer.tsx
deleted file mode 100644
index 22961637..00000000
--- a/app/components/drawer.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { cn } from "~/lib/cn";
-
-export function DialogDemo({
-  width = "400px",
-  openFrom,
-}: { width?: string; openFrom: "left" | "right" }) {
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button className="inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none text-violet11 shadow-[0_2px_10px] shadow-blackA4 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
-          Edit profile
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay
-          className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
-          style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
-        />
-        <Dialog.Content
-          className={cn([
-            "fixed inset-y-0 w-[--drawer-width] bg-[--color-background] p-4 z-10",
-            openFrom === "left" &&
-              "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
-            openFrom === "right" &&
-              "right-0 translate-x-full data-[state=open]:animate-enter-from-right",
-          ])}
-          style={
-            {
-              "--drawer-width": width,
-            } as React.CSSProperties
-          }
-        >
-          content goes here
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
diff --git a/app/components/header/menu/mobile-menu.tsx b/app/components/header/menu/mobile-menu.tsx
index 2c846322..08855fa1 100644
--- a/app/components/header/menu/mobile-menu.tsx
+++ b/app/components/header/menu/mobile-menu.tsx
@@ -1,7 +1,6 @@
 import { CaretRight, List, X } from "@phosphor-icons/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import * as Dialog from "@radix-ui/react-dialog";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { forwardRef } from "react";
 import Link from "~/components/link";
 import { ScrollArea } from "~/components/scroll-area";
@@ -39,13 +38,12 @@ export function MobileMenu() {
           }
           aria-describedby={undefined}
         >
-          <VisuallyHidden.Root asChild>
-            <Dialog.Title>Mobile menu</Dialog.Title>
-          </VisuallyHidden.Root>
+          <Dialog.Title asChild>
+            <div className="px-4">Menu</div>
+          </Dialog.Title>
           <Dialog.Close asChild>
             <X className="w-5 h-5 fixed top-4 right-4" />
           </Dialog.Close>
-          <div className="px-4">Menu</div>
           <div className="mt-4 border-t border-line-subtle" />
           <div className="py-2">
             <ScrollArea className="h-[calc(100vh-5rem)]">
diff --git a/app/modules/cart.tsx b/app/modules/cart.tsx
index fc9c1b16..1818f2eb 100644
--- a/app/modules/cart.tsx
+++ b/app/modules/cart.tsx
@@ -55,7 +55,7 @@ export function CartDetails({
     <div
       className={clsx(
         layout === "drawer" &&
-          "grid grid-cols-1 h-screen-no-nav grid-rows-[1fr_auto] w-[400px]",
+          "grid grid-cols-1 h-screen-no-nav grid-rows-[1fr_auto] px-4",
         layout === "page" && [
           "pb-12 w-full max-w-page mx-auto",
           "grid md:grid-cols-2 lg:grid-cols-3 md:items-start",
@@ -157,13 +157,13 @@ function CartLines({
   let { y } = useScroll(scrollRef);
 
   return (
-    <section
+    <div
       ref={scrollRef}
       aria-labelledby="cart-contents"
       className={clsx([
         y > 0 ? "border-t border-line-subtle" : "",
         layout === "page" && "flex-grow md:translate-y-4 lg:col-span-2",
-        layout === "drawer" && "px-5 pb-5 overflow-auto transition",
+        layout === "drawer" && "overflow-auto transition",
       ])}
     >
       <ul
@@ -177,7 +177,7 @@ function CartLines({
           <CartLineItem key={line.id} line={line} layout={layout} />
         ))}
       </ul>
-    </section>
+    </div>
   );
 }
 
@@ -212,10 +212,10 @@ function CartSummary({
   layout: Layouts;
 }) {
   return (
-    <section
+    <div
       aria-labelledby="summary-heading"
       className={clsx(
-        layout === "drawer" && "grid gap-4 p-5 border-t border-line-subtle",
+        layout === "drawer" && "grid gap-4 border-t border-line-subtle pt-4",
         layout === "page" &&
           "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full",
       )}
@@ -236,7 +236,7 @@ function CartSummary({
         </div>
       </dl>
       {children}
-    </section>
+    </div>
   );
 }
 
diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
index 739cee17..be720ae8 100644
--- a/app/sections/collection-filters/tools-bar.tsx
+++ b/app/sections/collection-filters/tools-bar.tsx
@@ -82,10 +82,13 @@ function FiltersDrawer({
             "fixed inset-y-0 w-full md:w-[360px] bg-[--color-background] py-4 z-10",
             "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
           ])}
+          aria-describedby={undefined}
         >
           <div className="space-y-1">
             <div className="flex gap-2 items-center justify-between px-4">
-              <span className="py-2.5 font-bold">Filters</span>
+              <Dialog.Title asChild className="py-2.5 font-bold">
+                <span>Filters</span>
+              </Dialog.Title>
               <Dialog.Close asChild>
                 <button
                   className="p-2 translate-x-2"