From a2c80f7017e0091294dea3ad790ec330aae2f838 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 29 Mar 2018 06:37:04 +0300
Subject: [PATCH] Vivaldi requires tabindex="0" for <a> with svg icon inside

---
 edit.html    | 22 +++++++++++-----------
 manage.html  | 25 +++++++++++++------------
 options.html | 16 ++++++++++++----
 popup.html   | 10 +++++-----
 4 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/edit.html b/edit.html
index a21f5a0d..29ff7666 100644
--- a/edit.html
+++ b/edit.html
@@ -117,7 +117,7 @@
         <br>
         <div class="applies-to">
           <label i18n-text="appliesLabel">
-            <a href="#" class="svg-inline-wrapper applies-to-help">
+            <a href="#" class="svg-inline-wrapper applies-to-help" tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </label>
@@ -135,14 +135,14 @@
         <div data-type="main">
           <div data-type="content"></div>
           <div data-type="actions">
-            <a data-action="case" i18n-title="searchCaseSensitive" href="#">Aa</a>
-            <a data-action="prev" i18n-title="genericPrevious" href="#" data-hotkey-tooltip="findPrev">
+            <a data-action="case" i18n-title="searchCaseSensitive" href="#" tabindex="0">Aa</a>
+            <a data-action="prev" i18n-title="genericPrevious" href="#" data-hotkey-tooltip="findPrev" tabindex="0">
               <svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
             </a>
-            <a data-action="next" i18n-title="genericNext" href="#" data-hotkey-tooltip="findNext">
+            <a data-action="next" i18n-title="genericNext" href="#" data-hotkey-tooltip="findNext" tabindex="0">
               <svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
             </a>
-            <a data-action="close" i18n-title="confirmClose" href="#" data-hotkey-tooltip="=Esc">
+            <a data-action="close" i18n-title="confirmClose" href="#" data-hotkey-tooltip="=Esc" tabindex="0">
               <svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
             </a>
           </div>
@@ -271,7 +271,7 @@
         </div>
         <div id="mozilla-format-container">
           <h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading">
-            <a id="to-mozilla-help" class="svg-inline-wrapper" href="#">
+            <a id="to-mozilla-help" class="svg-inline-wrapper" href="#" tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </h2>
@@ -316,7 +316,7 @@
             <input id="editor.colorpicker" type="checkbox">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
-          <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote">
+          <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
             <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
           </a>
         </div>
@@ -336,7 +336,7 @@
             <select id="editor.keyMap"></select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
-          <a id="keyMap-help" href="#" class="svg-inline-wrapper">
+          <a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
             <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
           </a>
         </div>
@@ -368,7 +368,7 @@
               </select>
               <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
             </div>
-          <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
+          <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
             <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
           </a>
         </div>
@@ -376,7 +376,7 @@
       <details id="lint" class="hidden" data-pref="editor.lint.expanded">
         <summary>
           <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
-            <a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click">
+            <a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click" tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </h2>
@@ -391,7 +391,7 @@
     </div>
     <section id="sections">
       <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span>
-        <a id="sections-help" href="#" class="svg-inline-wrapper">
+        <a id="sections-help" href="#" class="svg-inline-wrapper" tabindex="0">
           <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
         </a>
       </h2>
diff --git a/manage.html b/manage.html
index c70df145..985a3efa 100644
--- a/manage.html
+++ b/manage.html
@@ -64,8 +64,8 @@
         <a class="style-name-link"></a>
       </h2>
       <p class="actions">
-        <a target="_blank" class="homepage"></a>
-        <a href="#" class="delete" i18n-title="deleteStyleLabel">
+        <a target="_blank" class="homepage" tabindex="0"></a>
+        <a href="#" 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 "/>
@@ -74,7 +74,7 @@
       </p>
       <div class="applies-to">
         <div class="targets"></div>
-        <a href="#" class="expander">...</a>
+        <a href="#" class="expander" tabindex="0">...</a>
       </div>
     </div>
   </template>
@@ -93,14 +93,14 @@
   </template>
 
   <template data-id="configureIcon">
