UI tweaks (#13633)

* Object lifecycle and semantic search UI tweaks

* prevent console errors for sheet component

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">
@@ -93,7 +112,7 @@ export default function SearchDetailDialog({
                 <div className="flex flex-col gap-1.5">
                   <div className="text-sm text-primary/40">Label</div>
                   <div className="flex flex-row items-center gap-2 text-sm capitalize">
-                    {getIconForLabel(search.label, "size-4 text-white")}
+                    {getIconForLabel(search.label, "size-4 text-primary")}
                     {search.label}
                   </div>
                 </div>