From 6e60f5cfbd962c56f08df7c244bcaed51c060356 Mon Sep 17 00:00:00 2001
From: sagitchu <sagitchu@gmail.com>
Date: Wed, 22 Apr 2026 09:21:47 +0800
Subject: [PATCH] fix: add visually hidden DialogTitle to resolve a11y warning
 and fix modal background

---
 vite-frontend/src/pages/forward.tsx              | 2 +-
 vite-frontend/src/pages/tunnel.tsx               | 2 +-
 vite-frontend/src/shadcn-bridge/heroui/modal.tsx | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index e36495b..c63d17b 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -5383,7 +5383,7 @@ export default function ForwardPage() {
       <Modal
         backdrop="blur"
         classNames={{
-          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
+          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden [&>div]:bg-content1 [&>div]:dark:bg-content1",
         }}
         isOpen={diagnosisModalOpen}
         placement="center"
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index 93bf357..b902143 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -3201,7 +3201,7 @@ export default function TunnelPage() {
       <Modal
         backdrop="blur"
         classNames={{
-          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
+          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden [&>div]:bg-content1 [&>div]:dark:bg-content1",
         }}
         isOpen={diagnosisModalOpen}
         placement="center"
diff --git a/vite-frontend/src/shadcn-bridge/heroui/modal.tsx b/vite-frontend/src/shadcn-bridge/heroui/modal.tsx
index ed69448..113161d 100644
--- a/vite-frontend/src/shadcn-bridge/heroui/modal.tsx
+++ b/vite-frontend/src/shadcn-bridge/heroui/modal.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import {
   Dialog,
   DialogContent as BaseDialogContent,
+  DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 
@@ -159,6 +160,7 @@ export function ModalContent({
       showCloseButton={false}
       {...props}
     >
+      <DialogTitle className="sr-only">Modal Dialog</DialogTitle>
       {renderedChildren}
     </BaseDialogContent>
   );