-    <a href="#" class="configure-usercss" i18n-title="configureStyle">
+    <a href="#" class="configure-usercss" i18n-title="configureStyle" tabindex="0">
       <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
     </a>
   </template>
 
   <template data-id="updaterIcons">
     <span class="updater-icons">
-      <a href="#" class="check-update" i18n-title="checkForUpdate">
+      <a href="#" 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"/>
@@ -108,7 +108,7 @@
                    C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
         </svg>
       </a>
-      <a href="#" class="update" i18n-title="installUpdate">
+      <a href="#" 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"/>
@@ -175,7 +175,7 @@
   <details id="filters" data-pref="manage.filters.expanded">
     <summary>
       <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
-      <a id="reset-filters" href="#">
+      <a id="reset-filters" href="#" 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
@@ -250,7 +250,7 @@
       <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
              data-filter=":not(.not-matching)"
              data-filter-hide=".not-matching">
-      <a href="#" id="search-help">
+      <a href="#" id="search-help" tabindex="0">
         <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
       </a>
     </div>
@@ -262,14 +262,14 @@
       <select id="manage.newUI.sort"></select>
       <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
     </div>
-    <a href="#" id="sorter-help">
+    <a href="#" id="sorter-help" tabindex="0">
       <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
     </a>
   </div>
 
   <p class="nowrap">
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
-    <a href="#" id="update-history" i18n-title="genericHistoryLabel">
+    <a href="#" 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>
@@ -292,7 +292,8 @@
       <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
       <a id="usercss-wiki"
          href="https://github.com/openstyles/stylus/wiki/Usercss"
-         i18n-title="externalUsercssDocument">
+         i18n-title="externalUsercssDocument"
+         tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
         </svg>
@@ -315,7 +316,7 @@
         <label for="manage.newUI.favicons" i18n-text="manageFavicons">
           <input id="manage.newUI.favicons" type="checkbox">
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <a href="#" data-toggle-on-click="#faviconsHelp">
+          <a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
             <svg class="svg-icon select-arrow">
               <title i18n-text="optionsSubheading"></title>
               <use xlink:href="#svg-icon-select-arrow"/>
diff --git a/options.html b/options.html
index 63dbecf1..edf5850e 100644
--- a/options.html
+++ b/options.html
@@ -113,7 +113,11 @@
       <div class="items">
         <label>
           <span i18n-text="optionsUpdateInterval">
-            <a data-cmd="note" i18n-title="optionsUpdateImportNote" href="#" class="svg-inline-wrapper">
+            <a data-cmd="note"
+               i18n-title="optionsUpdateImportNote"
+               href="#"
+               class="svg-inline-wrapper"
+               tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </span>
@@ -125,12 +129,12 @@
     <div class="block" id="advanced">
       <div class="collapsible-resizer">
         <h1 i18n-text="optionsAdvanced">
-          <a href="#" class="svg-inline-wrapper is-collapsed">
+          <a href="#" 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>
           </a>
-          <a href="#" class="svg-inline-wrapper is-expanded">
+          <a href="#" 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>
@@ -140,7 +144,11 @@
       <div class="items">
         <label>
           <span i18n-text="optionsAdvancedExposeIframes">
-            <a data-cmd="note" i18n-title="optionsAdvancedExposeIframesNote" href="#" class="svg-inline-wrapper">
+            <a data-cmd="note"
+               i18n-title="optionsAdvancedExposeIframesNote"
+               href="#"
+               class="svg-inline-wrapper"
+               tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </span>
diff --git a/popup.html b/popup.html
index edca583b..7bb779eb 100644
--- a/popup.html
+++ b/popup.html
@@ -31,17 +31,17 @@
         </label>
       </div>
       <div class="actions">
-        <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
-        <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
-        <a href="#" class="configure" i18n-title="configureStyle">
+        <a href="#" class="enable" i18n-text="enableStyleLabel" tabindex="0"></a>
+        <a href="#" class="disable" i18n-text="disableStyleLabel" tabindex="0"></a>
+        <a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
           <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
         </a>
-        <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
+        <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
           <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>
         </a>
-        <a href="#" class="delete" i18n-title="deleteStyleLabel">
+        <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
           <svg class="svg-icon remove" viewBox="0 0 14 16">
             <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
           </svg>