Add forms input a11y docs

[petermakowski]

Done

add forms input a11y docs section

Fixes canonical/react-components#639

QA

• Review updated documentation:
  • https://vanilla-framework-4125.demos.haus/docs/base/forms#validation
  • https://vanilla-framework-4125.demos.haus/docs/base/forms#required
  • https://vanilla-framework-4125.demos.haus/docs/base/forms#accessibility
  • focusing on invalid fields (fields that have an error) in examples will make the screen reader announce that it's invalid (e.g. VoiceOver will announce "invalid data").

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo starting at https://vanilla-framework-4125.demos.haus

[bartaz]

@petermakowski
Thanks. We have couple examples with invalid form fields, I guess it would be useful to add aria-invalid to those as well:

https://github.com/canonical-web-and-design/vanilla-framework/blob/0aacba821cbc03fed193f29652b8ebda097e6053/templates/docs/examples/patterns/forms/form-validation.html#L8-L12

https://github.com/canonical-web-and-design/vanilla-framework/blob/0aacba821cbc03fed193f29652b8ebda097e6053/templates/docs/examples/patterns/forms/form-validation.html#L26-L37

https://github.com/canonical-web-and-design/vanilla-framework/blob/0aacba821cbc03fed193f29652b8ebda097e6053/templates/docs/examples/patterns/forms/forms-required.html#L9-L13

Not sure if these are all of them, maybe having a search for is-error would reveal more.

[petermakowski]

@bartaz I updated examples you mentioned. Interestingly enough, we already had a mention about aria-invalid in some places, e.g.: https://github.com/canonical-web-and-design/vanilla-framework/blob/a823311dc832a4cc3d303619930a7229bb8324b9/templates/docs/examples/patterns/forms/form-inline.html#L20

[elioqoshi]

@petermakowski sorry, not sure if I understand the QA steps correctly.

The input field on Chrome works fine when putting a wrong input in:

On Firefox, If I put in an invalid text string, I don't get a voiceover read out (don't mind the German):

[petermakowski]

@petermakowski sorry, not sure if I understand the QA steps correctly.

The input field on Chrome works fine when putting a wrong input in:

On Firefox, If I put in an invalid text string, I don't get a voiceover read out (don't mind the German):

This PR only updates the documentation with steps required to implement accessibility using aria-invalid, it doesn't include all necessary JavaScript to make all interactive examples work.

You can test it with static examples, e.g. in the inline example

I updated the description with more details.

The issue that you mention above is because there is no JavaScript validation for this example at all - only default browser behavior. This is out of scope of this work.

[bartaz]

LGTM, thanks

[bartaz]

Works as expected: