Studies: Form elements do not have labels

[RyanAJensen]

Steps to recreate

Visit /studies/new or /studies/edit and run the Axe dev tools

URL

http://localhost:3000/studies/new
http://localhost:3000/studies/edit

Issues

Form elements do not have labels

Severity

Critical

WCAG Success Criterion

• Form elements must have labels (3)

WCAG Conformance level (A, AA, AAA)

A

User impact

When labels for form elements are absent, screen reader users do not know the input data expectations.

Recommended fix

To solve this problem, you need to fix at least (1) of the following:

• Element does not have an implicit (wrapped)
• Element does not have an explicit
• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element has no title attribute
• Element has an empty placeholder attribute
• Element's default semantics were not overridden with role="none" or role="presentation"

Acceptance criteria

• I can successfully use this feature with Voice Over in Safari.
• I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
  • axe dev tools
  • Lighthouse
  • Wave
• WCAG Success Criterion are resolved

Notes

3 instances within the form on the new study page
The elements seem to be generated by JavaScript, so the issue seems to stem for the JS library.