File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 4949 </p >
5050 </header >
5151
52+ <!-- Screen-reader-only live region for submission success announcement -->
53+ <div class =" hidden-visually" aria-live =" polite" >
54+ {{ successAnnouncement }}
55+ </div >
56+
5257 <NcEmptyContent
5358 v-if =" loading"
5459 class =" forms-emptycontent"
@@ -323,6 +328,7 @@ export default {
323328 answers: {},
324329 loading: false ,
325330 success: false ,
331+ successAnnouncement: ' ' ,
326332 /** Submit state of the form, true if changes are currently submitted */
327333 submitForm: false ,
328334 showConfirmEmptyModal: false ,
@@ -495,6 +501,22 @@ export default {
495501 },
496502
497503 watch: {
504+ success (newVal ) {
505+ if (newVal) {
506+ // Delay populating the live region to avoid the announcement being
507+ // swallowed by the simultaneous large DOM change (form replaced by
508+ // success view). Screen readers need a moment to process the new DOM
509+ // before a polite live region update registers.
510+ setTimeout (() => {
511+ this .successAnnouncement =
512+ this .form .submissionMessage
513+ || t (' forms' , ' Thank you for completing the form!' )
514+ }, 100 )
515+ } else {
516+ this .successAnnouncement = ' '
517+ }
518+ },
519+
498520 hash () {
499521 // If public view, abort. Should normally not occur.
500522 if (this .publicView ) {
You can’t perform that action at this time.
0 commit comments