reimplement #1192 using dummy links

as omitting href attribute is sufficient to avoid the useless tooltip

edit.html

@@ -74,21 +74,21 @@
         </div>
         <div class="applies-value-wrapper">
           <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
-          <button class="remove-applies-to fake" i18n-text="appliesRemove" i18n-title="appliesRemove">
+          <a class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove" tabindex="0">
             <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
-          </button>
+          </a>
-          <button class="add-applies-to fake" i18n-text="appliesAdd" i18n-title="appliesAdd">
+          <a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" tabindex="0">
             <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
-          </button>
+          </a>
         </div>
       </li>
     </template>
 
     <template data-id="appliesToEverything">
       <li class="applies-to-everything" i18n-text="appliesToEverything">
-        <button class="add-applies-to fake" i18n-text="appliesAdd" i18n-title="appliesAdd">
+        <a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" tabindex="0">
           <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
-        </button>
+        </a>
       </li>
     </template>
 
@@ -101,9 +101,9 @@
         <label i18n-text="sectionCode" class="code-label"></label>
         <div class="applies-to">
           <label i18n-text="appliesLabel">
-            <button class="svg-inline-wrapper applies-to-help fake">
+            <a class="svg-inline-wrapper applies-to-help" tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-            </button>
+            </a>
           </label>
           <ul class="applies-to-list"></ul>
         </div>
@@ -124,16 +124,16 @@
         <div data-type="main">
           <div data-type="content"></div>
           <div data-type="actions">
-            <button data-action="case" i18n-title="searchCaseSensitive" class="fake">Aa</button>
+            <a data-action="case" i18n-title="searchCaseSensitive" tabindex="0">Aa</a>
-            <button data-action="prev" i18n-title="genericPrevious" data-hotkey-tooltip="findPrev" class="fake">
+            <a data-action="prev" i18n-title="genericPrevious" data-hotkey-tooltip="findPrev" tabindex="0">
               <svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
-            </button>
+            </a>
-            <button data-action="next" i18n-title="genericNext" data-hotkey-tooltip="findNext" class="fake">
+            <a data-action="next" i18n-title="genericNext" data-hotkey-tooltip="findNext" tabindex="0">
               <svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
-            </button>
+            </a>
-            <button data-action="close" i18n-title="confirmClose" data-hotkey-tooltip="=Esc" class="fake">
+            <a data-action="close" i18n-title="confirmClose" data-hotkey-tooltip="=Esc" tabindex="0">
               <svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
-            </button>
+            </a>
           </div>
         </div>
         <div data-type="status">
@@ -245,12 +245,12 @@
       <section id="basic-info">
         <div id="basic-info-name">
           <input id="name" class="style-contributor" spellcheck="false">
-          <button id="reset-name" i18n-title="customNameResetHint" class="fake" hidden>
+          <a id="reset-name" i18n-title="customNameResetHint" tabindex="0" hidden>
             <svg class="svg-icon" viewBox="0 0 20 20">
               <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
                                5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
             </svg>
-          </button>
+          </a>
           <a id="url" target="_blank"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
         </div>
         <div id="basic-info-enabled">
@@ -277,10 +277,10 @@
         <div id="mozilla-format-buttons" class="sectioned-only">
           <button id="from-mozilla" i18n-text="importLabel"></button>
           <button id="to-mozilla" i18n-text="exportLabel"></button>
-          <button id="to-mozilla-help" class="svg-inline-wrapper fake"
+          <a id="to-mozilla-help" class="svg-inline-wrapper" tabindex="0"
              i18n-title="styleMozillaFormatHeading">
             <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-          </button>
+          </a>
         </div>
       </section>
       <div id="details-wrapper">
@@ -330,9 +330,9 @@
                   <input id="editor.colorpicker" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
-                <button id="colorpicker-settings" class="svg-inline-wrapper fake" i18n-title="shortcutsNote">
+                <a id="colorpicker-settings" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
                   <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
-                </button>
+                </a>
               </div>
               <div class="option usercss-only">
                 <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
@@ -352,9 +352,9 @@
                   <select id="editor.keyMap"></select>
                   <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
                 </div>
-                <button id="keyMap-help" class="svg-inline-wrapper fake">
+                <a id="keyMap-help" class="svg-inline-wrapper" tabindex="0">
                   <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-                </button>
+                </a>
               </div>
               <div class="option aligned">
                 <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
