fixes primer#790

flavianunes · Dec 26, 2019 · 3fc1336 · 3fc1336
1 parent 3f72b94
commit 3fc1336
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 4 deletions.
diff --git a/src/buttons/button-group.scss b/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 {

diff --git a/src/buttons/button.scss b/src/buttons/button.scss
@@ -57,7 +57,8 @@
   }
 
   &:active,
-  &.selected {
+  &.selected,
+  &[aria-selected=true] {
     background-image: none;
   }
 }
@@ -153,6 +154,7 @@
   &:active,
   &:focus,
   &.selected,
+  &[aria-selected=true],
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
     color: $text-blue;

diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
@@ -43,7 +43,8 @@
     background-color: lighten($gray-200, 3%);
   }
 
-  &.selected {
+  &.selected,
+  &[aria-selected=true] {
     color: $text-white;
     background-color: $bg-blue;
   }

diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
@@ -44,7 +44,8 @@
     background-color: $bg-gray;
   }
 
-  &.selected {
+  &.selected,
+  &[aria-selected=true] {
     font-weight: $font-weight-bold;
     color: $text-gray-dark;
     cursor: default;

diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
@@ -40,8 +40,11 @@
   }
 
   &.selected,
+  &[aria-selected=true],
   &.selected:hover,
-  &.selected:focus {
+  &[aria-selected=true]:hover,
+  &.selected:focus,
+  &[aria-selected=true]:focus {
     z-index: 2;
     color: $text-white;
     background-color: $bg-blue;

diff --git a/src/support/mixins/buttons.scss b/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;
@@ -55,6 +56,7 @@
 
     &:active,
     &.selected,
+    &[aria-selected=true],
     [open] > & {
       background-color: darken(mix($bg, $bg2, 50%), 7%);
       background-image: none;
@@ -101,6 +103,7 @@
 
   &:active,
   &.selected,
+  &[aria-selected=true],
   [open] > & {
     color: $text-white;
     background-color: darken($color, 5%);
@@ -132,6 +135,7 @@
   &:hover,
   &:active,
   &.selected,
+  &[aria-selected=true],
   [open] > & {
     color: $bg-color;
     background-color: $text-color;