fix(web): associate app deletion confirmation label (#40375)

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
     }

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" />)

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}