Accessibility improvements - Form fields

[robinmolen]

Thema / Theme

Frontend

Omschrijving / Description

Part of #4622

This issue addresses the issues regarding form fields issues described in the accessibility rapport.

• [x] 1.3.1
• [x] 1.3.5
• [x] 1.4.11 ~2.5.3~

Added value / Toegevoegde waarde

No response

Aanvullende opmerkingen / Additional context

No response

[robinmolen]

Most form inputs are now connected (with input element id and label element for tags) to their labels. Also the error messages now point to the corresponding input, using aria-describedby, and invalid inputs now have the aria-invalid="true" tag.

Some fields have some accessibility issues:

• ~The file fields use a list element to display the uploaded files. The shown values currently aren't connected to the descriptions (the headers 'Filename', 'Size' and/or 'Type'). We should use a table, or maybe add some aria tags..~ I've turned the file 'uploaded files' list into a table. Providing more information to screenreaders
• The date and datetime inputs currently aren't connected to their labels (related to issue 2.5.3) Update: I've discussed this issue with sergei. The current datepicker (flatpickr) has some accessibility issues, and we currently cannot fix this. For the future, if we can use the pure React datepicker, this issue will be solved. But for now we can't do anything about this issue..
• The map field cannot easily be connected to its label and error message, seeing how this field lacks an input element. I'm also not sure if/how this field can be used without a cursor.
• The signature input has a similar issue. This field has an input element, but it currently expects an bitmap image. I'm also not sure if/how this field can be used without a cursor.