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

Add aria-disabled state #1014

Merged
merged 2 commits into from
Jan 23, 2020
Merged

Add aria-disabled state #1014

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
24fd50a
Add aria-disabled=true
simurai Jan 3, 2020
4abeaec
Use aria-disabled="true"
simurai Jan 3, 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
18 changes: 9 additions & 9 deletions docs/content/components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,28 +75,28 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz

## Disabled state

Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.

```html live
<button class="btn mr-2" type="button" disabled>Disabled button</button>
<a class="btn disabled" href="#url" role="button">Disabled button</a>
<button class="btn mr-2" type="button" aria-disabled="true">Disabled button</button>
<a class="btn" href="#url" role="button" aria-disabled="true">Disabled button</a>
```

Similar styles are applied to primary, danger, and outline buttons:

```html live
<button class="btn btn-primary mr-2" type="button" disabled>Disabled button</button>
<a class="btn btn-primary disabled" href="#url" role="button">Disabled button</a>
<button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled button</button>
<a class="btn btn-primary" href="#url" role="button" aria-disabled="true">Disabled button</a>
```

```html live
<button class="btn btn-danger mr-2" type="button" disabled>Disabled button</button>
<a class="btn btn-danger disabled" href="#url" role="button">Disabled button</a>
<button class="btn btn-danger mr-2" type="button" aria-disabled="true">Disabled button</button>
<a class="btn btn-danger" href="#url" role="button" aria-disabled="true">Disabled button</a>
```

```html live
<button class="btn btn-outline mr-2" type="button" disabled>Disabled button</button>
<a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a>
<button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled button</button>
<a class="btn btn-outline" href="#url" role="button" aria-disabled="true">Disabled button</a>
```

## Block button
Expand Down
2 changes: 1 addition & 1 deletion docs/content/components/loaders.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@ It can also be used in combination with other components.
<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<span class="Label bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<button class="btn mt-3" disabled><span>Loading</span><span class="AnimatedEllipsis"></span></button>
<button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
```
8 changes: 4 additions & 4 deletions docs/content/components/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ Use the pagination component to apply button styles to a connected set of links

## Previous/next pagination

You can make a very simple pagination container with just the Previous and Next buttons. Add the class `disabled` to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
You can make a very simple pagination container with just the Previous and Next buttons. Add the `aria-disabled="true"` attribute to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.

```html live
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page disabled">Previous</span>
<span class="previous_page" aria-disabled="true">Previous</span>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
</div>
</nav>
Expand All @@ -25,7 +25,7 @@ You can make a very simple pagination container with just the Previous and Next

For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.

To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the class `disabled` to the Previous button if you're on the first page. Apply the class `current` to the current numbered page.
To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the `aria-disabled="true"` attribute to the Previous button if you're on the first page. Apply the class `current` to the current numbered page.

As always, make sure to include the appropriate `aria` attributes to make the element accessible.

Expand All @@ -36,7 +36,7 @@ As always, make sure to include the appropriate `aria` attributes to make the el
```html live
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page disabled">Previous</span>
<span class="previous_page" aria-disabled="true">Previous</span>
<em class="current selected" aria-current="true">1</em>
<a href="#url" aria-label="Page 2">2</a>
<a href="#url" aria-label="Page 3">3</a>
Expand Down
6 changes: 2 additions & 4 deletions docs/content/principles/html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: HTML
path: principles/html
---



## General formatting

Expand All @@ -24,11 +24,9 @@ path: principles/html

## Boolean attributes

Many attributes don't require a value to be set, like `disabled` or `checked`, so don't set them.
Many attributes don't require a value to be set, like `checked`, so don't set them.

```html inert=true
<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
Expand Down
9 changes: 6 additions & 3 deletions src/buttons/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@
}

&:disabled,
&.disabled {
&.disabled,
&[aria-disabled=true] {
cursor: default;
// Repeat `background-position` because `:hover`
background-position: 0 0;
Expand Down Expand Up @@ -130,7 +131,8 @@
text-decoration: underline;
}

&:disabled {
&:disabled,
&[aria-disabled=true] {
&,
&:hover {
// stylelint-disable-next-line primer/colors
Expand Down Expand Up @@ -181,7 +183,8 @@

&:hover { color: $text-blue; }

&.disabled {
&.disabled,
&[aria-disabled=true] {
// stylelint-disable-next-line primer/colors
color: $gray-400;
cursor: default;
Expand Down
3 changes: 2 additions & 1 deletion src/marketing/buttons/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
}

&:disabled,
&.disabled {
&.disabled,
&[aria-disabled=true] {
pointer-events: none; // Disable hover styles
cursor: default;
opacity: 0.65;
Expand Down
4 changes: 3 additions & 1 deletion src/pagination/pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,10 @@

.gap,
.disabled,
[aria-disabled=true],
.gap:hover,
.disabled:hover {
.disabled:hover,
[aria-disabled=true]:hover {
// stylelint-disable-next-line primer/colors
color: $gray-300;
cursor: default;
Expand Down
12 changes: 8 additions & 4 deletions src/support/mixins/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
}

&:disabled,
&.disabled {
&.disabled,
&[aria-disabled=true] {
color: rgba($color, 0.4);
background-color: $bg2;
background-image: none;
Expand Down Expand Up @@ -63,7 +64,8 @@
}

&:disabled,
&.disabled {
&.disabled,
&[aria-disabled=true] {
color: rgba($color, 0.75);
background-color: mix($bg2, $white, 50%);
background-image: none;
Expand Down Expand Up @@ -110,7 +112,8 @@
}

&:disabled,
&.disabled {
&.disabled,
&[aria-disabled=true] {
color: rgba($color, 0.4);
background-color: $bg2;
background-image: none;
Expand Down Expand Up @@ -150,7 +153,8 @@
}

&:disabled,
&.disabled {
&.disabled,
&[aria-disabled=true] {
color: $black-fade-30;
background-color: $bg-white;
border-color: $black-fade-15;
Expand Down