"If the specific volume does not appear..." label not associated with its input

[sandbergja]

Steps to recreate

1. Go to https://catalog-staging.princeton.edu/catalog/99124728563506421
2. Press Request button
3. Run WAVE or axe. Alternatively, use your browser's accessibility inspector in the dev tools to inspect the input with the placeholder "Ex: Volume 2, 1987". Notice that this input does not have an accessible label.

URL

https://catalog-staging.princeton.edu/requests/99124728563506421?aeon=false&mfhd=22727203630006421

Issues

3.3.2 Labels or Instructions

Severity

High, this is a level A issue that could block a user from requesting a specific issue of a journal.

WCAG Conformance level (A, AA, AAA)

Level A

User impact

User may not be able to request a specific issue of a journal.

Recommended fix

Make sure that the input id attribute and label for attribute match.

Acceptance criteria

• I can confirm that Voice Over in Safari reads the label when I navigate to the input.
• I have checked that this issue no longer exists, and that I haven't added any further level A or level AA issues with one of the following extensions:
  • axe dev tools
  • Lighthouse
  • Wave
• Add an accessibility test to this screen that will catch further regressions in this label/input pair.