stop sheet from displaying console errors

web/src/components/overlay/dialog/PlatformAwareDialog.tsx

@@ -10,7 +10,14 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { isMobile } from "react-device-detect";
 
 type PlatformAwareDialogProps = {
@@ -52,16 +59,20 @@ export default function PlatformAwareDialog({
 
 type PlatformAwareSheetProps = {
   trigger: JSX.Element;
+  title?: string | JSX.Element;
   content: JSX.Element;
   triggerClassName?: string;
+  titleClassName?: string;
   contentClassName?: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
 };
 export function PlatformAwareSheet({
   trigger,
+  title,
   content,
   triggerClassName = "",
+  titleClassName = "",
   contentClassName = "",
   open,
   onOpenChange,
@@ -90,7 +101,15 @@ export function PlatformAwareSheet({
       <SheetTrigger asChild className={triggerClassName}>
         {trigger}
       </SheetTrigger>
-      <SheetContent className={contentClassName}>{content}</SheetContent>
+      <SheetContent className={contentClassName}>
+        <SheetHeader>
+          <SheetTitle className={title ? titleClassName : "sr-only"}>
+            {title ?? ""}
+          </SheetTitle>
+          <SheetDescription className="sr-only">Information</SheetDescription>
+        </SheetHeader>
+        {content}
+      </SheetContent>
     </Sheet>
   );
 }