prevent console errors for sheet component

web/src/components/overlay/LogInfoDialog.tsx

@@ -1,7 +1,19 @@
 import { LogLine } from "@/types/log";
 import { isDesktop } from "react-device-detect";
-import { Sheet, SheetContent } from "../ui/sheet";
-import { Drawer, DrawerContent } from "../ui/drawer";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../ui/sheet";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "../ui/drawer";
 import { LogChip } from "../indicators/Chip";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
@@ -16,6 +28,9 @@ export default function LogInfoDialog({
 }: LogInfoDialogProps) {
   const Overlay = isDesktop ? Sheet : Drawer;
   const Content = isDesktop ? SheetContent : DrawerContent;
+  const Header = isDesktop ? SheetHeader : DrawerHeader;
+  const Title = isDesktop ? SheetTitle : DrawerTitle;
+  const Description = isDesktop ? SheetDescription : DrawerDescription;
 
   const helpfulLinks = useHelpfulLinks(logLine?.content);
 
@@ -31,6 +46,10 @@ export default function LogInfoDialog({
       <Content
         className={isDesktop ? "" : "max-h-[75dvh] overflow-hidden p-2 pb-4"}
       >
+        <Header className="sr-only">
+          <Title>Log Details</Title>
+          <Description>Log details</Description>
+        </Header>
         {logLine && (
           <div className="flex size-full flex-col gap-5">
             <div className="flex w-min flex-col gap-1.5">

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -1,6 +1,18 @@
 import { isDesktop, isIOS, isMobile } from "react-device-detect";
-import { Sheet, SheetContent } from "../../ui/sheet";
-import { Drawer, DrawerContent } from "../../ui/drawer";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../../ui/sheet";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "../../ui/drawer";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
@@ -66,6 +78,9 @@ export default function ReviewDetailDialog({
 
   const Overlay = isDesktop ? Sheet : Drawer;
   const Content = isDesktop ? SheetContent : DrawerContent;
+  const Header = isDesktop ? SheetHeader : DrawerHeader;
+  const Title = isDesktop ? SheetTitle : DrawerTitle;
+  const Description = isDesktop ? SheetDescription : DrawerDescription;
 
   if (!review) {
     return;
@@ -102,6 +117,10 @@ export default function ReviewDetailDialog({
               : "max-h-[80dvh] overflow-hidden p-2 pb-4",
           )}
         >
+          <Header className="sr-only">
+            <Title>Review Item Details</Title>
+            <Description>Review item details</Description>
+          </Header>
           {pane == "overview" && (
             <div className="scrollbar-container mt-3 flex size-full flex-col gap-5 overflow-y-auto">
               <div className="flex w-full flex-row">

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -1,6 +1,18 @@
 import { isDesktop, isIOS } from "react-device-detect";
-import { Sheet, SheetContent } from "../../ui/sheet";
-import { Drawer, DrawerContent } from "../../ui/drawer";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../../ui/sheet";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "../../ui/drawer";
 import { SearchResult } from "@/types/search";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -71,6 +83,9 @@ export default function SearchDetailDialog({
 
   const Overlay = isDesktop ? Sheet : Drawer;
   const Content = isDesktop ? SheetContent : DrawerContent;
+  const Header = isDesktop ? SheetHeader : DrawerHeader;
+  const Title = isDesktop ? SheetTitle : DrawerTitle;
+  const Description = isDesktop ? SheetDescription : DrawerDescription;
 
   return (
     <Overlay
@@ -86,6 +101,10 @@ export default function SearchDetailDialog({
           isDesktop ? "sm:max-w-xl" : "max-h-[75dvh] overflow-hidden p-2 pb-4"
         }
       >
+        <Header className="sr-only">
+          <Title>Tracked Object Details</Title>
+          <Description>Tracked object details</Description>
+        </Header>
         {search && (
           <div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
             <div className="flex w-full flex-row">

web/src/views/search/SearchView.tsx

@@ -49,7 +49,7 @@ export default function SearchView({
   onUpdateFilter,
   onOpenSearch,
 }: SearchViewProps) {
-  // remove duplicate review items
+  // remove duplicate event ids
 
   const uniqueResults = useMemo(() => {
     return searchResults?.filter(