@@ -384,9 +384,9 @@
                     </select>
                     <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
                   </div>
-                <button id="linter-settings" class="svg-inline-wrapper fake" i18n-title="linterConfigTooltip">
+                <a id="linter-settings" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
                   <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
-                </button>
+                </a>
               </div>
             </div>
           </div>
@@ -398,9 +398,9 @@
         <details id="lint" data-pref="editor.lint.expanded" class="hidden-unless-compact ignore-pref-if-compact">
           <summary>
             <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
-              <button id="lint-help" class="svg-inline-wrapper intercepts-click fake">
+              <a id="lint-help" class="svg-inline-wrapper intercepts-click" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-              </button>
+              </a>
             </h2>
           </summary>
           <div class="lint-scroll-container">

edit/moz-section-widget.js

@@ -202,7 +202,7 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
         color: ${fore};
       }
       ${C_CONTAINER} input,
-      ${C_CONTAINER} button:not(.fake),
+      ${C_CONTAINER} button,
       ${C_CONTAINER} select {
         background: rgba(255, 255, 255, ${
           Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)

edit/regexp-tester.js

@@ -96,12 +96,12 @@ const regexpTester = (() => {
             : GET_FAVICON_URL + new URL(url).hostname;
           const icon = $create('img', {src: faviconUrl});
           if (match.text.length === url.length) {
-            full.push($create('button.fake', [
+            full.push($create('a', {tabIndex: 0}, [
               icon,
               url,
             ]));
           } else {
-            partial.push($create('button.fake', [
+            partial.push($create('a', {tabIndex: 0}, [
               icon,
               url.substr(0, match.pos),
               $create('mark', match.text),

global.css

@@ -21,7 +21,7 @@ body:lang(zh-HK) {
   font-family: Arial, 'Microsoft JhengHei UI', 'Microsoft JhengHei', system-ui, sans-serif;
 }
 
-button:not(.fake) {
+button {
   -webkit-appearance: none;
   -moz-appearance: none;
   user-select: none;
@@ -41,12 +41,12 @@ button:not(.fake) {
   transition: background-color .25s, border-color .25s;
 }
 
-button:not(.fake):not(:disabled):hover {
+button:not(:disabled):hover {
   background-color: hsl(0, 0%, 95%);
   border-color: hsl(0, 0%, 52%);
 }
 
-button:not(.fake):active {
+button:active {
   background-color: hsl(0, 0%, 95%);
   border-color: hsl(0, 0%, 52%);
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
@@ -54,20 +54,8 @@ button:not(.fake):active {
   background-size: 100% 100%;
 }
 
-.fake { /* must be a single simple selector so its specificity loses to anything declared afterwards */
-  all: unset;
-  cursor: pointer;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-.fake[hidden] {
-  display: none;
-}
-
 /* For some odd reason these hovers appear lighter than all other button hovers in every browser */
-#message-box-buttons button:not(.fake):not(:disabled):hover {
+#message-box-buttons button:not(:disabled):hover {
   background-color: hsl(0, 0%, 90%);
   border-color: hsl(0, 0%, 50%);
 }
@@ -316,12 +304,12 @@ input[type="number"][data-focused-via-click]:focus {
   }
 
 /* Firefox cannot handle fractions in font-size */
-  .firefox button:not(.fake):not(.install) {
+  .firefox button:not(.install) {
     line-height: 13px;
     padding: 3px 7px;
   }
 
-  .firefox.moz-appearance-bug button:not(.fake):not(.install) {
+  .firefox.moz-appearance-bug button:not(.install) {
     padding: 2px 4px;
   }
 }

js/dlg/config-dialog.js

@@ -215,7 +215,7 @@ async function configDialog(style) {
 
   function buildConfigForm() {
     let resetter =
-      $create('button.fake.config-reset-icon', [
+      $create('a.config-reset-icon', {tabIndex: 0}, [
         $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [
           $create('SVG:title', t('genericResetLabel')),
           $create('SVG:polygon', {
@@ -230,8 +230,9 @@ async function configDialog(style) {
         case 'color':
           children = [
             $create('.colorview-swatch.config-value', [
-              va.input = $create('button.fake.color-swatch', {
+              va.input = $create('a.color-swatch', {
                 va,
+                tabIndex: 0,
                 onclick: showColorpicker,
               }),
             ]),

js/dom.js

@@ -423,6 +423,7 @@ async function waitForSheet({
   }
   // set language for a) CSS :lang pseudo and b) hyphenation
   document.documentElement.setAttribute('lang', chrome.i18n.getUILanguage());
+  document.on('keypress', clickDummyLinkOnEnter);
   document.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false});
 
   Promise.resolve().then(async () => {
@@ -490,6 +491,14 @@ async function waitForSheet({
     }
   }
 
+  function clickDummyLinkOnEnter(e) {
+    if (getEventKeyName(e) === 'Enter') {
+      const a = e.target.closest('a');
+      const isDummy = a && !a.href && a.tabIndex === 0;
+      if (isDummy) a.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    }
+  }
+
   function keepFocusRingOnTabbing(event) {
     if (event.key === 'Tab' && !event.ctrlKey && !event.altKey && !event.metaKey) {
       focusAccessibility.lastFocusedViaClick = false;

manage.html

@@ -53,18 +53,18 @@
         </a>
       </h2>
       <p class="actions">
-        <a target="_blank" class="homepage"></a>
+        <a target="_blank" class="homepage" tabindex="0"></a>
-        <button class="delete fake" i18n-title="deleteStyleLabel">
+        <a class="delete" i18n-title="deleteStyleLabel" tabindex="0">
           <svg class="svg-icon" viewBox="0 0 20 20">
             <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
                              5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
           </svg>
-        </button>
+        </a>
       </p>
       <p class="style-info" data-type="age"></p>
       <div class="applies-to">
         <div class="targets"></div>
-        <button class="expander fake">...</button>
+        <a class="expander" tabindex="0">...</a>
       </div>
     </div>
   </template>
@@ -83,27 +83,27 @@
   </template>
 
   <template data-id="configureIcon">
-    <button class="configure-usercss fake" i18n-title="configureStyle">
+    <a class="configure-usercss" i18n-title="configureStyle" tabindex="0">
       <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
-    </button>
+    </a>
   </template>
 
   <template data-id="updaterIcons">
     <span class="updater-icons">
-      <button class="check-update fake" i18n-title="checkForUpdate">
+      <a class="check-update" i18n-title="checkForUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
                    L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
           <path d="M10,6c0.8,0,1.6,0.3,2.3,0.7L10,9h3.9h2.1H16V3l-2.3,2.3C12.7,4.5,11.4,4,10,4
                    C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
         </svg>
-      </button>
+      </a>
-      <button class="update fake" i18n-title="installUpdate">
+      <a class="update" i18n-title="installUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="16,8 12,8 12,3 8,3 8,8 4,8 10,14 "/>
           <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
         </svg>
-      </button>
+      </a>
       <span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
@@ -168,13 +168,13 @@
           <h2 i18n-text="manageFilters">:
             <div class="filter-stats-wrapper">
               <span id="filters-stats"></span>
-              <button id="reset-filters" class="fake">
+              <a id="reset-filters" tabindex="0">
                 <svg class="svg-icon" viewBox="0 0 20 20">
                   <title i18n-text="genericResetLabel"></title>
                   <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
                                    5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
                 </svg>
-              </button>
+              </a>
             </div>
           </h2>
         </summary>
@@ -257,9 +257,9 @@
             </select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
-          <button id="search-help" class="fake">
+          <a id="search-help" tabindex="0">
             <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-          </button>
+          </a>
         </div>
 
       </details>
@@ -269,9 +269,9 @@
           <select id="manage.newUI.sort"></select>
           <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
         </div>
-        <button id="sorter-help" class="fake">
+        <a id="sorter-help" tabindex="0">
           <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-        </button>
+        </a>
       </div>
     </div>
 
@@ -282,11 +282,11 @@
           <button id="check-all-updates" i18n-text="checkAllUpdates">
             <span id="update-progress"></span>
           </button>
-          <button id="update-history" i18n-title="genericHistoryLabel" class="fake">
+          <a id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
             <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
               <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
             </svg>
-          </button>
+          </a>
         </div>
 
         <div id="update-all">

options.html

@@ -149,9 +149,10 @@
           </label>
           <label>
             <span i18n-text="manageFavicons">
-              <button i18n-title="manageFaviconsHelp" data-cmd="note" class="svg-inline-wrapper fake">
+              <a i18n-title="manageFaviconsHelp"
+                 data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-              </button>
+              </a>
             </span>
             <span class="onoffswitch">
               <input type="checkbox" id="manage.newUI.favicons" class="slider">
@@ -177,9 +178,10 @@
         <div class="items">
           <label>
             <span i18n-text="optionsUpdateInterval">
-              <button i18n-title="optionsUpdateImportNote" data-cmd="note" class="svg-inline-wrapper fake">
+              <a i18n-title="optionsUpdateImportNote"
+                 data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-              </button>
+              </a>
             </span>
             <input type="number" min="0" id="updateInterval">
           </label>
@@ -213,24 +215,25 @@
       <div class="block" id="advanced">
         <div class="collapsible-resizer">
           <h1 i18n-text="optionsAdvanced">
-            <button class="svg-inline-wrapper is-collapsed fake">
+            <a class="svg-inline-wrapper is-collapsed" tabindex="0">
               <svg class="svg-icon" viewBox="0 0 1792 1792">
                 <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
               </svg>
-            </button>
+            </a>
-            <button class="svg-inline-wrapper is-expanded fake">
+            <a class="svg-inline-wrapper is-expanded" tabindex="0">
               <svg class="svg-icon" viewBox="0 0 1792 1792">
                 <path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
               </svg>
-            </button>
+            </a>
           </h1>
         </div>
         <div class="items">
           <label class="chromium-only">
             <span i18n-text="optionsAdvancedStyleViaXhr">
-              <button i18n-title="optionsAdvancedStyleViaXhrNote" data-cmd="note" class="svg-inline-wrapper fake">
+              <a i18n-title="optionsAdvancedStyleViaXhrNote"
+                 data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-              </button>
+              </a>
             </span>
             <span class="onoffswitch">
               <input type="checkbox" id="styleViaXhr" class="slider">
@@ -240,9 +243,10 @@
           <label>
             <span>
               <span i18n-html="optionsAdvancedPatchCsp"></span>
-              <button i18n-title="optionsAdvancedPatchCspNote" data-cmd="note" class="svg-inline-wrapper fake">
+              <a i18n-title="optionsAdvancedPatchCspNote"
+                 data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-              </button>
+              </a>
             </span>
             <span class="onoffswitch">
               <input type="checkbox" id="patchCsp" class="slider">
@@ -251,9 +255,10 @@
           </label>
           <label>
             <span i18n-text="optionsAdvancedExposeIframes">
-              <button i18n-title="optionsAdvancedExposeIframesNote" data-cmd="note" class="svg-inline-wrapper fake">
+              <a i18n-title="optionsAdvancedExposeIframesNote"
+                 data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-              </button>
+              </a>
             </span>
             <span class="onoffswitch">
               <input type="checkbox" id="exposeIframes" class="slider">

popup.html

@@ -18,19 +18,19 @@
           </label>
         </div>
         <div class="actions">
-          <button class="configure fake" i18n-title="configureStyle">
+          <a class="configure" i18n-title="configureStyle" tabindex="0">
             <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
-          </button>
+          </a>
-          <button class="style-edit-link fake" i18n-title="editStyleLabel">
+          <a class="style-edit-link" href="edit.html" i18n-title="editStyleLabel">
             <svg class="svg-icon edit" viewBox="0 0 14 16">
               <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
             </svg>
-          </button>
+          </a>
-          <button class="menu-button fake" i18n-title="popupMenuButtonTooltip">
+          <a class="menu-button" i18n-title="popupMenuButtonTooltip" tabindex="0">
             <svg class="svg-icon menu-button-icon" viewBox="0 0 3 16">
               <path fill-rule="evenodd" d="M0 2.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zm0 5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zM1.5 14a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
             </svg>
-          </button>
+          </a>
         </div>
       </div>
       <div class="menu">
@@ -212,7 +212,7 @@
         </span>
       </div>
       <div id="write-style">
-        <button id="write-for-frames" title="<IFRAME>..." class="fake" hidden></button>
+        <a id="write-for-frames" title="<IFRAME>..." tabindex="0" hidden></a>
         <span id="write-style-for" i18n-text="writeStyleFor"></span>
       </div>
     </div>

popup/popup.js

@@ -180,9 +180,10 @@ function initUnreachable(isStore) {
       FIREFOX >= 60 && t('unreachableMozSiteHint'),
     ].filter(Boolean).join('\n');
     const renderToken = s => s[0] === '<'
-      ? $create('button.fake.copy', {
+      ? $create('a.copy', {
         textContent: s.slice(1, -1),
         onclick: Events.copyContent,
+        tabIndex: 0,
         title: t('copy'),
       })
       : s;