Use ARIA attributes for states

docs/content/components/breadcrumb.md

@@ -17,9 +17,9 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
 ```html live
 <nav aria-label="Breadcrumb">
   <ol>
-    <li class="breadcrumb-item text-small"><a href="https://github.com/business">Business</a></li>
-    <li class="breadcrumb-item text-small"><a href="https://github.com/business/customers">Customers</a></li>
-    <li class="breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current="page">MailChimp</li>
+    <li class="breadcrumb-item"><a href="https://github.com/business">Business</a></li>
+    <li class="breadcrumb-item"><a href="https://github.com/business/customers">Customers</a></li>
+    <li class="breadcrumb-item" aria-current="page">MailChimp</li>
   </ol>
 </nav>
 ```

docs/content/components/labels.md

@@ -145,7 +145,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
 ```html live title="Counter in tabs"
 <div class="tabnav">
   <nav class="tabnav-tabs" aria-label="Foo bar">
-    <a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab <span class="Counter">23</a>
+    <a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
     <a href="#url" class="tabnav-tab">Bar tab</a>
   </nav>
 </div>

docs/content/components/pagination.md

@@ -25,19 +25,18 @@ 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 `aria-disabled="true"` attribute 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 `aria-current="page"` attribute to the current numbered page.
 
 As always, make sure to include the appropriate `aria` attributes to make the element accessible.
 
 - Add `aria-label="Pagination"` to the the `paginate-container` element.
-- Add `aria-current="true"` to the current page marker.
 - Add `aria-label="Page X"` to each anchor link.
 
 ```html live
 <nav class="paginate-container" aria-label="Pagination">
   <div class="pagination">
     <span class="previous_page" aria-disabled="true">Previous</span>
-    <em class="current selected" aria-current="true">1</em>
+    <em aria-current="page">1</em>
     <a href="#url" aria-label="Page 2">2</a>
     <a href="#url" aria-label="Page 3">3</a>
     <span class="gap">…</span>

src/autocomplete/autocomplete.scss

@@ -28,8 +28,8 @@
   cursor: pointer;
 
   &:hover,
-  &[aria-selected="true"],
   &.selected,
+  &[aria-selected=true],
   &.navigation-focus {
     color: $text-white;
     text-decoration: none;

src/breadcrumb/breadcrumb.scss

@@ -18,7 +18,10 @@
   }
 }
 
-.breadcrumb-item-selected {
+.breadcrumb-item-selected,
+.breadcrumb-item[aria-current] {
+  color: $text-gray;
+
   &::after {
     content: none;
   }

src/buttons/button-group.scss

@@ -33,6 +33,7 @@
   }
 
   &.selected,
+  &[aria-selected=true],
   &:focus,
   &:active,
   &:hover {
@@ -65,6 +66,7 @@
   }
 
   &.selected,
+  &[aria-selected=true],
   &:focus,
   &:active,
   &:hover {

src/buttons/button.scss

@@ -58,7 +58,8 @@
   }
 
   &:active,
-  &.selected {
+  &.selected,
+  &[aria-selected=true] {
     background-image: none;
   }
 }
@@ -155,6 +156,7 @@
   &:active,
   &:focus,
   &.selected,
+  &[aria-selected=true],
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
     color: $text-blue;

src/navigation/filter-list.scss

@@ -43,7 +43,9 @@
     background-color: lighten($gray-200, 3%);
   }
 
-  &.selected {
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current] {
     color: $text-white;
     background-color: $bg-blue;
   }

src/navigation/menu.scss

@@ -44,7 +44,9 @@
     background-color: $bg-gray;
   }
 
-  &.selected {
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current] {
     font-weight: $font-weight-bold;
     color: $text-gray-dark;
     cursor: default;

src/navigation/subnav.scss

@@ -40,8 +40,8 @@
   }
 
   &.selected,
-  &.selected:hover,
-  &.selected:focus {
+  &[aria-selected=true],
+  &[aria-current] {
     z-index: 2;
     color: $text-white;
     background-color: $bg-blue;

src/navigation/tabnav.scss

@@ -29,8 +29,9 @@
   border: $border-width $border-style transparent;
   border-bottom: 0;
 
+  &.selected,
   &[aria-selected=true],
-  &.selected {
+  &[aria-current] {
     color: $text-gray-dark;
     background-color: $bg-white;
     border-color: $border-gray-dark;

src/navigation/underline-nav.scss

@@ -17,6 +17,7 @@
   line-height: $lh-default;
   color: $text-gray;
   text-align: center;
+  border: 0;
   // stylelint-disable-next-line primer/borders
   border-bottom: 2px $border-style transparent;
 

src/pagination/pagination.scss

@@ -49,7 +49,9 @@
   .selected { z-index: 3; }
 
   .current,
-  .current:hover {
+  .current:hover,
+  [aria-current],
+  [aria-current]:hover {
     z-index: 3;
     color: $text-white;
     background-color: $bg-blue;

src/support/mixins/buttons.scss

@@ -22,6 +22,7 @@
 
     &:active,
     &.selected,
+    &[aria-selected=true],
     [open] > & {
       background-color: darken(desaturate($bg, 10%), 6%);
       background-image: none;
@@ -56,6 +57,7 @@
 
     &:active,
     &.selected,
+    &[aria-selected=true],
     [open] > & {
       background-color: darken(mix($bg, $bg2, 50%), 7%);
       background-image: none;
@@ -103,6 +105,7 @@
 
   &:active,
   &.selected,
+  &[aria-selected=true],
   [open] > & {
     color: $text-white;
     background-color: darken($color, 5%);
@@ -135,6 +138,7 @@
   &:hover,
   &:active,
   &.selected,
+  &[aria-selected=true],
   [open] > & {
     color: $bg-color;
     background-color: $text-color;