Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(a11y): fields announce their descriptions and labels properly #1043

Merged
merged 2 commits into from
Feb 15, 2024

Conversation

douglasbouttell-camunda
Copy link
Contributor

Fix a whole bunch of elements so they announce themselves properly in a screenreader.

  • Include all description blocks in aria-describedby.
  • Add required property to inputs that can be required.
  • Add aria-invalid property to input which have validation errors.
  • Do not announce the asterisk/star which denotes a required field.
  • Have components generate their own error ID.
  • Remove confusing use of id in Label. It now has an id and an htmlFor prop.
  • Update groups aria-labelledby to point to an actual label.

Closes #1042

  • This PR adds a new form-js element or visually changes an existing component.

* Include all description blocks in `aria-describedby`.
* Add `required` property to inputs that can be required.
* Add `aria-invalid` property to input which have validation errors.
* Do not announce the asterisk/star which denotes a required field.
* Have components generate their own error ID.
* Remove confusing use of `id` in Label. It now has an `id` and an `htmlFor` prop.
* Update groups `aria-labelledby` to point to an actual label.
@douglasbouttell-camunda douglasbouttell-camunda added enhancement New feature or request a11y labels Feb 14, 2024
@bpmn-io-tasks bpmn-io-tasks bot added the in progress Currently worked on label Feb 14, 2024
@vsgoulart
Copy link
Contributor

@douglasbouttell-camunda is this PR ready for review?

@douglasbouttell-camunda douglasbouttell-camunda marked this pull request as ready for review February 15, 2024 08:43
@bpmn-io-tasks bpmn-io-tasks bot added needs review Review pending and removed in progress Currently worked on labels Feb 15, 2024
@douglasbouttell-camunda douglasbouttell-camunda merged commit 1cd29d8 into develop Feb 15, 2024
15 checks passed
@douglasbouttell-camunda douglasbouttell-camunda deleted the 1042-a11y-fixes branch February 15, 2024 11:36
@bpmn-io-tasks bpmn-io-tasks bot removed the needs review Review pending label Feb 15, 2024
vsgoulart pushed a commit that referenced this pull request Feb 20, 2024
…1043)

* Include all description blocks in `aria-describedby`.
* Add `required` property to inputs that can be required.
* Add `aria-invalid` property to input which have validation errors.
* Do not announce the asterisk/star which denotes a required field.
* Have components generate their own error ID.
* Remove confusing use of `id` in Label. It now has an `id` and an `htmlFor` prop.
* Update groups `aria-labelledby` to point to an actual label.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Form elements do not announce themselves properly
2 participants