Copyable elements accessibility (#808)

popup/popup.css

@@ -714,13 +714,19 @@ body.blocked .actions > .main-controls {
   margin: 0;
 }
 
-.blocked-info strong {
+.blocked-info .copy {
   cursor: pointer;
   transition: all .1s;
   border-bottom: 1px dotted #000;
+  text-decoration: none;
+  font-weight: bold;
 }
 
-.blocked-info strong.copied {
+.blocked-info .copy:hover {
+  color: #000;
+}
+
+.blocked-info .copy.copied {
   background: hsl(170, 40%, 80%);
   color: #000;
 }
@@ -745,7 +751,7 @@ body.blocked .actions > .main-controls {
   display: block;
 }
 
-.blocked-info strong:after {
+.blocked-info .copy:after {
   content: '';
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAAAAAKVnuc8AAAABdFJOUwBA5thmAAAAIElEQVQI12NgYGCEAgYgkwEMGBFijEhixDMZkUSRLQAACpYALjrE2uIAAAAASUVORK5CYII=)center no-repeat;
   height: 10px;

popup/popup.js

@@ -142,10 +142,12 @@ function initPopup() {
           const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
                        (FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
           const renderToken = s => s[0] === '<'
-            ? $create('strong', {
+            ? $create('a', {
               textContent: s.slice(1, -1),
               onclick: handleEvent.copyContent,
-              tabIndex: -1,
+              href: '#',
+              className: 'copy',
+              tabIndex: 0,
               title: t('copy'),
             })
             : s;
@@ -590,7 +592,8 @@ Object.assign(handleEvent, {
   },
 
   copyContent(event) {
-    const target = event.target;
+    event.preventDefault();
+    const target = document.activeElement;
     const message = $('.copy-message');
     navigator.clipboard.writeText(target.textContent);
     target.classList.add('copied');