From dee9d27af86cedc6dcaba9e82e75b607dee9633b Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 09:52:09 +0800
Subject: [PATCH] fix(web): associate app deletion confirmation label (#40375)

---
 oxlint-suppressions.json                               |  3 ---
 .../app-info/__tests__/app-info-modals.spec.tsx        | 10 ++++++++++
 .../app-sidebar/app-info/app-info-modals.tsx           |  7 ++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 74c71b00d9a..c6f959876c2 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -190,9 +190,6 @@
     }
   },
   "web/app/components/app-sidebar/app-info/app-info-modals.tsx": {
-    "jsx_a11y/label-has-associated-control": {
-      "count": 1
-    },
     "no-restricted-imports": {
       "count": 1
     }
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
index c3064d42569..ebf07fd84aa 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
@@ -190,6 +190,16 @@ describe('AppInfoModals', () => {
     })
   })
 
+  it('should name the delete confirmation input with its visible label', async () => {
+    await act(async () => {
+      render(<AppInfoModals {...defaultProps} activeModal="delete" />)
+    })
+
+    expect(
+      await screen.findByRole('textbox', { name: /app\.deleteAppConfirmInputLabel/ }),
+    ).toBeInTheDocument()
+  })
+
   it('should render UpdateDSLModal when activeModal is importDSL', async () => {
     await act(async () => {
       render(<AppInfoModals {...defaultProps} activeModal="importDSL" />)
diff --git a/web/app/components/app-sidebar/app-info/app-info-modals.tsx b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
index 74135577262..136d36d6061 100644
--- a/web/app/components/app-sidebar/app-info/app-info-modals.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
@@ -64,6 +64,7 @@ const AppInfoModals = ({
   const { t } = useTranslation()
   const [confirmDeleteInput, setConfirmDeleteInput] = useState('')
   const [isSecretExporting, setIsSecretExporting] = useState(false)
+  const confirmDeleteInputId = React.useId()
   const isDeleteConfirmDisabled = confirmDeleteInput !== appDetail.name
   const exportDialogMode =
     secretEnvList.length > 0 ? 'secret' : activeModal === 'exportWarning' ? 'warning' : null
@@ -147,7 +148,10 @@ const AppInfoModals = ({
                 {t(($) => $.deleteAppConfirmContent, { ns: 'app' })}
               </AlertDialogDescription>
               <div className="mt-2">
-                <label className="mb-1 block system-sm-regular text-text-secondary">
+                <label
+                  htmlFor={confirmDeleteInputId}
+                  className="mb-1 block system-sm-regular text-text-secondary"
+                >
                   <Trans
                     i18nKey={($) => $.deleteAppConfirmInputLabel}
                     ns="app"
@@ -161,6 +165,7 @@ const AppInfoModals = ({
                 </label>
                 <div className="relative">
                   <Input
+                    id={confirmDeleteInputId}
                     type="text"
                     autoComplete="off"
                     spellCheck={false}