Merge pull request #358 from UniversityofWarwick/ID-479

ID-479 focus-visible outlines.

Author: halfninja

bootstrap/less/buttons.less

@@ -36,7 +36,7 @@
   cursor: pointer;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid transparent;
-  
+
   .user-select(none);
   text-decoration: none;
 
@@ -49,7 +49,7 @@
   &,
   &:active,
   &.active {
-    &:focus,
+    &:focus-visible,
     &.focus {
       .tab-focus();
     }

bootstrap/less/forms.less

@@ -94,9 +94,9 @@ select[size] {
 }
 
 // Focus for file, radio, and checkbox
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
+input[type="file"]:focus-visible,
+input[type="radio"]:focus-visible,
+input[type="checkbox"]:focus-visible {
   .tab-focus();
 }
 

bootstrap/less/scaffolding.less

@@ -52,13 +52,12 @@ a {
   color: var(--w-sys-colors-link);
   text-decoration: none;
 
-  &:hover,
-  &:focus {
-    color: var(--w-sys-colors-link-hover); 
+  &:hover {
+    color: var(--w-sys-colors-link-hover);
     text-decoration: @link-hover-decoration;
   }
 
-  &:focus {
+  &:focus-visible {
     .tab-focus();
   }
 }

less/accessibility.less

@@ -1,13 +1,12 @@
 :root {
-  --w-ref-focusOutline: @focus-outline;
-  --w-sys-focusOutline: var(--w-ref-focusOutline);
+  --w-sys-focusOutline: @focus-outline;
 }
 
 .id7-outline() {
   outline: 3px solid var(--w-sys-focusOutline);
   color: #0b0c0c !important;
   background-color: var(--w-sys-focusOutline) !important;
-  box-shadow: 0 -2px var(--w-sys-focusOutline), 0 6px #0b0c0c;
+  box-shadow: 0 -2px var(--w-sys-focusOutline), 0 9px #0b0c0c;
   text-decoration: none !important;
   transition-duration: 0s;
 }
@@ -19,15 +18,15 @@
   .id7-outline();
 }
 
-a:focus img {
+a:focus-visible img {
   background-color: var(--w-sys-focusOutline)
 }
 
 a:focus .id7-notifications-badge .counter-value {
   color: white;
 }
 
-.open > a:focus, .dropdown-menu > .active > a:focus, .dropdown-toggle:focus, [role="button"]:focus {
+.open > a:focus-visible, .dropdown-menu > .active > a:focus-visible, .dropdown-toggle:focus-visible, [role="button"]:focus-visible {
   .id7-outline();
 }
 

less/hp-2025/hp.less

@@ -711,7 +711,7 @@ h3, .h3 { font-size: ceil((26px * @font-scale-xs)); }
     }
   }
 
-  html & .form-control:focus {
+  html & .form-control:focus-visible {
     .tab-focus();
   }
 

less/navigation.less

@@ -338,7 +338,7 @@
     margin: 0 0 0 4px;
     padding: 0;
 
-    &:focus {
+    &:focus-visible {
       .tab-focus();
     }
   }

less/search.less

@@ -37,16 +37,16 @@
       color: var(--w-sys-colors-primary-500);
     }
 
-    &:focus {
+    &:focus-visible {
       .tab-focus();
+    }
+    &:focus {
       .fas {
         color: var(--w-sys-colors-primary-500);
       }
     }
   }
 
-  
-
   // These typeahead rules only apply to the non-homepage search box
   // that lives inside the search box container. The homepage places
   // it in the masthead and the plugin does positioning.