From 92318c79d553cc74cbd36878442913f8767318d1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 9 Feb 2026 09:42:40 -0600
Subject: [PATCH] prevent console warnings about missing titles and
 descriptions

make these invisible with sr-only
---
 web/public/locales/en/components/dialog.json |  1 +
 web/src/components/menu/GeneralSettings.tsx  | 50 +++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/web/public/locales/en/components/dialog.json b/web/public/locales/en/components/dialog.json
index a56c2b1da..91ff38d82 100644
--- a/web/public/locales/en/components/dialog.json
+++ b/web/public/locales/en/components/dialog.json
@@ -1,6 +1,7 @@
 {
   "restart": {
     "title": "Are you sure you want to restart Frigate?",
+    "description": "This will briefly stop Frigate while it restarts.",
     "button": "Restart",
     "restarting": {
       "title": "Frigate is Restarting",
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index 1788bce84..245ee8a72 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -42,12 +42,20 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isDesktop, isMobile } from "react-device-detect";
-import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../ui/drawer";
 import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogPortal,
+  DialogTitle,
   DialogTrigger,
 } from "../ui/dialog";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
@@ -194,6 +202,16 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
               : "max-h-[75dvh] overflow-hidden p-2"
           }
         >
+          {!isDesktop && (
+            <>
+              <DrawerTitle className="sr-only">
+                {t("menu.settings")}
+              </DrawerTitle>
+              <DrawerDescription className="sr-only">
+                {t("menu.settings")}
+              </DrawerDescription>
+            </>
+          )}
           <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
             {isMobile && (
               <div className="mb-2">
@@ -355,6 +373,16 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                       : "scrollbar-container max-h-[75dvh] w-[92%] overflow-y-scroll rounded-lg md:rounded-2xl"
                   }
                 >
+                  {!isDesktop && (
+                    <>
+                      <DialogTitle className="sr-only">
+                        {t("menu.languages")}
+                      </DialogTitle>
+                      <DialogDescription className="sr-only">
+                        {t("menu.languages")}
+                      </DialogDescription>
+                    </>
+                  )}
                   <span tabIndex={0} className="sr-only" />
                   {languages.map(({ code, label }) => (
                     <MenuItem
@@ -395,6 +423,16 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                     isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
                   }
                 >
+                  {!isDesktop && (
+                    <>
+                      <DialogTitle className="sr-only">
+                        {t("menu.darkMode.label")}
+                      </DialogTitle>
+                      <DialogDescription className="sr-only">
+                        {t("menu.darkMode.label")}
+                      </DialogDescription>
+                    </>
+                  )}
                   <span tabIndex={0} className="sr-only" />
                   <MenuItem
                     className={
@@ -472,6 +510,16 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                     isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
                   }
                 >
+                  {!isDesktop && (
+                    <>
+                      <DialogTitle className="sr-only">
+                        {t("menu.theme.label")}
+                      </DialogTitle>
+                      <DialogDescription className="sr-only">
+                        {t("menu.theme.label")}
+                      </DialogDescription>
+                    </>
+                  )}
                   <span tabIndex={0} className="sr-only" />
                   {colorSchemes.map((scheme) => (
                     <MenuItem