feat: form layout improvements (resolves #75)

[greatislander]

This PR makes a number of improvements to Looseleaf's form handling based on suggestions that emerged while working on the platform. As follows:

• Larger type for <legend>
• Section dividers between successive <fieldsets>
• Don't use pseudo content for checkboxes (the checkbox was being announced by screen readers)
• Set width to auto for <input type="submit"> and <input type="reset">
• Field hint styling
• Field error message styling

Testing

Review all variants of the following components:

• Input
• Text Area
• Select
• Checkbox
• Checkboxes
• Radio Buttons

As well as the combined Form layout.

[jobara]

I noticed in the referenced WebAIM article the section on aria-invalid. Which suggests that you set it when an error is present. Looking at the ARIA spec, aria-invalid should likely be set to true when an error is present. Also it looks like we should be using aria-errormessage to reference the error message.

[jobara]

@greatislander you may want to look into the support for aria-errormessage as I haven't used it before. Maybe @lliskovoi might have some thoughts about it.

[greatislander]

I found this, @jobara — sounds like support for aria-errormessage may be not reliable across browser and screenreader combos: https://webaim.org/discussion/mail_thread?thread=8911

[greatislander]

@jobara I've added aria-invalid and documented this change. I'll await some feedback from @lliskovoi on the feasibility of using aria-errormessage instead of/in addition to aria-describedby.

[jobara]

@greatislander the thread you referenced mentioned two issues: nvaccess/nvda#8318 and FreedomScientific/standards-support#83. They are both still open. Sounds like at least some of the browsers may be exposing things correctly, and that support for JAWS is improving.

[greatislander]

@jobara I think given that support is not consistent across browsers/screen readers it makes sense to stick with using a combo of aria-invalid to indicate that the input is in an error state and aria-describedby to link the input to the message.

[cherylhjli]

looks great! (there's no approve option on here, let me know if I have to do something else)