Add focus-visible polyfill, issue #187 (#193)

* add focus-visible polyfill
* remove unnecessary outline: none from styles
* make buttons Pin, Block, Delete visible when focused
* fix outline of user details close button
* close user info by ESC
* user info: don't focus the close button

web/app/common/polyfills.js

@@ -1,4 +1,5 @@
 import 'core-js/es7/promise';
+import 'focus-visible';
 
 export default function loadPolyfills() {
   const fillCoreJs = () => {

web/app/components/comment/__action/comment__action.scss

@@ -9,10 +9,6 @@
     color: #31c7c5;
   }
 
-  &:focus {
-    outline: none;
-  }
-
   + .comment__action {
     margin-left: 8px;
   }

web/app/components/comment/__control/comment__control.scss

@@ -10,8 +10,4 @@
   &:hover {
     color: #0aa;
   }
-
-  &:focus {
-    outline: none;
-  }
 }

web/app/components/comment/__controls/comment__controls.scss

@@ -4,9 +4,10 @@
   user-select: none;
   font-size: 14px;
   font-weight: 700;
+  opacity: 0;
 
-  @media (hover: hover) {
-    font-weight: 700;
-    opacity: 0;
+  &:hover,
+  &:focus-within {
+    opacity: 1;
   }
 }

web/app/components/comment/__vote/comment__vote.scss

@@ -8,7 +8,6 @@
   background: url('comment__vote.svg') center no-repeat;
   background-size: contain;
   cursor: pointer;
-  outline: none;
 
   &:hover {
     background-image: url('_selected/comment__vote_selected.svg');

web/app/components/input/__button/input__button.scss

@@ -7,10 +7,6 @@
   border-radius: 2px;
   cursor: pointer;
 
-  &:focus {
-    outline: none;
-  }
-
   &:disabled {
     opacity: 0.5;
     pointer-events: none;

web/app/components/root/__show-more/root__show-more.scss

@@ -18,8 +18,4 @@
   &:focus {
     background: #0aa;
   }
-
-  &:focus {
-    outline: none;
-  }
 }

web/app/embed.js

@@ -60,6 +60,7 @@ function init() {
     node: null,
     back: null,
     closeEl: null,
+    iframe: null,
     style: null,
     init(user) {
       this.animationStop();
@@ -97,8 +98,6 @@ function init() {
           #${remarkRootId}-close {
             top: 0px;
             right: 400px;
-            width: 30px;
-            height: 30px;
             position: absolute;
             text-align: center;
             font-size: 25px;
@@ -107,6 +106,7 @@ function init() {
             border-color: transparent;
             border-width: 0;
             padding: 0;
+            margin-right: 4px;
             background-color: transparent;
           }
           @media all and (max-width: 430px) {
@@ -150,14 +150,19 @@ function init() {
         verticalscrolling="no"
         horizontalscrolling="no"
       />`;
+      this.iframe = this.node.querySelector('iframe');
+      this.iframe.onload = () => {
+        this.iframe.contentDocument.addEventListener('keydown', this.onKeyDown);
+      };
       this.node.appendChild(this.closeEl);
       document.body.appendChild(this.style);
       document.body.appendChild(this.back);
       document.body.appendChild(this.node);
+      document.addEventListener('keydown', this.onKeyDown);
       setTimeout(() => {
         this.back.setAttribute('data-animation', '');
         this.node.setAttribute('data-animation', '');
-        this.closeEl.focus();
+        this.iframe.focus();
       }, 400);
     },
     close() {
@@ -168,6 +173,7 @@ function init() {
       if (this.back) {
         this.back.removeAttribute('data-animation');
       }
+      document.removeEventListener('keydown', this.onKeyDown);
     },
     delay: null,
     events: ['', 'webkit', 'moz', 'MS', 'o'].map(prefix => (prefix ? `${prefix}TransitionEnd` : 'transitionend')),
@@ -179,6 +185,12 @@ function init() {
       this.delay = setTimeout(this.animationStop, 1000);
       this.events.forEach(event => el.addEventListener(event, this.animationStop, false));
     },
+    onKeyDown(e) {
+      // ESCAPE key pressed
+      if (e.keyCode == 27) {
+        userInfo.close();
+      }
+    },
     animationStop() {
       const t = userInfo;
       if (!t.node) {

web/iframe.html

@@ -64,6 +64,10 @@
         transform: scale(0);
       }
     }
+
+    :focus:not(.focus-visible):not(.button) {
+      outline: none;
+    }
   </style>
 </head>
 <body>

web/package-lock.json

@@ -4800,6 +4800,11 @@
         }
       }
     },
+    "focus-visible": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-4.1.5.tgz",
+      "integrity": "sha512-yo/njtk/BB4Z2euzaZe3CZrg4u5s5uEi7ZwbHBJS2quHx51N0mmcx9nTIiImUGlgy+vf26d0CcQluahBBBL/Fw=="
+    },
     "follow-redirects": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",

web/package.json

@@ -62,6 +62,7 @@
     "axios": "^0.18.0",
     "bem-react-helper": "^1.1.2",
     "core-js": "^2.5.7",
+    "focus-visible": "^4.1.5",
     "preact": "^8.2.9",
     "preact-redux": "^2.0.3",
     "redux": "^4.0.0"