Improve error message accessibility in registration form #6324
Conversation
foxbunny
commented
May 7, 2024
foxbunny
commented
- Add FormErrors component that lists fields with errors
- Add selector to obtain a flat field list
- Add message-box component to design system
- Add id to PictureInput wrapper
foxbunny
force-pushed
the
error-messages
branch
2 times, most recently
from
a2d59c5 to
ff7524e
Compare
indico/modules/events/registration/client/js/form/FormErrorList.jsx
Outdated
Show resolved
Hide resolved
indico/modules/events/registration/client/js/form/FormErrorList.jsx
Outdated
Show resolved
Hide resolved
indico/modules/events/registration/client/js/form/FormErrorList.jsx
Outdated
Show resolved
Hide resolved
indico/modules/events/registration/client/js/form_submission/RegistrationFormSubmission.jsx
Outdated
Show resolved
Hide resolved
|
Anything missing here from your side, since this PR is still marked as Draft? |
foxbunny
force-pushed
the
error-messages
branch
from
cc8d715 to
4cabe8e
Compare
ThiefMaster
force-pushed
the
error-messages
branch
from
4cabe8e to
9a979fc
Compare
indico/modules/events/registration/client/js/form/FormErrorList.jsx
Outdated
Show resolved
Hide resolved
foxbunny
force-pushed
the
error-messages
branch
from
9a979fc to
6adbb85
Compare
|
I've just discovered that the email field is not hooked up to the final form validation. Instead it uses the browser's constraints validation. Fine by me, and I don't expect any accessibility issues here, but the error message won't appear in the list as a result. |
|
@ThiefMaster Does failure in the server-side validation cause the form state to update? I've noticed I don't get any errors for the email field when server-side validation fails. I can see the error message on the field, but not via the |
foxbunny
force-pushed
the
error-messages
branch
from
00debf3 to
08403f0
Compare
ThiefMaster
force-pushed
the
error-messages
branch
from
08403f0 to
895146f
Compare
- Add FormErrors component that lists fields with errors - Add selector to obtain a flat field list - Add message-box component to design system - Add id to PictureInput wrapper <div> - Add ids to more fields - Fix checkbox id (remove -checkbox) suffix - Allow ind-select to receive focus by calling its foucs() method
The fact that it is a custom component is an implementation detail.
ThiefMaster
force-pushed
the
error-messages
branch
from
0e7a663 to
3bd0803
Compare
|
There's a small regression: When you registered and view your registration, the dropdown to change your consent for the participant list is now much harder to see. I already fixed some other issues there (see my commit), but I have the feeling this needs to be little bit more visible - besides the dropdown arrow you barely notice that it's something clickable. Also, when it's open it's shifted a bit to the side. Before: After: It seems like the border is missing for some reason until I click the field... |
The reason is that the CSS currently targets it when inside a .ui.field. This is because of the way SUI does styles. Very sad. |
3 participants
