fix(core): missing accessibility for Sheet and Mobile nav

.changeset/odd-zebras-unite.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add missing accessibility components to Sheet/Mobile Nav.

core/components/ui/header/mobile-nav.tsx

@@ -37,7 +37,13 @@ export const MobileNav = ({ items, logo }: Props) => {
       </SheetPrimitive.Trigger>
       <SheetPrimitive.Portal>
         <SheetPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-        <SheetPrimitive.Content className="fixed inset-y-0 left-0 z-50 h-full w-3/4 border-r bg-white p-6 pt-0 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm">
+        <SheetPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed inset-y-0 left-0 z-50 h-full w-3/4 border-r bg-white p-6 pt-0 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
+        >
+          <SheetPrimitive.Title asChild>
+            <h2 className="sr-only">Navigation menu</h2>
+          </SheetPrimitive.Title>
           <div className="flex h-[92px] items-center justify-between">
             <div className="overflow-hidden text-ellipsis py-3">{logo}</div>
             <SheetPrimitive.DialogClose>

core/components/ui/sheet/sheet.tsx

@@ -15,6 +15,7 @@ const Sheet = ({ title, children, side = 'left', trigger, ...props }: Props) =>
     {Boolean(trigger) && <SheetPrimitive.Trigger asChild>{trigger}</SheetPrimitive.Trigger>}
     <SheetPrimitive.Portal>
       <SheetPrimitive.Content
+        aria-describedby={undefined}
         className={cn(
           'fixed gap-4 overflow-auto bg-white p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out md:p-10',
           side === 'top' &&
@@ -28,8 +29,8 @@ const Sheet = ({ title, children, side = 'left', trigger, ...props }: Props) =>
         )}
       >
         <div className="mb-6 flex flex-row items-center justify-between">
-          <SheetPrimitive.Title asChild className="text-2xl font-bold">
-            <h2>{title}</h2>
+          <SheetPrimitive.Title asChild>
+            <h2 className="text-2xl font-bold">{title}</h2>
           </SheetPrimitive.Title>
           <SheetPrimitive.Close className="focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20">
             <X className="h-6 w-6">