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()
+ })
+
+ expect(
+ await screen.findByRole('textbox', { name: /app\.deleteAppConfirmInputLabel/ }),
+ ).toBeInTheDocument()
+ })
+
it('should render UpdateDSLModal when activeModal is importDSL', async () => {
await act(async () => {
render()
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' })}