Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve .form-group accessibility #1028

Merged
merged 2 commits into from
Mar 24, 2020
Merged

Improve .form-group accessibility #1028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4003d5
Remove <dl> from .form-group
simurai Feb 19, 2020
45a6476
Update docs/content/components/box.md
simurai Mar 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/content/components/box.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,10 +531,10 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
</div>
<form>
<div class="Box-body">
<dl class="form-group">
<dt><label>Example label</label></dt>
<dd><input class="form-control" type="text" /></dd>
</dl>
<div class="form-group">
<div class="form-group-header"><label>Example label</label></div>
<div class="form-group-body"><input class="form-control" type="text"></div>
</div>
<div class="form-checkbox">
<label>
<input type="checkbox" checked="checked" />
Expand Down Expand Up @@ -563,10 +563,10 @@ When a box is all by itself centered on a page you can use [column widths](/obje
<h3 class="f1-light">
Example form
</h3>
<dl class="form-group mb-4">
<dt><label>Example label</label></dt>
<dd><input class="form-control" type="text" /></dd>
</dl>
<div class="form-group mb-4">
<div class="form-group-header"><label>Example label</label></div>
<div class="form-group-body"><input class="form-control" type="text" /></div>
</div>
<button class="btn btn-primary btn-block">
Submit
</button>
Expand Down
68 changes: 40 additions & 28 deletions docs/content/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,14 +183,20 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc

```html live
<form>
<dl class="form-group">
<dt><label for="example-text">Example Text</label></dt>
<dd><input class="form-control" type="text" value="Example Value" id="example-text" /></dd>
</dl>

<dl class="form-group">
<dt><label for="example-select">Example Select</label></dt>
<dd>
<div class="form-group">
<div class="form-group-header">
<label for="example-text">Example Text</label>
</div>
<div class="form-group-body">
<input class="form-control" type="text" value="Example Value" id="example-text" />
</div>
</div>

<div class="form-group">
<div class="form-group-header">
<label for="example-select">Example Select</label>
</div>
<div class="form-group-body">
<select class="form-select" id="example-select">
<option>Choose an option</option>
<option>Git</option>
Expand All @@ -200,51 +206,57 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
<option>Bears</option>
<option>Battlestar Galactica</option>
</select>
</dd>
</dl>
</div>
</div>

<dl class="form-group">
<dt><label for="example-textarea">Example Textarea</label></dt>
<dd>
<div class="form-group">
<div class="form-group-header">
<label for="example-textarea">Example Textarea</label>
</div>
<div class="form-group-body">
<textarea class="form-control" id="example-textarea"></textarea>
</dd>
</dl>
</div>
</div>
</form>
```

#### Form group validation

Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
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`.

```html live
<form class="pb-2">
<dl class="form-group errored">
<dt><label for="example-text-errored">Example Text</label></dt>
<dd>
<div class="form-group errored">
<div class="form-group-header">
<label for="example-text-errored">Example Text</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"
/>
</dd>
<dd class="error" id="form-error-text">This example input has an error.</dd>
</dl>
</div>
<div class="error" id="form-error-text">This example input has an error.</div>
</div>
<br />
<dl class="form-group warn">
<dt><label for="example-text-warn">Example Text</label></dt>
<dd>
<div class="form-group warn">
<div class="form-group-header">
<label for="example-text-warn">Example Text</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"
/>
</dd>
<dd class="warning" id="form-warning-text">This example input has a warning.</dd>
</dl>
</div>
<div class="warning" id="form-warning-text">This example input has a warning.</div>
</div>
</form>
```

Expand Down
3 changes: 2 additions & 1 deletion src/forms/form-control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,8 @@ label {
// stylelint-disable-next-line primer/spacing
margin: 0 30px 0 0;

dt {
dt, // TODO: Deprecate
.form-group-header {
label {
display: inline-block;
// stylelint-disable-next-line primer/spacing
Expand Down
29 changes: 20 additions & 9 deletions src/forms/form-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
// Form groups
//
// Typical form groups - `<dl.form-group>` with a `<dt>` containing the label and
// `<dd> containing the form elements.
// stylelint-disable selector-max-compound-selectors
// stylelint-disable selector-max-type

// Form groups
//
// Usage:
//
// <div class="form-group">
// <div class="form-group-header"> containing the label
// <div class="form-group-body"> containing the form elements
// </div>

.form-group {
// stylelint-disable-next-line primer/spacing
margin: 15px 0;
Expand Down Expand Up @@ -42,7 +48,8 @@
// stylelint-enable selector-no-qualifying-type

// The Label
dt {
dt, // TODO: Deprecate
.form-group-header {
// stylelint-disable-next-line primer/spacing
margin: 0 0 6px;
}
Expand All @@ -51,14 +58,16 @@
position: relative;
}

&.flattened dt {
&.flattened dt, // TODO: Deprecate
&.flattened .form-group-header {
float: left;
margin: 0;
// stylelint-disable-next-line primer/typography
line-height: 32px;
}

&.flattened dd {
&.flattened dd, // TODO: Deprecate
&.flattened .form-group-body {
// stylelint-disable-next-line primer/typography
line-height: 32px;
}
Expand All @@ -67,7 +76,8 @@
// Form Elements
//
// stylelint-disable selector-no-qualifying-type
dd {
dd, // TODO: Deprecate
.form-group-body {
h4 {
margin: $spacer-1 0 0;

Expand All @@ -87,7 +97,8 @@
//

&.required {
dt label::after {
dt label::after, // TODO: Deprecate
.form-group-header label::after {
// stylelint-disable-next-line primer/spacing
padding-left: 5px;
color: $text-red;
Expand Down
6 changes: 4 additions & 2 deletions src/forms/form-validation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Needs refactoring
// stylelint-disable selector-no-qualifying-type, selector-max-type
dl.form-group > dd {
dl.form-group > dd, // TODO: Deprecate
.form-group > .form-group-body {
.form-control {
&.is-autocheck-loading,
&.is-autocheck-successful,
Expand All @@ -25,7 +26,8 @@ dl.form-group > dd {

// Retinization of form validation icons that aren't octicons yet
@include retina-media-query {
dl.form-group > dd {
dl.form-group > dd, // TODO: Deprecate
.form-group > .form-group-body {
.form-control {
&.is-autocheck-loading,
&.is-autocheck-successful,
Expand Down