Accessibility improvements - form fields #717

robinmolen · 2024-10-02T14:50:57Z

These are some accessibility changes regarding chapters 1.3.1 and 1.3.5 of the accessibility rapport

codecov · 2024-10-02T14:58:02Z

Codecov Report

Attention: Patch coverage is 74.15730% with 23 lines in your changes missing coverage. Please review.

Project coverage is 56.82%. Comparing base (3619d68) to head (5d34ffa).
Report is 16 commits behind head on main.

Files with missing lines	Patch %	Lines
src/formio/components/Select.js	0.00%	5 Missing ⚠️
src/formio/components/Email.js	0.00%	4 Missing ⚠️
src/formio/components/Radio.js	0.00%	3 Missing ⚠️
src/formio/utils.js	85.71%	1 Missing and 1 partial ⚠️
src/components/forms/Checkbox/Checkbox.js	0.00%	0 Missing and 1 partial ⚠️
src/components/forms/DateField/DateField.js	0.00%	0 Missing and 1 partial ⚠️
src/components/forms/NumberField/NumberField.js	0.00%	0 Missing and 1 partial ⚠️
src/components/forms/RadioField/RadioField.js	0.00%	1 Missing ⚠️
src/components/forms/SelectField/SelectField.js	0.00%	0 Missing and 1 partial ⚠️
src/components/forms/TextField/TextField.js	0.00%	0 Missing and 1 partial ⚠️
... and 3 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #717      +/-   ##
==========================================
+ Coverage   55.21%   56.82%   +1.60%     
==========================================
  Files         229      230       +1     
  Lines        4167     4255      +88     
  Branches      747      772      +25     
==========================================
+ Hits         2301     2418     +117     
+ Misses       1660     1625      -35     
- Partials      206      212       +6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

sergei-maertens

more review for the formio components will follow!

src/components/forms/Checkbox/Checkbox.js

src/components/forms/EmailField/EmailField.js

src/components/forms/RadioField/RadioField.js

sergei-maertens

I'd like to see some (Jest) tests that assert the aria-describedby behaves as expected. See all the annotations about missing test coverage. I'm also very interested in how multiple: true components behave!

src/components/forms/ValidationErrors.js

src/formio/utils.js

src/formio/components/FileField.js

src/formio/templates/file.ejs

robinmolen · 2024-10-10T13:13:22Z

Formio doesn't validate inputs inside a component with the multiple property individually. Meaning: if we have a textfield component with the multiple property, where the first input is valid and the second invalid, we cannot determine in the code which input is the valid/invalid one. This means we cannot add things like aria-invalid="true" to a specific input inside the component (because, again, we don't know which input is invalid).

So to prevent some weird issues for screenreader users, we cannot make components with the multiple property accessible.

The accessibility change to link the error message (with aria-describedby) and to add aria-invalid="true" to the input won't happen for most components with the multiple property.

…or most components to only non-multiple instances #717 (comment)

src/formio/templates/file.ejs

src/formio/utils.js

src/formio/components/Checkbox.spec.js

src/formio/components/jest-util.js

…or most components to only non-multiple instances #717 (comment)

sergei-maertens

Can be merged once #722 is merged!

…sing aria-describedby

…criptive id

… form fields

…oad and turned upload list into a table

…mailField

…r message ids

…or most components to only non-multiple instances #717 (comment)

…ld be undefined It's better if this element hasn't got an id, then when multiple elements have the same id

- Replaced clickable icons with buttons - Proper textual alternatives and translations - Changed naming conventions for element ids - Replaced <b> with css - All icons now have 'aria-hidden="true"'

…tiple value row delete button

…orm field validation behaviour

sergei-maertens · 2024-10-24T10:21:09Z

The test failures are known issues and will be fixed via #723

robinmolen linked an issue Oct 2, 2024 that may be closed by this pull request

Accessibility improvements - Form fields open-formulieren/open-forms#4716

Closed

3 tasks

robinmolen force-pushed the feature/4716-accessibility-improvements-form-fields branch from f90eb32 to 36b37e4 Compare October 2, 2024 14:54

robinmolen requested a review from sergei-maertens October 2, 2024 14:54

sergei-maertens reviewed Oct 2, 2024

View reviewed changes

src/components/forms/Checkbox/Checkbox.js Outdated Show resolved Hide resolved

src/components/forms/EmailField/EmailField.js Outdated Show resolved Hide resolved

src/components/forms/RadioField/RadioField.js Outdated Show resolved Hide resolved

sergei-maertens marked this pull request as draft October 8, 2024 13:15

robinmolen marked this pull request as ready for review October 10, 2024 07:55

robinmolen marked this pull request as draft October 10, 2024 08:44

robinmolen marked this pull request as ready for review October 10, 2024 09:43

sergei-maertens reviewed Oct 10, 2024

View reviewed changes

src/components/forms/ValidationErrors.js Outdated Show resolved Hide resolved

src/formio/utils.js Outdated Show resolved Hide resolved

src/formio/components/FileField.js Outdated Show resolved Hide resolved

src/formio/templates/file.ejs Show resolved Hide resolved

robinmolen added a commit that referenced this pull request Oct 10, 2024

