Accessible form validation

[simurai]

This is on top of #1028. It adds a "success" tooltip when a form input is valid. 👀 Docs preview

<form>
  <div class="form-group successed">
    <div class="form-group-header">
      <label for="username-input">Username</label>
    </div>
    <div class="form-group-body">
      <input
        class="form-control"
        type="text"
        value="monalisa"
        id="unsername-input"
        aria-describedby="username-input-validation"
      />
    </div>
    <p class="note success" id="username-input-validation">monalisa is available</p>
  </div>
</form>

The docs example also got split into 3 seperate examples so that the same ids can be used.

Before	After

Why?

When an input is valid we typically show a checkmark icon. But screen reader users don't get notified. Adding a success message adds confidence that everything is fine. 👌😌

See https://github.com/github/github/issues/132199

Concerns + alternatives

We could consider removing the .success , .error and .warning classes since we already set the state on the .form-group element. Maybe once we start refactoring all the form-groups on dotcom? 🤔 And also get rid of the .form-group-header and .form-group-body that are not really needed.

---

/cc @primer/ds-core

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-css/1923d2idj
✅ Preview: https://primer-css-git-accessible-form-validation.primer.now.sh

[muan]

Currently the error message would not go away until the error is addressed. I don't suppose the success message should stay? the check mark currently stays.

When an input is valid we typically show a checkmark icon.

Any thoughts around adding this to Primer? This is currently custom CSS in github/github.

[emilybrick]

👍 thanks for doing this

[simurai]

@muan Currently the error message would not go away until the error is addressed. I don't suppose the success message should stay? the check mark currently stays.

Yes, right. It would need support in <auto-check>. Or when used without <auto-check>, additional custom JS.

Some alternatives I can think of:

• Change the markup and rely on .form-control:focus + .success to show the tooltip. When the focus moves away, the tooltip would be hidden.
• Use some CSS animation with a delay to hide the tooltip after a few seconds. Not sure if that would work ok with making it re-appear?
• Not use a tooltip, but instead show the message underneath. Here an example:
  
  The message can stay because it doesn't cover anything. And you can also come back later and get a reminder why it wasn't valid. Downside would be that it pushes content down when it appears and can feel jarring.
• Browsers offer "native" form validation. But I haven't looked into browser support and might be hard to add custom styling for it.

Any thoughts around adding this to Primer? This is currently custom CSS in github/github.

Looks like the styles already are in Primer CSS. But the icons are still on github/github: #442 + #722. Maybe this suggestion #442 (comment) of using a variable for the path might work?

[muan]

Change the markup and rely on .form-control:focus + .success to show the tooltip. When the focus moves away, the tooltip would be hidden.

This seems fine, though I'm not sure if this needs to be a special case for success message?

Not use a tooltip, but instead show the message underneath. ... And you can also come back later and get a reminder why it wasn't valid.

Personally I am a fan of not hiding content, though keep in mind that some fields already have help text below them. Currently they're replaced if there's an error message.

Browsers offer "native" form validation. But I haven't looked into browser support and might be hard to add custom styling for it.

The native validation message isn't reliably read to screen reader, and afaik it's not stylable. For example, firefox shows it as a native tooltip, only when you hover over the form field.

[simurai]

This seems fine, though I'm not sure if this needs to be a special case for success message?

Right. If, we should change all types to use the same.

Personally I am a fan of not hiding content, though keep in mind that some fields already have help text below them. Currently they're replaced if there's an error message.

Yeah, maybe it could be something like mini flash alerts that appear under inputs and don't replace these "help texts".

Ok, how about this:

1. Keep this PR as is.
2. Add support for success messages to <auto-check>. I can try to make a PR.
3. Explore a redesign of our form validation.
4. If we're happy with the redesign, refactor all .form-inputs on dotcom. Maybe use a ViewComponent.

Refactoring .form-inputs on dotcom is needed at some point because we wanna remove all the dls, see #1028.

[muan]

• Keep this PR as is.

Are you thinking about adding the :focus in dotcom instead?

• Add support for success messages to <auto-check>. I can try to make a PR.

I'll take this since it involves changing or JS behavior and there's quite a lot of tech debt there.

Otherwise sounds good.

[simurai]

Are you thinking about adding the :focus in dotcom instead?

Was think the success tooltip should show up as soon as the form is valid. So it matches the announcement to screen readers. I guess adding that in here? And unlike errors, maybe the green tooltip needs to be hidden on blur, once the user moves the focus to another element? So it doesn't keep covering something underneath.

I'll take this since it involves changing or JS behavior and there's quite a lot of tech debt there.

That would be great. 🙇 I can make a new Primer CSS release next week so that the styles will be available on dotcom.