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' })}
-