[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 🥬