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
- 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>
indico/modules/events/registration/client/js/form/FormErrorList.jsx
Outdated
Show resolved
Hide resolved
| const formFieldList = useSelector(getFlatFieldList); | ||
| const fieldLabelLookup = useMemo(() => { | ||
| const lookup = new Map(); | ||
| for (const formField of formFieldList) { | ||
| lookup.set(formField.htmlName, { | ||
| label: formField.title, | ||
| id: `input-${formField.id}`, | ||
| }); | ||
| } | ||
| lookup.set('captcha', { | ||
| label: Translate.string('Captcha'), | ||
| id: 'input-captcha', | ||
| }); | ||
| return lookup; | ||
| }, [formFieldList]); |
There was a problem hiding this comment.
I'd prefer putting this logic in a selector:
export const getFieldLabelMapping = createSelector(
getItems,
fields => {
const mapping = new Map();
Object.values(fields).forEach(formField => {
mapping.set(formField.htmlName, {
label: formField.title,
id: `input-${formField.id}`,
});
});
mapping.set('captcha', {
label: Translate.string('Captcha'),
id: 'input-captcha',
});
return mapping;
}
);(code untested)
There was a problem hiding this comment.
Good call. Will take care of that tomorrow.
| continue; | ||
| } | ||
|
|
||
| fieldsWithErrors.push({label: field.label, id: field.id, message: errors[fieldName]}); |
There was a problem hiding this comment.
Could be simplified to {...field, message: errors[fieldName]} since you use everything from field anyway.
| @@ -170,7 +172,7 @@ export default function RegistrationFormSubmission() { | |||
| onSubmit={onSubmit} | |||
| initialValues={isUpdateMode ? registrationData : initialValues} | |||
| initialValuesEqual={_.isEqual} | |||
| subscription={{}} | |||
| subscription={{errors: true}} | |||
There was a problem hiding this comment.
Are you sure that's needed? I think if you use useFormState in your component you can specify the subscription in there in order to just re-render your component instead of the whole form here.
There was a problem hiding this comment.
I changed it to FormSpy which subscribes to errors.
There was a problem hiding this comment.
You can revert the change to this line then, since the component where you added the useFormState will automatically re-render and it should no longer be necessary to re-render here.
There was a problem hiding this comment.
Hm, I thought I have. Guess not. 😂
