Implement soft required validation #726
Conversation
sergei-maertens
force-pushed
the
feature/4546-soft-required-validation
branch
from
a5507e2 to
f3a8030
Compare
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #726 +/- ##
==========================================
+ Coverage 77.90% 78.08% +0.18%
==========================================
Files 237 238 +1
Lines 4888 4938 +50
Branches 1337 1348 +11
==========================================
+ Hits 3808 3856 +48
- Misses 1045 1048 +3
+ Partials 35 34 -1 ☔ View full report in Codecov by Sentry. |
| }); | ||
|
|
||
| return ` | ||
| <div id="${this.id}-content" class="utrecht-alert utrecht-alert--warning openforms-soft-required-errors"> |
There was a problem hiding this comment.
To add some context for users with a visual disability:
| <div id="${this.id}-content" class="utrecht-alert utrecht-alert--warning openforms-soft-required-errors"> | |
| <div id="${this.id}-content" class="utrecht-alert utrecht-alert--warning openforms-soft-required-errors" role="alert"> |
There was a problem hiding this comment.
From https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role:
The alert role is for important, and usually time-sensitive, information.
I don't find this time sensitive, especially because it's also displayed at the beginning of a form step that is yet to be filled out.
The alert role should only be used for information that requires the user's immediate attention, for example:
This is not the case - it becomes important once you are about to submit the form.
I think the role="status" is more appropriate: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role
…atic variant Dummy set up to render the template content of a soft required errors component. This is set up so that every form change triggers a re-render of the content, which should hopefully help in detecting the empty fields with softRequired validation enabled.
On each render, the softRequiredErrors component checks which components have 'empty' values and extracts their labels. Only if there are empty components is the error message displayed.
…tion errors and input are linked in an accessible way Similar to the validation error linking for hard errors, we relate the content div(s) describing the soft-required validation errors.
…quired errors component This enables it to be customized via NL DS design tokens, and provides some escape hatches to make it different from the standard warning alert appearance.
sergei-maertens
force-pushed
the
feature/4546-soft-required-validation
branch
from
f3a8030 to
f19c49e
Compare
Added a single helper to set the desired list of aria-describedby IDs in the element attribute, for each element.
sergei-maertens
force-pushed
the
feature/4546-soft-required-validation
branch
from
f19c49e to
8b339c5
Compare
Closes open-formulieren/open-forms#4546
This went better than I had anticipated.
Final tasks to wrap this up: