Merge pull request #1128 from hypothesis/focus-visible-polyfill

Show focus indicator on various UI elements if they have keyboard focus

package.json

@@ -56,6 +56,7 @@
     "express": "^4.14.1",
     "extend": "^3.0.2",
     "fetch-mock": "6",
+    "focus-visible": "^4.1.5",
     "gulp": "^4.0.0",
     "gulp-changed": "^3.2.0",
     "gulp-if": "^2.0.0",

src/sidebar/index.js

@@ -35,6 +35,9 @@ const angular = require('angular');
 // it must be require'd after angular is first require'd
 require('autofill-event');
 
+// Load polyfill for :focus-visible pseudo-class.
+require('focus-visible');
+
 // Enable debugging checks for Preact.
 require('preact/debug');
 

src/styles/mixins/focus.scss

+/**
+ * Display an outline on an element only when it has keyboard focus.
+ *
+ * This requires the browser to support the :focus-visible pseudo-selector [1]
+ * or for the JS polyfill [2] to be loaded.
+ *
+ * [1] https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
+ * [2] https://github.com/WICG/focus-visible
+ */
+@mixin outline-on-keyboard-focus {
+  // Selector for browsers using JS polyfill, which adds the "focus-visible"
+  // class to a keyboard-focused element.
+  &:focus:not(.focus-visible) {
+    outline: none;
+  }
+
+  // Selector for browsers with native :focus-visible support.
+  // (Do not combine with above, as an unsupported pseudo-class disables the
+  // entire selector)
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}

src/styles/sidebar/common.scss

 @import '../base';
 @import '../forms';
-@import '../mixins/responsive';
 
 @import './styled-text';
 

src/styles/sidebar/components/selection-tabs.scss

@@ -17,15 +17,14 @@
 }
 
 .selection-tabs__type {
+  @include outline-on-keyboard-focus;
+
   color: $grey-6;
   margin-right: 20px;
   cursor: pointer;
   min-width: 85px;
   min-height: 18px;
 
-  // Disable focus ring for selected tab
-  outline: none;
-
   user-select: none;
 }
 

src/styles/sidebar/components/simple-search.scss

@@ -21,6 +21,8 @@
   $expanded-max-width: 150px;
 
   .simple-search-input {
+    @include outline-on-keyboard-focus;
+
     flex-grow: 1;
     order: 1;
 
@@ -28,7 +30,6 @@
 
     // disable the default browser styling for the input
     border: none;
-    outline: none;
     padding: 0px;
     width: 100%;
 

src/styles/sidebar/components/top-bar.scss

@@ -51,11 +51,12 @@
 
 // Removes the native styling from a <button> element
 @mixin reset-native-btn-styles {
+  @include outline-on-keyboard-focus;
+
   padding: 0px;
   margin: 0px;
   background-color: transparent;
   border-style: none;
-  outline: none;
 }
 
 .top-bar__btn {

src/styles/sidebar/sidebar.scss

 $base-font-size: 12px;
 $base-line-height: 20px;
 
+// Variables and mixins
+// --------------------
 @import '../variables';
-@import '../reset';
+@import '../mixins/focus';
+@import '../mixins/responsive';
 
+// Base styles
+// -----------
+@import '../reset';
 @import './elements';
+
+// Misc. legacy :(
+// ---------------
 @import './common';
 
 // Components

yarn.lock

@@ -3716,6 +3716,11 @@ flush-write-stream@^1.0.2:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+focus-visible@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-4.1.5.tgz#50b44e2e84c24b831ceca3cce84d57c2b311c855"
+  integrity sha512-yo/njtk/BB4Z2euzaZe3CZrg4u5s5uEi7ZwbHBJS2quHx51N0mmcx9nTIiImUGlgy+vf26d0CcQluahBBBL/Fw==
+
 follow-redirects@^1.0.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"