From 4abeaec5061eca7364bb1779081ba05ad45d2f54 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Fri, 3 Jan 2020 21:28:18 +0900
Subject: [PATCH] Use aria-disabled="true"

---
 docs/content/components/buttons.md    | 18 +++++++++---------
 docs/content/components/loaders.md    |  2 +-
 docs/content/components/pagination.md |  8 ++++----
 docs/content/principles/html.md       |  6 ++----
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
index 34f4d38a..c6b92200 100644
--- a/docs/content/components/buttons.md
+++ b/docs/content/components/buttons.md
@@ -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
diff --git a/docs/content/components/loaders.md b/docs/content/components/loaders.md
index e2f46243..bda8085a 100644
--- a/docs/content/components/loaders.md
+++ b/docs/content/components/loaders.md
@@ -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>
 ```
diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md
index 87f1a1e9..7d233f47 100644
--- a/docs/content/components/pagination.md
+++ b/docs/content/components/pagination.md
@@ -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>
diff --git a/docs/content/principles/html.md b/docs/content/principles/html.md
index cd377769..eeda0519 100644
--- a/docs/content/principles/html.md
+++ b/docs/content/principles/html.md
@@ -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>