primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1044 from primer/accessible-form-validation

Browse Source 
Accessible form validation
This commit is contained in:
simurai 2020-03-24 11:08:12 +09:00 committed by GitHub
commit a15aba0581
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/content/components/forms.md
View File

@ -222,40 +222,70 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
#### Form group validation
Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<div class="form-group">` to start. Then, house your error messaging in an additional `<div>` with either `.error` or `.warning`.
Convey success, errors and warnings for form groups. For github.com consider using the [`<auto-check>`](https://github.github.io/web-systems-documentation/#custom-elements-auto-check-md) element to perform server-side validation on an input.
If the input is **valid**, add the `.successed` class to the `<div class="form-group">` element. Next add/update a success message to the `.note` element, as well as the `.success` class.
```html live
<form class="pb-2">
<form class="pb-6">
<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="username-input"
aria-describedby="username-input-validation"
/>
</div>
<p class="note success" id="username-input-validation">monalisa is available</p>
</div>
</form>
```
If the input is **not valid**, add the `.errored` class to the `<div class="form-group">` element. Next add/update an error message to the `.note` element, as well as the `.error` class.
```html live
<form class="pb-6">
<div class="form-group errored">
<div class="form-group-header">
<label for="example-text-errored">Example Text</label>
<label for="username-input">Username</label>
</div>
<div class="form-group-body">
<input
class="form-control"
type="text"
value="Example Value"
id="example-text-errored"
aria-describedby="form-error-text"
value="monalisa"
id="username-input"
aria-describedby="username-input-validation"
/>
</div>
<div class="error" id="form-error-text">This example input has an error.</div>
<p class="note error" id="username-input-validation">monalisa is not available. monalisa-beep, monalisa-cyber, or monalisa87 are available.</p>
</div>
<br />
</form>
```
If the input should show a **warning**, add the `.warn` class to the `<div class="form-group">` element. Next add/update a warning message to the `.note` element, as well as the `.warning` class.
```html live
<form class="pb-6">
<div class="form-group warn">
<div class="form-group-header">
<label for="example-text-warn">Example Text</label>
<label for="username-input">Username</label>
</div>
<div class="form-group-body">
<input
class="form-control"
type="text"
value="Example Value"
id="example-text-warn"
aria-describedby="form-warning-text"
value="monalisa-monalisa-monalisa-monalisa-"
id="username-input"
aria-describedby="username-input-validation"
/>
</div>
<div class="warning" id="form-warning-text">This example input has a warning.</div>
<p class="note warning" id="username-input-validation">36 of maximum 39 characters entered.</p>
</div>
</form>
```

21
src/forms/form-group.scss
View File

@ -142,8 +142,10 @@
//
// Our inline errors
&.successed,
&.warn,
&.errored {
.success,
.warning,
.error {
position: absolute;
@ -188,6 +190,25 @@
}
}
&.successed {
.success {
// stylelint-disable-next-line primer/colors
color: $green-900;
// stylelint-disable-next-line primer/colors
background-color: $green-100;
border-color: $border-green;
&::after {
// stylelint-disable-next-line primer/borders
border-bottom-color: $green-100;
}
&::before {
border-bottom-color: $border-green;
}
}
}
&.warn {
.warning {
// stylelint-disable-next-line primer/colors