primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-25 18:26:14 +03:00
Code Issues Projects Releases Wiki Activity

Use aria-disabled="true"

Browse Source
This commit is contained in:
simurai 2020-01-03 21:28:18 +09:00
parent 24fd50a0f8
commit 4abeaec506
4 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/content/components/buttons.md
View File

@ -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

2
docs/content/components/loaders.md
View File

@ -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
docs/content/components/pagination.md
View File

@ -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>
@ -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.
@ -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>

6
docs/content/principles/html.md
View File

@ -3,7 +3,7 @@ title: HTML
path: principles/html
---
## General formatting
@ -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>