Accessible form validation #1044

simurai · 2020-03-10T08:48:11Z

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 · 2020-03-10T08:48:15Z

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

to make it work with <auto-check>

To match <auto-check>

muan · 2020-03-11T20:05:02Z

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 · 2020-03-12T02:59:58Z

@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 · 2020-03-12T17:23:25Z

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 · 2020-03-16T07:50:58Z

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:

Keep this PR as is.
Add support for success messages to <auto-check>. I can try to make a PR.
Explore a redesign of our form validation.
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 · 2020-03-16T15:19:57Z

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 · 2020-03-20T09:06:22Z

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.

Add example for valid form input

9c47c17

simurai requested a review from emilybrick March 10, 2020 08:48

simurai added the Tag: Documentation label Mar 10, 2020

Add valid tooltip

b2b0e8f

vercel bot temporarily deployed to Preview March 11, 2020 00:22 Inactive

simurai added 2 commits March 11, 2020 09:26

Fix typo

33509d5

Use .successed class

92370ca

to make it work with <auto-check>

vercel bot temporarily deployed to Preview March 11, 2020 01:12 Inactive

Add line about dotcom usage

d0cc177

vercel bot temporarily deployed to Preview March 11, 2020 01:20 Inactive

Use <p> for the messages

caf524c

To match <auto-check>

vercel bot temporarily deployed to Preview March 11, 2020 01:42 Inactive

simurai added minor release Tag: Enhancement and removed Tag: Documentation labels Mar 11, 2020

simurai marked this pull request as ready for review March 11, 2020 01:49

Update forms.md

1b76272

vercel bot temporarily deployed to Preview March 12, 2020 01:20 Inactive

emilybrick approved these changes Mar 12, 2020

View reviewed changes

Add link to <auto-check> docs

9c2c94f

vercel bot temporarily deployed to Preview March 20, 2020 09:13 Inactive

simurai changed the base branch from accessible-form-groups to release-14.3.0 March 24, 2020 02:07

simurai merged commit a15aba0 into release-14.3.0 Mar 24, 2020

simurai deleted the accessible-form-validation branch March 24, 2020 02:08

simurai mentioned this pull request Mar 27, 2020

Primer CSS 14.3.0 #1053

Merged

5 tasks

github-actions bot mentioned this pull request Nov 28, 2022

Link Checker Report ronna/MERL-Center-public#20

Open

This was referenced Dec 14, 2022

Link Checker Report ronna/MERL-Center-public#38

Open

Link Checker Report ronna/MERL-Center-public#50

Open

This was referenced Dec 29, 2022

Link Checker Report ronna/MERL-Center-public#68

Open

Link Checker Report ronna/MERL-Center-public#78

Open

Link Checker Report ronna/MERL-Center-public#80

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessible form validation #1044

Accessible form validation #1044

simurai commented Mar 10, 2020 •

edited

Loading

vercel bot commented Mar 10, 2020 •

edited

Loading

muan commented Mar 11, 2020

emilybrick left a comment

simurai commented Mar 12, 2020 •

edited

Loading

muan commented Mar 12, 2020

simurai commented Mar 16, 2020

muan commented Mar 16, 2020

simurai commented Mar 20, 2020

Accessible form validation #1044

Accessible form validation #1044

Conversation

simurai commented Mar 10, 2020 • edited Loading

Why?

Concerns + alternatives

vercel bot commented Mar 10, 2020 • edited Loading

muan commented Mar 11, 2020

emilybrick left a comment

Choose a reason for hiding this comment

simurai commented Mar 12, 2020 • edited Loading

muan commented Mar 12, 2020

simurai commented Mar 16, 2020

muan commented Mar 16, 2020

simurai commented Mar 20, 2020

simurai commented Mar 10, 2020 •

edited

Loading

vercel bot commented Mar 10, 2020 •

edited

Loading

simurai commented Mar 12, 2020 •

edited

Loading