Focus success message after AJAX submit - #3386
vivi-the-going-merry[bot] wants to merge 2 commits into
Conversation
Screen reader users get no notification when the success/error message replaces the form after an AJAX submit, since focus stays wherever it was before the submit button was clicked. - tabindex="-1" on the message div (FrmFormsHelper::get_success_message) makes it programmatically focusable without adding it to the tab order. - js/formidable.js focuses the message once it's live in the document. The old .frm_forms wrapper is already detached by the time the message needs to be looked up, so it's queried fresh from the still-attached parent captured before replaceWith() ran, not from the replaced-away subtree. Closes Strategy11/formidable-pro#6702
- Reuse the existing focusInput() helper (already used by the error-summary a11y work) instead of a bare .focus() call, so a message that appears mid slide-in animation is handled the same way error focus already is. - Scope the .frm_message lookup to the markup that was just inserted, not the form's whole parent container, so an unrelated element elsewhere on the page can never be focused instead. - Tighten the Cypress assertion to check focus on the message element itself, and the PHP comment to not overclaim beyond the success case.
vivi-the-going-merry
Bot
added
the
run e2e tests
|
Important Review skippedBot user detected. To trigger a single review, invoke the ⚙️ Run configurationConfiguration used: Repository: Strategy11/formidable-forms/.coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
 |
|
Overall Grade |
Security Reliability Complexity Hygiene |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| PHP |  |
Sep 18, 2026 8:56p.m. | Review ↗ |
| JavaScript | |
Sep 18, 2026 8:56p.m. | Review ↗ |
Important
AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.
What was broken
After a form is submitted via AJAX and the success message (
.frm_message) replaces the form, focus stays wherever it was before the submit button was clicked. Screen reader users get no notification the message appeared.Split from Strategy11/formidable-pro#6098. Prior art: #2677 (closed unmerged draft) — reused as a starting point, but its
object.closest('.frm_forms')?.parentNodelookup was querying a subtree already detached from the document byreplaceWith(), so the.focus()call was a silent no-op.What changed
FrmFormsHelper::get_success_message()addstabindex="-1"to the message div so it's programmatically focusable without joining the tab order.js/formidable.js: afterreplaceContent.replaceWith(...), the newly inserted markup (not the parent container, and not the detached old subtree) is searched for.frm_messageand focused via the existingfocusInput()helper — the same helper the error-summary focus work already uses, so a message that appears mid slide-in animation is handled consistently.tests/cypress/e2e/admin.cy.jsasserting the success message is focused after submit, alongside the existing content assertion.How it was verified
No interactive browser-automation tool (
playwright-cli) is available in this unattended session, so this wasn't driven live. Verification is the new Cypress assertion above plus CI — this is a fresh branch with no PR history to protect, so per this agent's own SOP the push-then-read-CI loop serves as the self-test here. Will confirm CI is green (run e2e testslabel) before this is handed to review.Closes Strategy11/formidable-pro#6702