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/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) {