Fixes LMS-2352 by unifying :hover and :focus styles.

common/lib/xmodule/xmodule/css/combinedopenended/display.scss

@@ -250,7 +250,7 @@ section.combined-open-ended-status {
   margin-bottom: 2px;
   padding: $baseline/2;
 
-  &:hover {
+  &:hover, &:focus {
     background-color: #eee;
   }
   .rubric-label-selected{
@@ -477,7 +477,7 @@ div.rubric {
         padding: $baseline/2;
         border-radius: $baseline/4;
 
-        &:hover {
+        &:hover, &:focus {
           background-color: #eee;
         }
 

common/lib/xmodule/xmodule/css/combinedopenended/edit.scss

@@ -17,7 +17,7 @@
         pointer-events: none;
         cursor: none;
 
-        &:hover {
+        &:hover, &:focus {
           box-shadow: 0 0 0 0 !important;
         }
       }

common/lib/xmodule/xmodule/css/editor/edit.scss

@@ -20,7 +20,7 @@
       margin-left: 7px;
       border-radius: 2px;
 
-      &:hover {
+      &:hover, &:focus {
         background: rgba(255, 255, 255, .5);
       }
     }

common/lib/xmodule/xmodule/css/html/display.scss

@@ -90,7 +90,7 @@ ul {
 }
 
 a {
-  &:link, &:visited, &:hover, &:active {
+  &:link, &:visited, &:hover, &:active, &:focus {
     color: #1d9dd9;
   }
 }

common/lib/xmodule/xmodule/css/problem/edit.scss

@@ -17,7 +17,7 @@
         pointer-events: none;
         cursor: none;
 
-        &:hover {
+        &:hover, &:focus {
           box-shadow: 0 0 0 0 !important;
         }
       }

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -5,7 +5,7 @@ $border-color: #C8C8C8;
   border-left: 1px solid lighten($border-color, 10%);
   display: block;
 
-  &:hover {
+  &:hover, &:focus {
     background: none;
   }
 }
@@ -23,7 +23,7 @@ $border-color: #C8C8C8;
       border-left: 1px solid lighten($border-color, 10%);
       display: block;
 
-      &:hover {
+      &:hover, &:focus {
         background: none;
       }
     }
@@ -131,7 +131,7 @@ nav.sequence-nav {
           //   color: #aaa;
           // }
 
-          &:hover {
+          &:hover, &:focus {
             background-color: #fff;
             background-repeat: no-repeat;
             background-position: center 14px;
@@ -282,7 +282,7 @@ nav.sequence-nav {
             outline: 0;
           }
 */
-          &:hover {
+          &:hover, &:focus {
             opacity: 0.5;
           }
 
@@ -353,7 +353,7 @@ nav.sequence-bottom {
           text-indent: -9999px;
           @include transition(all .2s $ease-in-out-quad 0s);
 
-          &:hover {
+          &:hover, &:focus {
             opacity: 0.5;
             background-position: center 15px;
           }

common/lib/xmodule/xmodule/css/tabs/tabs.scss

@@ -79,7 +79,7 @@
             cursor: default;
           }
 
-          &:hover {
+          &:hover, &:focus {
             box-shadow: inset 0 1px 2px 1px  $shadow;
             background-image: linear-gradient(#009FE6, #009FE6) !important;
           }

common/lib/xmodule/xmodule/css/video/accessible_menu.scss

@@ -48,7 +48,7 @@ $blue-s1: saturate($blue,15%);
         font-size: 14px;
         line-height: 23px;
 
-        &:hover {
+        &:hover, &:focus {
           color: $gray-d1;
         }
       }

common/lib/xmodule/xmodule/css/video/display.scss

@@ -58,7 +58,7 @@ div.video {
         padding: ($baseline*.75);
         color: $lighter-base-font-color;
 
-        &:hover {
+        &:hover, &:focus {
           background-color: $action-primary-active-bg;
           color: $very-light-text;
         }
@@ -166,7 +166,7 @@ div.video {
       color: #ccc;
       position: relative;
 
-      &:hover {
+      &:hover, &:focus {
         ul, div {
           opacity: 1;
         }
@@ -188,7 +188,7 @@ div.video {
         border-style: solid;
         border-color: #000;
 
-        &:hover {
+        &:hover, &:focus {
           background-color: #444;
           color: #fff;
           text-decoration: none;
@@ -370,7 +370,7 @@ div.video {
                 text-overflow: ellipsis;
                 white-space: nowrap;
 
-                &:hover {
+                &:hover, &:focus {
                   background-color: #666;
                   color: #aaa;
                   outline-offset: -4px;
@@ -617,7 +617,7 @@ div.video {
         outline-offset: -1px;
       }
 
-      &:hover {
+      &:hover, &:focus {
         text-decoration: underline;
       }
 

common/static/sass/_mixins-inherited.scss

@@ -133,12 +133,12 @@
     color: $gray-d1 !important;
     pointer-events: none;
     cursor: none;
-    &:hover {
+    &:hover, &:focus {
       box-shadow: 0 0 0 0 !important;
     }
   }
 
-  &:hover, &.active {
+  &:hover, &:focus, &:active {
     box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
   }
 }
@@ -152,7 +152,7 @@
   background-color: $green;
   color: $white;
 
-  &:hover {
+  &:hover, &:focus {
     background-color: $green-s1;
     color: $white;
   }
@@ -173,7 +173,7 @@
   background-color: $blue;
   color: $white;
 
-  &:hover, &.active {
+  &:hover, &:focus, &:active {
     background-color: $blue-s2;
     color: $white;
   }
@@ -194,7 +194,7 @@
   background-color: $red;
   color: $white;
 
-  &:hover, &.active {
+  &:hover, &:focus, &:active {
     background-color: $red-s1;
     color: $white;
   }
@@ -215,7 +215,7 @@
   background-color: $pink;
   color: $white;
 
-  &:hover, &.active {
+  &:hover, &:focus, &:active {
     background-color: $pink-s1;
     color: $white;
   }
@@ -237,7 +237,7 @@
   background-color: $orange;
   color: $gray-d2;
 
-  &:hover {
+  &:hover, &:focus {
     background-color: $orange-s2;
     color: $gray-d2;
   }
@@ -260,7 +260,7 @@
   color: rgb(92, 103, 122);
   text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
 
-  &:hover {
+  &:hover, &:focus {
     background-color: rgb(222, 236, 247);
     color: rgb(92, 103, 122);
   }
@@ -290,7 +290,7 @@
   background-color: $gray-d2;
   color: $gray-l3;
 
-  &:hover {
+  &:hover, &:focus {
     background-color: $gray-d3;
     color: $white;
   }
@@ -304,7 +304,7 @@
   box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
   color: $white;
 
-  &:hover {
+  &:hover, &:focus {
     background-color: $gray-d4;
     color: $white;
   }
@@ -373,7 +373,7 @@
     background: #edf1f5;
     font-size: 13px;
 
-    &:hover {
+    &:hover, &:focus {
       background: $blue-l5;
 
       .item-actions {

common/static/sass/_mixins.scss

@@ -180,14 +180,14 @@
   line-height: 1.5em;
   text-align: center;
 
-  &:hover, &:active {
+  &:hover, &:active, &:focus {
     box-shadow: 0 2px 1px $shadow-l1;
   }
 
   &.current, &.active {
     box-shadow: inset 1px 1px 2px $shadow-d1;
 
-    &:hover, &:active {
+    &:hover, &:active, &:focus {
       box-shadow: inset 1px 1px 1px $shadow-d1;
     }
   }
@@ -204,7 +204,7 @@
   line-height: 1.5em;
   text-align: center;
 
-  &:hover, &:active {
+  &:hover, &:active, &:focus {
 
   }
 
@@ -224,7 +224,7 @@
   background-color: $white;
   color: $blue-l2;
 
-  &:hover {
+  &:hover, &:focus {
     border: 1px solid $blue;
     background-color: $blue;
     color: $white;
@@ -249,7 +249,7 @@
   vertical-align: middle;
   color: $gray-l1;
 
-  &:hover {
+  &:hover, &:focus {
     background-color: $gray-l1;
     color: $white;
   }

common/static/sass/bourbon/addons/_button.scss

@@ -76,7 +76,7 @@
   text-shadow: 0 1px 0 $text-shadow;
   background-clip: padding-box;
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled),&:focus:not(:disabled) {
     $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
     $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
     $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);

lms/static/sass/course/courseware/_sidebar.scss

@@ -34,7 +34,7 @@
         color: #666;
       }
 
-      &.ui-state-hover {
+      &.ui-state-hover, &.ui-state-focus {
         a {
           color: #666;
         }

lms/static/sass/course/instructor/_instructor_2.scss

@@ -467,7 +467,7 @@ section.instructor-dashboard-content-2 {
         color: $lighter-base-font-color;
         cursor: pointer;
 
-        &:hover {
+        &:hover, &:focus {
           color: $alert-color;
         }
       }

lms/static/sass/course/layout/_calculator.scss

@@ -65,7 +65,7 @@ div.calc-main {
         -webkit-appearance: none;
         width: flex-grid(.5) + flex-gutter();
 
-        &:hover {
+        &:hover, &:focus {
           color: #333;
         }
       }

lms/static/sass/course/layout/_courseware_header.scss

@@ -108,7 +108,7 @@ header.global.slim {
       text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
       vertical-align: middle;
 
-      &:hover, &.active {
+      &:hover, &:active, &:focus {
         @include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%));
       }
     }

lms/static/sass/elements/_controls.scss

@@ -38,7 +38,7 @@
   box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0);
   padding: ($baseline/2) $baseline;
 
-  &:hover, &.active {
+  &:hover, &:active, &:focus {
     text-decoration: none;
   }
 
@@ -54,7 +54,7 @@
   background-color: $action-primary-bg;
   color: $action-primary-fg;
 
-  &:hover, &.active {
+  &:hover, &:active, &:focus {
     background-color: $action-primary-focused-bg;
     color: $action-primary-focused-fg;
   }
@@ -129,7 +129,7 @@
   background: shade($error-color, 25%);
   color: $white;
 
-  &:hover, &:active {
+  &:hover, &:active, &:focus {
     background: $error-color;
     color: $white;
   }

lms/static/sass/elements/_system-feedback.scss

@@ -90,7 +90,7 @@
         text-shadow: none;
         color: inherit;
 
-        &:hover {
+        &:hover, &:focus {
           color: $action-primary-bg;
         }
       }

lms/static/sass/multicourse/_about_pages.scss

@@ -24,7 +24,7 @@
       @include transition(all 0.15s linear 0s);
       text-transform: lowercase;
 
-      &:hover, &.active, &:focus {
+      &:hover, &:active, &:focus {
         border-color: rgb(200,200,200);
         color: $base-font-color;
         text-decoration: none;

lms/static/sass/multicourse/_course_about.scss

@@ -67,7 +67,7 @@
               text-shadow: 0 1px rgba(255,255,255, 0.6);
               text-transform: none;
 
-              &:hover {
+              &:hover, &:focus {
                 color: $link-color;
               }
             }
@@ -84,7 +84,7 @@
               text-shadow: 0 1px rgba(255,255,255, 0.6);
               text-transform: none;
 
-              &:hover {
+              &:hover, &:focus {
                 color: $link-color;
               }
             }
@@ -110,13 +110,13 @@
             text-align: center;
             width: flex-grid(6);
 
-            &:hover {
+            &:hover, &:focus {
               color: rgb(255,255,255);
             }
           }
 
           a {
-            &:hover, &:visited {
+            &:hover, &:visited, &:focus {
               text-decoration: none;
             }
           }
@@ -134,7 +134,7 @@
             text-align: center;
             width: flex-grid(3, 8);
 
-            &:hover {
+            &:hover, &:focus {
               color: rgb(255,255,255);
             }
           }
@@ -261,7 +261,7 @@
           margin-left: 0px;
         }
 
-        &:hover, &.active, &:focus {
+        &:hover, &:active, &:focus {
           border-color: $border-color-2;
           color: $base-font-color;
           text-decoration: none;

lms/static/sass/shared/_course_object.scss

@@ -71,7 +71,7 @@
         display: block;
       }
 
-      a:hover {
+      a:hover, a:focus {
         text-decoration: none;
       }
 
@@ -116,7 +116,7 @@
           display: block;
           height: 50px;
 
-          &:hover {
+          &:hover, &:focus {
             @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
             text-decoration: none;
 

lms/static/sass/shared/_header.scss

@@ -98,7 +98,7 @@ header.global {
           margin-right: 0px;
         }
 
-        &:hover, &:focus, &.active {
+        &:hover, &:focus, &:active {
           background: $button-bg-hover-color;
         }
       }

lms/static/sass/views/_verification.scss

@@ -33,7 +33,7 @@
       @extend %ui-fake-link;
       color: $m-blue-d2;
 
-      &:hover {
+      &:hover, &:focus {
         color: $m-blue;
       }
     }