Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SDPA-5684] Added a visually hidden list of all validation errors for screenreaders. #1078

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

[SDPA-5684] Added a visually hidden list of all validation errors for screenreaders. #1078

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90d926d
[SDPA-5684] Added a visually hidden list of all validation errors for…
elNico Oct 22, 2021
586045b
Merge branch 'develop' into feature/SDPA-5684-validation-errors-scree…
elNico Oct 25, 2021
b31cfec
Merge branch 'develop' into feature/SDPA-5684-validation-errors-scree…
elNico Oct 26, 2021
1447a1a
Merge branch 'develop' into feature/SDPA-5684-validation-errors-scree…
elNico Oct 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion packages/components/Molecules/Form/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@
v-show="hideForm()"
@model-updated="onModelChange"
/>
<div v-if="errorList" role="alert" aria-live="assertive" class="rpl-form__sr-only">
<p>The following errors occurred:</p>
<ul>
<li v-for="item in errorList" :key="item.field.model">
{{ item.error }}
</li>
</ul>
</div>
</form>
</template>

Expand Down Expand Up @@ -75,7 +83,8 @@ export default {
},
data () {
return {
isClearingForm: false
isClearingForm: false,
errorList: null
}
},
mounted () {
Expand Down Expand Up @@ -154,6 +163,9 @@ export default {
// call validation manually
if (this.validateOnSubmit) {
this.$refs.vfg.validate()

// Provide all errors in one visually hidden area for screenreaders.
this.errorList = this.$refs.vfg.errors
}

// Run custom submit callback if no error in validation
Expand Down Expand Up @@ -326,6 +338,14 @@ $rpl-form-input-search-icon: url("data:image/svg+xml,%3Csvg width='16' height='1
&--full-width {
max-width: 100%;
}

&__sr-only {
@include rpl_visually_hidden;
ul {
// Avoid screenreader reading out "bullet".
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this go in the rpl_visually_hidden mixin?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dylankelly I'm not really sure whether I understand. Can you explain it a bit more? I'm just using the standard rpl_visually_hidden mixin to visually hide the messages. You mean using the rpl-visually-hidden class instead? I wrapped it in the custom _sr-only just because it needed the extra UL treatment. I guess it could be reshuffled if that's what you mean.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah maybe i didnt think that through first. What I was probably intending was a list reset mixin that included this.

list-style-type: none;
}
}
}

.vue-form-generator {
Expand Down