Skip to content

Commit 8c296e1

Browse files
committed
fix(a11y): announce form submission success to screen readers
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
1 parent 5093308 commit 8c296e1

1 file changed

Lines changed: 22 additions & 0 deletions

File tree

src/views/Submit.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@
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) {

0 commit comments

Comments
 (0)