Update: Convert focus to focus-visible (fixes adaptlearning#376 adapt…

…learning#377) (adaptlearning#378)
redwoodperforms · Dec 7, 2022 · 7d93d24 · 7d93d24
1 parent 982e869
commit 7d93d24
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less
@@ -12,7 +12,7 @@
   }
 
   .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option,
-  html:not(.a11y-disable-focusoutline) &__input:focus + &__label &__option {
+  html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option {
     background-color: @item-color-hover;
     color: @item-color-inverted-hover;
     .transition(background-color @duration ease-in, color @duration ease-in;);

diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less
@@ -8,7 +8,7 @@
     color: @item-color-inverted;
 
     .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover,
-    html:not(.a11y-disable-focusoutline) &:focus {
+    html:not(.a11y-disable-focusoutline) &:focus-visible {
       background-color: @item-color-hover;
       color: @item-color-inverted-hover;
       .transition(background-color @duration ease-in, color @duration ease-in;);
@@ -50,13 +50,13 @@
   border-bottom: 1px solid @item-color-hover;
   color: @item-color-inverted;
 
-  .no-touch &:not(:focus):not([aria-selected="true"]):hover {
+  .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover {
     background-color: @item-color-hover;
     color: @item-color-inverted-hover;
     .transition(background-color @duration ease-in, color @duration ease-in;);
   }
 
-  &:focus,
+  &:focus-visible,
   &[aria-selected="true"] {
     // This code can be used to style a non-native dropdown as closely
     // as possible to the default browser settings

diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less
@@ -6,7 +6,7 @@
     border-radius: @item-border-radius;
 
     .no-touch &:not(.is-disabled):not(.is-selected):hover,
-    html:not(.a11y-disable-focusoutline) .mcq-item__input:focus + & {
+    html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & {
       background-color: @item-color-hover;
       color: @item-color-inverted-hover;
       .transition(background-color @duration ease-in, color @duration ease-in;);

diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less
@@ -47,24 +47,41 @@
     }
   }
 
+  // set icon background color to transparent to 'inherit' strapline styling
   &__strapline-icon {
-    background-color: @item-color;
+    background-color: transparent;
     color: @item-color-inverted;
   }
 
   .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover,
   .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon {
-    background-color: @item-color-hover;
     color: @item-color-inverted-hover;
     .transition(background-color @duration ease-in, color @duration ease-in;);
   }
 
+  .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover {
+    background-color: @item-color-hover;
+  }
+
+  // set icon hover background color to transparent to 'inherit' strapline styling
+  .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon {
+    background-color: transparent;
+  }
+
   &__strapline-btn.is-visited,
   &__strapline-btn.is-visited &__strapline-icon {
-    background-color: @visited;
     color: @visited-inverted;
   }
 
+  &__strapline-btn.is-visited {
+    background-color: @visited;
+  }
+
+  // set icon visited background color to transparent to 'inherit' strapline styling
+  &__strapline-btn.is-visited &__strapline-icon {
+    background-color: transparent;
+  }
+
   &.has-img-zoom &__slider-image-container {
     .img-zoom();
   }

diff --git a/less/plugins/adapt-contrib-slider/slider.less b/less/plugins/adapt-contrib-slider/slider.less
@@ -77,7 +77,7 @@
 
 // Rangeslider focus styles
 // --------------------------------------------------
-input[type='range']:focus + .rangeslider .rangeslider__handle {
+input[type='range']:focus-visible + .rangeslider .rangeslider__handle {
   html:not(.a11y-disable-focusoutline) & {
     box-shadow: 0 2px 5px fade(@black, 60%);
   }