From 334c1c4d95c3c90020a53c5bb18d24fa25055e99 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 9 Sep 2024 09:25:29 -0500
Subject: [PATCH] prevent console errors for sheet component

---
 web/src/components/overlay/LogInfoDialog.tsx  | 23 +++++++++++++++++--
 .../overlay/detail/ReviewDetailDialog.tsx     | 23 +++++++++++++++++--
 .../overlay/detail/SearchDetailDialog.tsx     | 23 +++++++++++++++++--
 web/src/views/search/SearchView.tsx           |  2 +-
 4 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/web/src/components/overlay/LogInfoDialog.tsx b/web/src/components/overlay/LogInfoDialog.tsx
index dd49a97e6..4cebb4a6e 100644
--- a/web/src/components/overlay/LogInfoDialog.tsx
+++ b/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">
diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 1742c1fa2..55c94f009 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/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">
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 35d14448c..368d88dea 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/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">
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 595b9e1fc..0fea41f77 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/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(