feat: Add a semantic message and tone to most field components

[gnapse]

Short description

• Discussion in Twist
• Supersedes feat: Add support for an error status and message in most form field components #659 (which only added error messages)

Test plan

Review manually the live components in the various new stories titled "Message Tone Story" in storybook

• Reviewed for TextField
• Reviewed for SelectField
• Reviewed for PasswordField
• Reviewed for TextArea

Demo

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Executed npm run validate and made sure no errors / warnings were shown
• Described changes in CHANGELOG.md
• Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• Updated all static build artifacts (npm run build-all)

Versioning

New minor release

[frankieyan]

Maybe it's not an issue since the markup here is similar to mdn's example, but the error message itself isn't read when the field receives focus. It only gets read when you traverse to the message itself, but even then there's no indication that it's linked to the text field:

[gnapse]

Apparently, support for this is not great on VoiceOver (or in general) 😕

https://a11ysupport.io/tech/aria/aria-errormessage_attribute

cc @craigcarlyle what do you think we could do? Maybe we make it part of the description all the time? I tested this, and VoiceOver still announces that the field is marked as invalid. But it does not announce the error text. So having it in the description would have it read out loud.

[craigcarlyle]

@gnapse Since aria-errormessage came out in WAI-ARIA 1.1 in 2017 and is still not supported across assistive software I think we have no choice but to use aria-describedby.

I think the suggestion here is the way to go:

[gnapse]

Done in the last commit.