[5.x] Improve form field accessibility

[daun]

There's a few requirements for accessible forms that make sense for built-in form fields. We just did at a11y audit on a client project and I figure I'd share what we learned with while the memory is fresh :)

A good primer on accessible forms best practices is Anatomy of Accessible Forms on deque. There's also a great summary about validation and marking invalid inputs in Contextual Form Errors and ARIA.

Partially closes statamic/ideas#1069

Changes

• Associate form labels to their inputs via matching id and for attributes
• Mark required fields: visually with an asterisk, as well as a Required label for screen readers
• Render instructions for form fields
• Link input and instructions via aria-describedby
• Link input and validation error message via aria-describedby
• Mark invalid inputs as aria-invalid

Next steps

There's two other things that make sense to tackle, but possibly in another PR to keep this one somewhat contained:

• Wrap radios and checkboxes in a fieldset and legend
• Allow rendering anchors to jump between error messages and the invalid fields they refer too

Before

<label>
  Name
</label>
<div>
  <input type="text" name="name" required>
</div>

After

<label for="contact-form-name-field">
  Name <sup aria-label="Required">*</sup>
</label>
<p id="contact-form-name-field-instructions">
  Enter your first and last name
</p>
<div>
  <input id="contact-form-name-field" type="text" name="name" required aria-describedby="contact-form-name-field-instructions">
</div>

[duncanmcclean]

This looks awesome! 😄

[daun]

Ready for review 🥬

[jasonvarga]

This is great, thanks. But just checking again about the changes in fields.antlers.html...

Since we don't seem to actually use that file anywhere, the user is responsible for making their field loop look like that in their own template. Right? Nothing will magically work - e.g. the aria-described-by doesn't link to anything unless they do it themselves.

Like you said, we can use that as a basic for the docs, or maybe in the future we can actually make it automatic.

[daun]

@jasonvarga Right, seems like there‘s no automatic way of upgrading all forms to make use of the proposed updates. Users will need to update their loops as well.

Is it possible though that people are already using the fields partial in their own sites? In that case, it would work — and it would probably be a breaking change to remove it. Haven‘t come across any projects using it like this, though.

[jasonvarga]

Actually, yes. That's a great idea too. Instead of the whole {{ fields }} ...etc... {{ /fields }} array we document, you could definitely just use that partial.

-{{ fields }}
-    ...
-{{ /fields }}
+{{ partial:statamic::forms.fields }}