Merge pull request #1479 from hypothesis/annotator-toolbar-focus-ring

Show focus ring on annotator toolbar buttons when using keyboard focus

src/annotator/index.js

 'use strict';
 
-const configFrom = require('./config/index');
-
 const $ = require('jquery');
 
-// Applications
+// Load polyfill for :focus-visible pseudo-class.
+require('focus-visible');
+
+const configFrom = require('./config/index');
 const Guest = require('./guest');
 const Sidebar = require('./sidebar');
 const PdfSidebar = require('./pdf-sidebar');

src/styles/annotator/annotator.scss

 @import '../base';
 @import '../mixins/icons';
+@import '../mixins/focus';
 
 @import './adder';
 
@@ -107,6 +108,8 @@ $base-font-size: 14px;
   }
 
   .annotator-frame-button {
+    @include outline-on-keyboard-focus;
+
     transition: background-color 0.25s;
     @include smallshadow;
     background: $white;
@@ -126,7 +129,6 @@ $base-font-size: 14px;
 
     &:focus,
     &:hover {
-      outline: 0;
       color: $text-color;
     }
   }