Update theme a11y and clean up

Weaverse · Dec 13, 2024 · 4d59699 · 4d59699
1 parent de1e3c6
commit 4d59699
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 52 deletions.
diff --git a/app/components/drawer.tsx b/app/components/drawer.tsx
diff --git 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
@@ -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
@@ -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"