♿ [open-formulieren/open-forms#4716] Limiting accessibility changes f…

4be3aba

…or most components to only non-multiple instances #717 (comment)

robinmolen force-pushed the feature/4716-accessibility-improvements-form-fields branch from d582477 to 0bcf3f8 Compare October 10, 2024 14:35

sergei-maertens requested changes Oct 14, 2024

View reviewed changes

src/formio/templates/file.ejs Outdated Show resolved Hide resolved

src/formio/templates/file.ejs Outdated Show resolved Hide resolved

src/formio/templates/file.ejs Outdated Show resolved Hide resolved

src/formio/utils.js Outdated Show resolved Hide resolved

robinmolen force-pushed the feature/4716-accessibility-improvements-form-fields branch 3 times, most recently from 35b90c8 to 5ce6b99 Compare October 17, 2024 07:59

sergei-maertens reviewed Oct 22, 2024

View reviewed changes

src/formio/components/Checkbox.spec.js Outdated Show resolved Hide resolved

src/formio/components/Checkbox.spec.js Outdated Show resolved Hide resolved

src/formio/components/jest-util.js Outdated Show resolved Hide resolved

robinmolen force-pushed the feature/4716-accessibility-improvements-form-fields branch from 5ce6b99 to 2a2ddb6 Compare October 22, 2024 13:21

sergei-maertens pushed a commit that referenced this pull request Oct 23, 2024

♿ [open-formulieren/open-forms#4716] Limiting accessibility changes f…

1e86055

…or most components to only non-multiple instances #717 (comment)

sergei-maertens force-pushed the feature/4716-accessibility-improvements-form-fields branch from 2a2ddb6 to 2774e03 Compare October 23, 2024 20:05

sergei-maertens approved these changes Oct 23, 2024

View reviewed changes

robinmolen added 8 commits October 24, 2024 12:15

♿ [open-formulieren/open-forms#4716] Show the current form step

9f6781a

♿ [open-formulieren/open-forms#4716] Connect input to error message u…

6b1db28

…sing aria-describedby

♿ [open-formulieren/open-forms#4716] Marked error messages with a des…

ee27e5c

…criptive id

♿ [open-formulieren/open-forms#4716] Added aria attributes to invalid…

875f791

… form fields

♿ [open-formulieren/open-forms#4716] Linked error message to file upl…

b4e7045

…oad and turned upload list into a table

♿ [open-formulieren/open-forms#4716] Added autocomplete property to E…

4297d4c

…mailField

🎨 [open-formulieren/open-forms#4716] More explicit propTypes and erro…

801cb95

…r message ids

✅ [open-formulieren/open-forms#4716] Fixed some storybook tests

34bdb02

robinmolen added 7 commits October 24, 2024 12:15

♿ [open-formulieren/open-forms#4716] Limiting accessibility changes f…

c1196ab

…or most components to only non-multiple instances #717 (comment)

⏪ [open-formulieren/open-forms#4716] Reverting table back to list

3739257

🩹 [open-formulieren/open-forms#4716] Default ValidationErrors id shou…

724958c

…ld be undefined It's better if this element hasn't got an id, then when multiple elements have the same id

🎨 [open-formulieren/open-forms#4716] Replaced DOM query with ref

fec2d94

♿ [open-formulieren/open-forms#4716] File upload template improvements

f1a5752

- Replaced clickable icons with buttons - Proper textual alternatives and translations - Changed naming conventions for element ids - Replaced <b> with css - All icons now have 'aria-hidden="true"'

♿ [open-formulieren/open-forms#4716] Added textual alternative to mul…

0a12116

…tiple value row delete button

✅ [open-formulieren/open-forms#4716] Added jest test for accessible f…

5d34ffa

…orm field validation behaviour

sergei-maertens force-pushed the feature/4716-accessibility-improvements-form-fields branch from 2774e03 to 5d34ffa Compare October 24, 2024 10:15

sergei-maertens merged commit 65b168a into main Oct 24, 2024
11 of 15 checks passed

sergei-maertens deleted the feature/4716-accessibility-improvements-form-fields branch October 24, 2024 10:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessibility improvements - form fields #717

Accessibility improvements - form fields #717

robinmolen commented Oct 2, 2024 •

edited

Loading

codecov bot commented Oct 2, 2024 •

edited

Loading

sergei-maertens left a comment

sergei-maertens left a comment

robinmolen commented Oct 10, 2024 •

edited

Loading

sergei-maertens left a comment

sergei-maertens commented Oct 24, 2024

Accessibility improvements - form fields #717

Accessibility improvements - form fields #717

Conversation

robinmolen commented Oct 2, 2024 • edited Loading

codecov bot commented Oct 2, 2024 • edited Loading

Codecov Report

sergei-maertens left a comment

Choose a reason for hiding this comment

sergei-maertens left a comment

Choose a reason for hiding this comment

robinmolen commented Oct 10, 2024 • edited Loading

sergei-maertens left a comment

Choose a reason for hiding this comment

sergei-maertens commented Oct 24, 2024

robinmolen commented Oct 2, 2024 •

edited

Loading

codecov bot commented Oct 2, 2024 •

edited

Loading

robinmolen commented Oct 10, 2024 •

edited

Loading