Merge pull request #294 from openstyles/narcolepticinsomniac-accessibility

Hide focus outlines without crippling accessibility, plus buttons

edit.html

@@ -107,7 +107,9 @@
         <br>
         <div class="applies-to">
           <label i18n-text="appliesLabel">
-            <svg class="svg-icon info applies-to-help"><use xlink:href="#svg-icon-help"/></svg>
+            <a href="#" class="svg-inline-wrapper applies-to-help">
+              <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+            </a>
           </label>
           <ul class="applies-to-list"></ul>
         </div>
@@ -191,20 +193,24 @@
           <label id="enabled-label" i18n-text="styleEnabledLabel">
             <input type="checkbox" id="enabled" class="style-contributor">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label><!--
+          </label>
-          --><svg id="toggle-style-help" class="svg-icon info">
+          <a href="#" id="toggle-style-help" class="svg-inline-wrapper">
-            <use xlink:href="#svg-icon-help"/>
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-          </svg>
+          </a>
         </div>
       </section>
       <section id="actions">
         <div>
           <button id="save-button" i18n-text="styleSaveLabel"></button>
           <button id="beautify" i18n-text="styleBeautify"></button>
-          <a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
+          <a href="manage.html" tabindex="-1"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
         </div>
         <div id="mozilla-format-container">
-          <h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading"><svg id="to-mozilla-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
+          <h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading">
+            <a class="svg-inline-wrapper" href="#">
+              <svg id="to-mozilla-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+            </a>
+          </h2>
           <button id="from-mozilla" i18n-text="importLabel"></button>
           <button id="to-mozilla" i18n-text="exportLabel"></button>
         </div>
@@ -246,11 +252,9 @@
             <input id="editor.colorpicker" type="checkbox">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
-          <span class="svg-inline-wrapper" i18n-title="shortcutsNote">
+          <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote">
-            <svg id="colorpicker-settings" class="svg-icon settings">
+            <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
-              <use xlink:href="#svg-icon-settings"/>
+          </a>
-            </svg>
-          </span>
         </div>
         <div class="option usercss-only">
           <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
@@ -268,9 +272,9 @@
             <select id="editor.keyMap"></select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
-          <span class="svg-inline-wrapper">
+          <a id="keyMap-help" href="#" class="svg-inline-wrapper">
-            <svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-          </span>
+          </a>
         </div>
         <div class="option aligned">
           <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
@@ -300,19 +304,17 @@
               </select>
               <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
             </div>
-          <span class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
+          <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
-            <svg id="linter-settings" class="svg-icon settings">
+            <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
-              <use xlink:href="#svg-icon-settings"/>
+          </a>
-            </svg>
-          </span>
         </div>
       </details>
       <details id="lint" class="hidden" data-pref="editor.lint.expanded">
         <summary>
-          <h2 i18n-text="linterIssues">: <span id="issue-count"></span><!-- EAT SPACE
+          <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
-          --><svg id="lint-help" class="svg-icon info intercepts-click">
+            <a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click">
-              <use xlink:href="#svg-icon-help"/>
+              <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-            </svg>
+            </a>
           </h2>
         </summary>
         <div></div>
@@ -324,7 +326,11 @@
       </div>
     </div>
     <section id="sections">
-      <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><svg id="sections-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
+      <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span>
+        <a id="sections-help" href="#" class="svg-inline-wrapper">
+          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+        </a>
+      </h2>
     </section>
     <div id="help-popup">
       <div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>

edit/colorpicker-helper.js

@@ -62,7 +62,8 @@ onDOMscriptReady('/colorview.js').then(() => {
     cm.state.colorpicker.openPopup(prefs.get('editor.colorpicker.color'));
   }
 
-  function configureColorpicker() {
+  function configureColorpicker(event) {
+    event.preventDefault();
     const input = $create('input', {
       type: 'search',
       spellcheck: false,

edit/edit.css

@@ -32,6 +32,15 @@ body {
   margin-bottom: 4px;
 }
 
+#options > div.option:nth-last-of-type(7) {
+  margin-bottom: 12px;
+}
+
+#options > div.option:nth-last-of-type(7) + .usercss-only {
+  margin-top: -8px;
+  margin-bottom: 12px;
+}
+
 #basic-info-enabled {
   margin-top: 2px;
 }
@@ -93,24 +102,35 @@ label {
 #url:not([href^="http"]) {
   display: none;
 }
-#save-button {
-  opacity: .5;
-  pointer-events: none;
-}
-.dirty #save-button {
-  opacity: 1;
-  pointer-events: all;
-}
 .svg-icon {
   cursor: pointer;
   vertical-align: middle;
   transition: fill .5s;
   width: 16px;
   height: 16px;
-  margin-left: 0.2rem;
 }
-h2 .svg-icon, label .svg-icon {
+.svg-inline-wrapper {
-  margin-top: -1px;
+  margin-left: .2rem;
+  display: inline-block;
+  vertical-align: middle;
+}
+#mozilla-format-heading .svg-inline-wrapper {
+  margin-left: 0;
+}
+#basic-info-enabled .svg-inline-wrapper {
+  margin-left: .1rem;
+}
+#colorpicker-settings.svg-inline-wrapper {
+  margin: -2px 0 0 .1rem;
+}
+.svg-inline-wrapper.applies-to-help {
+  margin: -2px 0 0 .25rem;
+}
+.aligned .svg-inline-wrapper {
+  margin: -2px 0 0 .3rem;
+}
+#sections-help {
+  margin-left: -1px;
 }
 .svg-icon.info {
   width: 14px;
@@ -145,7 +165,6 @@ input:invalid {
   align-items: center;
   margin-left: -13px;
   cursor: pointer;
-  outline: none;
   margin-top: 8px;
   margin-bottom: 8px;
 }
@@ -360,7 +379,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
 }
 .regexp-report summary, .regexp-report div {
   cursor: pointer;
-  outline: none;
 }
 .regexp-report mark {
   background-color: rgba(255, 255, 0, .5);
@@ -376,7 +394,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
   font-weight: bold;
   margin-left: -1rem;
   margin-bottom: .5rem;
-  outline: none;
   cursor: default;
   overflow-wrap: break-word;
 }
@@ -609,6 +626,11 @@ html:not(.usercss) .usercss-only,
   display: none !important; /* hide during page init */
 }
 
+.usercss #name {
+  background-color: #eee;
+  color: #888;
+}
+
 #sections .single-editor {
   margin: 0;
   padding: 0;
@@ -805,4 +827,4 @@ html:not(.usercss) .usercss-only,
     flex-wrap: wrap;
     white-space: normal;
   }
-}
+}

edit/edit.js

@@ -273,8 +273,6 @@ function initHooks() {
   }
 }
 
-// common for usercss and classic
-
 function onChange(event) {
   const node = event.target;
   if ('savedValue' in node) {
@@ -317,12 +315,6 @@ function setCleanItem(node, isClean) {
 function isCleanGlobal() {
   const clean = Object.keys(dirty).length === 0;
   setDirtyClass(document.body, !clean);
-    // let saveBtn = $('#save-button')
-    // if (clean){
-    //     //saveBtn.removeAttribute('disabled');
-    // }else{
-    //     //saveBtn.setAttribute('disabled', true);
-    // }
   return clean;
 }
 
@@ -406,6 +398,7 @@ function updateTitle() {
   const clean = isCleanGlobal();
   const title = styleId === null ? t('addStyleTitle') : t('editStyleTitle', [name]);
   document.title = clean ? title : DIRTY_TITLE.replace('$', title);
+  $('#save-button').disabled = clean;
 }
 
 function updateLintReportIfEnabled(...args) {
@@ -500,19 +493,23 @@ function fromMozillaFormat() {
   }
 }
 
-function showSectionHelp() {
+function showSectionHelp(event) {
+  event.preventDefault();
   showHelp(t('styleSectionsTitle'), t('sectionHelp'));
 }
 
-function showAppliesToHelp() {
+function showAppliesToHelp(event) {
+  event.preventDefault();
   showHelp(t('appliesLabel'), t('appliesHelp'));
 }
 
-function showToMozillaHelp() {
+function showToMozillaHelp(event) {
+  event.preventDefault();
   showHelp(t('styleMozillaFormatHeading'), t('styleToMozillaFormatHelp'));
 }
 
-function showToggleStyleHelp() {
+function showToggleStyleHelp(event) {
+  event.preventDefault();
   showHelp(t('helpAlt'), t('styleEnabledToggleHint'));
 }
 

edit/lint.js

@@ -149,7 +149,8 @@ var linterConfig = {
   },
 
   // this is an event listener so it can't refer to self via 'this'
-  openOnClick() {
+  openOnClick(event) {
+    event.preventDefault();
     setupLinterPopup(linterConfig.stringify());
   },
 

global.css

@@ -7,7 +7,8 @@ button {
   font: 400 13.3333px Arial;
   color: #000;
   background-color: hsl(0, 0%, 100%);
-  background: url(../images/button.png)repeat-x;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
+  background-repeat: repeat-x;
   background-size: 100% 100%;
   transition: background-color .25s, border-color .25s;
 }
@@ -17,6 +18,14 @@ button:not(:disabled):hover {
   border-color: hsl(0, 0%, 52%);
 }
 
+button:active {
+  background-color: hsl(0, 0%, 95%);
+  border-color: hsl(0, 0%, 52%);
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
+  background-repeat: repeat-x;
+  background-size: 100% 100%;
+}
+
 /* For some odd reason these hovers appear lighter than all other button hovers in every browser */
 #message-box-buttons button:not(:disabled):hover {
   background-color: hsl(0, 0%, 90%);
@@ -60,12 +69,11 @@ input[type="checkbox"]:not(.slider) {
   display: inline-flex;
   border-radius: 2px;
   background-color: hsla(0, 0%, 0%, .1);
-  outline: none;
   margin: 0;
   transition: background-color .1s, border-color .1s;
 }
 
-input[type="checkbox"]:not(.slider):not(:disabled):hover {
+input[type="checkbox"]:not(.slider):hover {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
@@ -128,7 +136,6 @@ select {
 input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
-  outline: none;
   background: hsl(0, 0%, 88%);
   border-radius: 50%;
   border: 1px solid hsl(0, 0%, 60%);
@@ -170,8 +177,14 @@ select[disabled] > option {
   display: none !important;
 }
 
+[data-focused-via-click] :focus,
+[data-focused-via-click]:focus {
+  outline: none;
+}
+
 @supports (-moz-appearance: none) {
   .moz-appearance-bug .svg-icon.checked,
+  .moz-appearance-bug .onoffswitch input,
   .moz-appearance-bug input[type="radio"]:after {
     display: none !important;
   }

js/dom.js

@@ -57,6 +57,7 @@ $$.remove = (selector, base = document) => {
 onDOMready().then(() => {
   $.remove('#firefox-transitions-bug-suppressor');
   initCollapsibles();
+  focusAccessibility();
 });
 
 if (!chrome.app && chrome.windows) {
@@ -314,3 +315,46 @@ function initCollapsibles({bindClickOn = 'h2'} = {}) {
     prefs.set(el.dataset.pref, el.open);
   }
 }
+
+
+function focusAccessibility() {
+  // Makes the focus outline appear on keyboard tabbing, but not on mouse clicks.
+  // Since we don't want full layout recalc, we modify only the closest focusable element,
+  // which we try to find in DOM for this many parentElement jumps:
+  const focusables = focusAccessibility.ELEMENTS =
+    ['a', 'button', 'input', 'label', 'select', 'summary'];
+  const GIVE_UP_DEPTH = 4;
+  addEventListener('mousedown', suppressOutlineOnClick, {passive: true});
+  addEventListener('keydown', keepOutlineOnTab, {passive: true});
+
+  function suppressOutlineOnClick({target}) {
+    for (let el = target, i = 0; el && i++ < GIVE_UP_DEPTH; el = el.parentElement) {
+      if (focusables.includes(el.localName)) {
+        if (el.dataset.focusedViaClick === undefined) {
+          el.dataset.focusedViaClick = '';
+        }
+        return;
+      }
+    }
+  }
+
+  function keepOutlineOnTab(event) {
+    if (event.which === 9) {
+      setTimeout(keepOutlineOnTab, 0, true);
+      return;
+    } else if (event !== true) {
+      return;
+    }
+    let el = document.activeElement;
+    if (!el || !focusables.includes(el.localName)) {
+      return;
+    }
+    if (el.dataset.focusedViaClick !== undefined) {
+      delete el.dataset.focusedViaClick;
+    }
+    el = el.closest('[data-focused-via-click]');
+    if (el) {
+      delete el.dataset.focusedViaClick;
+    }
+  }
+}

manage.html

@@ -41,7 +41,7 @@
       </p>
       <p class="actions">
         <a class="style-edit-link">
-          <button i18n-text="editStyleLabel"></button>
+          <button i18n-text="editStyleLabel" tabindex="-1"></button>
         </a>
         <button class="enable" i18n-text="enableStyleLabel"></button>
         <button class="disable" i18n-text="disableStyleLabel"></button>
@@ -64,16 +64,16 @@
       </h2>
       <p class="actions">
         <a target="_blank" class="homepage"></a>
-        <span i18n-title="deleteStyleLabel">
+        <a href="#" class="delete" i18n-title="deleteStyleLabel">
-          <svg class="svg-icon delete" viewBox="0 0 20 20">
+          <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>
-        </span>
+        </a>
       </p>
       <div class="applies-to">
         <div class="targets"></div>
-        <span class="expander">...</span>
+        <a href="#" class="expander">...</a>
       </div>
     </div>
   </template>
@@ -92,27 +92,27 @@
   </template>
 
   <template data-id="configureIcon">
-    <span class="configure-usercss" i18n-title="configureStyle">
+    <a href="#" class="configure-usercss" i18n-title="configureStyle">
       <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
-    </span>
+    </a>
   </template>
 
   <template data-id="updaterIcons">
     <span class="updater-icons">
-      <span class="check-update" i18n-title="checkForUpdate">
+      <a href="#" class="check-update" i18n-title="checkForUpdate">
         <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>
-      </span>
+      </a>
-      <span class="update" i18n-title="installUpdate">
+      <a href="#" class="update" i18n-title="installUpdate">
         <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>
-      </span>
+      </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"/>
@@ -166,11 +166,13 @@
   <details id="filters" data-pref="manage.filters.expanded">
     <summary>
       <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
-      <svg id="reset-filters" class="svg-icon" viewBox="0 0 20 20">
+      <a id="reset-filters" href="#">
-        <title i18n-text="genericResetLabel"></title>
+        <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
+          <title i18n-text="genericResetLabel"></title>
-                         5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
+          <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
-      </svg>
+                           5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
+        </svg>
+      </a>
     </summary>
 
     <div class="filter-selection">
@@ -239,18 +241,20 @@
       <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
              data-filter=":not(.not-matching)"
              data-filter-hide=".not-matching">
-      <svg id="search-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+      <a href="#" id="search-help">
+        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+      </a>
     </div>
 
   </details>
 
   <p class="nowrap">
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
-    <span id="update-history" i18n-title="genericHistoryLabel">
+    <a href="#" id="update-history" i18n-title="genericHistoryLabel">
       <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>
-    </span>
+    </a>
   </p>
 
   <p>
@@ -261,7 +265,7 @@
 
   <div id="add-style-wrapper">
     <a href="edit.html">
-      <button id="add-style-label" i18n-text="addStyleLabel"></button>
+      <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
     </a>
     <label id="add-style-as-usercss-wrapper">
       <input type="checkbox" id="newStyleAsUsercss">
@@ -292,10 +296,12 @@
         <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>
-          <svg class="svg-icon select-arrow" data-toggle-on-click="#faviconsHelp">
+          <a href="#" data-toggle-on-click="#faviconsHelp">
-            <title i18n-text="optionsSubheading"></title>
+            <svg class="svg-icon select-arrow">
-            <use xlink:href="#svg-icon-select-arrow"/>
+              <title i18n-text="optionsSubheading"></title>
-          </svg>
+              <use xlink:href="#svg-icon-select-arrow"/>
+            </svg>
+          </a>
         </label>
         <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
           <div>
@@ -317,7 +323,7 @@
       <a id="find-editor-styles"
          href="https://userstyles.org/styles/browse/chrome-extension"
          i18n-title="editorStylesButton"
-         target="_blank"><button i18n-text="cm_theme"></button></a>
+         target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
     </p>
 
   </details>

manage/config-dialog.css

@@ -97,11 +97,8 @@
   visibility: hidden;
 }
 
-.svg-icon.config-reset-icon {
+.config-reset-icon .svg-icon {
-  /*position: absolute;*/
-  pointer-events: all !important;
   cursor: pointer;
-  /*right: -7px;*/
   fill: #aaa;
   width: 16px;
   height: 16px;
@@ -110,7 +107,7 @@
   flex-shrink: 0;
 }
 
-.svg-icon.config-reset-icon:hover {
+.config-reset-icon:hover .svg-icon {
   fill: #666;
 }
 
@@ -155,9 +152,11 @@
 
 .color-swatch {
   position: absolute;
+  top: 0;
+  left: 0;
   border: 1px solid gray;
-  margin-top: -22px;
   cursor: pointer;
+  opacity: 1;
 }
 
 .colorpicker-popup {

manage/config-dialog.js

@@ -195,21 +195,25 @@ function configDialog(style) {
   }
 
   function buildConfigForm() {
-    let resetter = $create('SVG:svg.svg-icon.config-reset-icon', {viewBox: '0 0 20 20'}, [
+    let resetter =
-      $create('SVG:title', t('genericResetLabel')),
+      $create('a.config-reset-icon', {href: '#'}, [
-      $create('SVG:polygon', {
+        $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [
-        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 ' +
+          $create('SVG:title', t('genericResetLabel')),
-                '5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10',
+          $create('SVG: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',
+          })
+        ])
+      ]);
     for (const va of vars) {
       let children;
       switch (va.type) {
         case 'color':
           children = [
             $create('.cm-colorview.config-value', [
-              va.input = $create('.color-swatch', {
+              va.input = $create('a.color-swatch', {
                 va,
+                href: '#',
                 onclick: showColorpicker
               }),
             ]),
@@ -269,6 +273,8 @@ function configDialog(style) {
           ...children,
           resetter,
         ]));
+
+      va.savedValue = va.value;
     }
   }
 
@@ -307,6 +313,7 @@ function configDialog(style) {
     const el = va.input.closest('label');
     el.classList.toggle('dirty', Boolean(va.dirty));
     el.classList.toggle('nondefault', !isDefault(va));
+    $('.config-reset-icon', el).disabled = isDefault(va);
   }
 
   function resetOnClick(event) {
@@ -316,7 +323,8 @@ function configDialog(style) {
     onchange({target: this.va.input});
   }
 
-  function showColorpicker() {
+  function showColorpicker(event) {
+    event.preventDefault();
     window.removeEventListener('keydown', messageBox.listeners.key, true);
     const box = $('#message-box-contents');
     colorpicker.show({

manage/filters.js

@@ -31,7 +31,8 @@ onDOMready().then(onBackgroundReady).then(() => {
   if (urlFilterParam) {
     $('#search').value = 'url:' + urlFilterParam;
   }
-  $('#search-help').onclick = () => {
+  $('#search-help').onclick = event => {
+    event.preventDefault();
     messageBox({
       className: 'help-text',
       title: t('searchStyles'),
@@ -352,7 +353,9 @@ function showFiltersStats() {
     debounce(showFiltersStats, 100);
     return;
   }
-  $('#filters summary').classList.toggle('active', filtersSelector.hide !== '');
+  const active = filtersSelector.hide !== '';
+  $('#filters summary').classList.toggle('active', active);
+  $('#reset-filters').disabled = !active;
   const numTotal = BG.cachedStyles.list.length;
   const numHidden = installed.getElementsByClassName('entry hidden').length;
   const numShown = Math.min(numTotal - numHidden, installed.children.length);

manage/incremental-search.js

@@ -7,6 +7,7 @@ onDOMready().then(() => {
   let focusedName = '';
   const input = $create('textarea', {
     spellcheck: false,
+    attributes: {tabindex: -1},
     oninput: incrementalSearch,
   });
   replaceInlineStyle({

manage/manage.css

@@ -145,12 +145,11 @@ select {
 }
 
 .svg-icon.config {
-  width: 16px;
+  transform: scale(.8);
-  height: 16px;
 }
 
 .homepage {
-  margin-left: 0.1em;
+  margin-left: 0.25em;
   margin-right: 0.1em;
 }
 
@@ -159,8 +158,7 @@ select {
 }
 
 .homepage .svg-icon {
-  margin-top: -4px;
+  margin-top: 0;
-  margin-left: .5ex;
 }
 
 .style-name {
@@ -190,6 +188,7 @@ select {
 
 .actions > * {
   margin-bottom: .25rem;
+  display: inline-block;
 }
 
 .actions > *:not(:last-child) {
@@ -212,7 +211,6 @@ select {
 .applies-to-extra-expander {
   font-weight: bold;
   cursor: pointer;
-  outline: none;
 }
 
 .applies-to-extra-expander {
@@ -284,7 +282,6 @@ select {
   align-items: center;
   margin-left: -13px;
   cursor: pointer;
-  outline: none;
 }
 
 #header summary h2 {
@@ -363,7 +360,6 @@ select {
 
 .filter-selection select {
   height: 18px;
-  outline: none;
   border: none;
   max-width: 100%;
   padding-left: 4px;
@@ -449,9 +445,8 @@ select {
   color: hsla(180, 100%, 15%, 1);
 }
 
-.newUI .homepage .svg-icon {
+.newUI .homepage:not([href=""]) {
   position: absolute;
-  margin-top: 0;
   margin-left: -28px;
 }
 
@@ -462,11 +457,9 @@ select {
 }
 
 .newUI .actions > * {
-  margin: 0;
+  margin: 0 6px 0 0;
-}
+  width: 20px;
-
+  height: 20px;
-.newUI .actions .svg-icon {
-    margin-right: 8px;
 }
 
 .newUI .updater-icons > * {
@@ -488,7 +481,7 @@ select {
 
 .newUI .checking-update .check-update {
   opacity: 0;
-  display: inline;
+  display: inline-block;
   pointer-events: none;
 }
 
@@ -496,7 +489,7 @@ select {
 .newUI .no-update:not(.update-problem):not(.update-done) .up-to-date,
 .newUI .no-update.update-problem .check-update,
 .newUI .update-done .updated {
-  display: inline;
+  display: inline-block;
 }
 
 .newUI .up-to-date svg,
@@ -595,6 +588,7 @@ select {
   line-height: .5ex;
   vertical-align: super;
   letter-spacing: .1ex;
+  text-decoration: none;
 }
 
 .newUI .applies-to:not(.has-more) .expander {
@@ -602,7 +596,7 @@ select {
 }
 
 .newUI .has-favicons .applies-to .expander {
-  padding-left: 20px;
+  margin-left: 20px;
 }
 
 .newUI .target:hover {
@@ -661,15 +655,21 @@ select {
   margin-right: .5em;
 }
 
-#newUIoptions [data-toggle-on-click] {
+#newUIoptions [data-toggle-on-click="#faviconsHelp"] {
-  transform: rotate(-90deg);
+  width: 14px;
-  cursor: pointer;
+  height: 14px;
-  right: -16px;
+  display: inline-block;
-  top: 0;
+  vertical-align: middle;
-  pointer-events: auto;
+  position: relative;
+  top: -1px;
 }
 
-#newUIoptions [data-toggle-on-click][open] {
+#newUIoptions [data-toggle-on-click] svg {
+  transform: rotate(-90deg);
+  position:  static;
+}
+
+#newUIoptions [data-toggle-on-click][open] svg {
   transform: none;
 }
 
@@ -690,14 +690,14 @@ input[id^="manage.newUI"] {
 }
 
 /* Default, no update buttons */
-.update,
+.updater-icons .update,
-.check-update {
+.updater-icons .check-update {
   display: none;
 }
 
-/* Check update button for things that can*/
+/* Check update button for things that can */
 .updatable .check-update {
-  display: inline;
+  display: inline-block;
 }
 
 /* Update check in progress */
@@ -707,7 +707,7 @@ input[id^="manage.newUI"] {
 
 /* Updates available */
 .can-update .update {
-  display: inline;
+  display: inline-block;
 }
 
 .can-update[data-details$="locally edited"] button.update:after {
@@ -804,6 +804,10 @@ input[id^="manage.newUI"] {
 #reset-filters {
   position: absolute;
   margin-top: 2px;
+  display: inline-block;
+}
+
+#reset-filters svg {
   fill: hsla(180, 50%, 27%, .5);
   width: 24px; /* widen the click area a bit */
   height: 20px;
@@ -811,7 +815,7 @@ input[id^="manage.newUI"] {
   box-sizing: border-box;
 }
 
-#reset-filters:hover {
+#reset-filters:hover svg {
   fill: hsla(180, 50%, 27%, 1);
 }
 
@@ -839,8 +843,8 @@ input[id^="manage.newUI"] {
   border-radius: 0.25rem;
 }
 
-#search-wrapper .info {
+#search-help {
-  margin: 4px -5px 0 8px;
+  margin: 4px -5px 0 2px;
 }
 
 #message-box.help-text > div {

manage/manage.js

@@ -334,10 +334,12 @@ Object.assign(handleEvent, {
   },
 
   check(event, entry) {
+    event.preventDefault();
     checkUpdate(entry);
   },
 
   update(event, entry) {
+    event.preventDefault();
     const request = Object.assign(entry.updatedCode, {
       id: entry.styleId,
       reason: 'update',
@@ -353,6 +355,7 @@ Object.assign(handleEvent, {
   },
 
   delete(event, entry) {
+    event.preventDefault();
     const id = entry.styleId;
     const {name} = BG.cachedStyles.byId.get(id) || {};
     animateElement(entry);
@@ -362,8 +365,8 @@ Object.assign(handleEvent, {
       className: 'danger center',
       buttons: [t('confirmDelete'), t('confirmCancel')],
     })
-    .then(({button, enter}) => {
+    .then(({button}) => {
-      if (button === 0 || enter) {
+      if (button === 0) {
         deleteStyleSafe({id});
       }
     });
@@ -374,7 +377,8 @@ Object.assign(handleEvent, {
     event.preventDefault();
   },
 
-  expandTargets() {
+  expandTargets(event) {
+    event.preventDefault();
     this.closest('.applies-to').classList.toggle('expanded');
   },
 
@@ -388,6 +392,7 @@ Object.assign(handleEvent, {
   },
 
   config(event, {styleMeta}) {
+    event.preventDefault()
     configDialog(styleMeta);
   },
 });

manage/updater-ui.js

@@ -170,7 +170,8 @@ function renderUpdatesOnlyFilter({show, check} = {}) {
 }
 
 
-function showUpdateHistory() {
+function showUpdateHistory(event) {
+  event.preventDefault();
   const log = $create('.update-history-log');
   let logText, scroller, toggler;
   let deleted = false;
@@ -179,13 +180,17 @@ function showUpdateHistory() {
     messageBox({
       title: t('updateCheckHistory'),
       contents: log,
+      blockScroll: true,
       buttons: [
         t('confirmOK'),
         logText && {textContent: t('confirmDelete'), onclick: deleteHistory},
       ],
       onshow: logText && (() => {
         scroller = $('#message-box-contents');
+        scroller.tabIndex = 0;
+        setTimeout(() => scroller.focus());
         scrollToBottom();
+
         $('#message-box-buttons button').insertAdjacentElement('afterend',
           // TODO: add a global class for our labels
           // TODO: add a <template> or a common function to create such controls
@@ -196,6 +201,7 @@ function showUpdateHistory() {
               $create('SVG:use', {'xlink:href': '#svg-icon-checked'})),
             t('manageOnlyUpdates'),
           ]));
+
         toggler.onchange();
       }),
     });

msgbox/msgbox.js

@@ -1,3 +1,4 @@
+/* global focusAccessibility */
 'use strict';
 
 function messageBox({
@@ -12,10 +13,14 @@ function messageBox({
   bindGlobalListeners();
   createElement();
   document.body.appendChild(messageBox.element);
-  if (onshow) {
+
+  messageBox.originalFocus = document.activeElement;
+  moveFocus(1);
+
+  if (typeof onshow === 'function') {
     onshow(messageBox.element);
   }
-  messageBox.element.focus();
+
   return new Promise(_resolve => {
     messageBox.resolve = _resolve;
   });
@@ -29,13 +34,30 @@ function messageBox({
         resolveWith({button: this.buttonIndex});
       },
       key(event) {
-        const keyCode = event.keyCode || event.which;
+        const {which, shiftKey, ctrlKey, altKey, metaKey, target} = event;
-        if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
+        if (shiftKey && which !== 9 || ctrlKey || altKey || metaKey) {
-        && (keyCode === 13 || keyCode === 27)) {
+          return;
-          event.preventDefault();
-          event.stopPropagation();
-          resolveWith(keyCode === 13 ? {enter: true} : {esc: true});
         }
+        switch (which) {
+          case 13:
+            for (let el = target; el; el = el.parentElement) {
+              if (focusAccessibility.ELEMENTS.includes(el.localName)) {
+                return;
+              }
+            }
+            break;
+          case 27:
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+          case 9:
+            moveFocus(shiftKey ? -1 : 1);
+            event.preventDefault();
+            return;
+          default:
+            return;
+        }
+        resolveWith(which === 13 ? {enter: true} : {esc: true});
       },
       scroll() {
         scrollTo(blockScroll.x, blockScroll.y);
@@ -50,6 +72,9 @@ function messageBox({
       className: 'fadeout',
       onComplete: removeSelf,
     });
+    if (messageBox.element.contains(document.activeElement)) {
+      messageBox.originalFocus.focus();
+    }
   }
 
   function createElement() {
@@ -97,6 +122,21 @@ function messageBox({
     messageBox.element = null;
     messageBox.resolve = null;
   }
+
+  function moveFocus(dir) {
+    const elements = [...messageBox.element.getElementsByTagName('*')];
+    const activeIndex = elements.indexOf(document.activeElement);
+    const num = elements.length;
+    for (let i = 1; i < num; i++) {
+      const elementIndex = (activeIndex + i * dir + num) % num;
+      // we don't use positive tabindex so we stop at any valid value
+      const el = elements[elementIndex];
+      if (!el.disabled && el.tabIndex >= 0) {
+        el.focus();
+        return;
+      }
+    }
+  }
 }
 
 messageBox.alert = text =>

options.html

@@ -116,12 +116,12 @@
     </div>
 
     <div class="block" id="advanced">
-	  <div class="collapsible-resizer">
+      <div class="collapsible-resizer">
         <h1 i18n-text="optionsAdvanced">
           <svg class="svg-icon is-collapsed" 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>
-		  <svg class="svg-icon is-expanded" viewBox="0 0 1792 1792">
+          <svg class="svg-icon is-expanded" 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>  	  
         </h1>

options/onoffswitch.css

@@ -9,7 +9,21 @@
 }
 
 .onoffswitch input {
-  display: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  pointer-events: none;
+  position: absolute;
+  top: -8px;
+  bottom: -10px;
+  left: -10px;
+  width: calc(100% + 12px);
+}
+
+#message-box .onoffswitch input {
+  top: -6px;
+  left: -6px;
+  bottom: 0;
+  height: calc(100% + 12px);
 }
 
 .onoffswitch span {

options/options.js

@@ -7,12 +7,15 @@ setTimeout(splitLongTooltips);
 
 if (!FIREFOX && !OPERA) {
   const block = $('#advanced');
-  block.classList.add('collapsible', 'collapsed');
+  const toggleAdvanced = event => {
-  block.onclick = event => {
     if (block.classList.contains('collapsed') || event.target.closest('h1')) {
       block.classList.toggle('collapsed');
     }
   };
+  block.classList.add('collapsible', 'collapsed');
+  block.onclick = toggleAdvanced;
+  block.onkeydown = event => event.which === 13 && toggleAdvanced(event);
+  $('h1', block).tabIndex = 0;
 }
 
 // actions

popup/popup.js

@@ -326,6 +326,7 @@ Object.assign(handleEvent, {
     box.dataset.display = true;
     box.style.cssText = '';
     $('b', box).textContent = (BG.cachedStyles.byId.get(id) || {}).name;
+    $('[data-cmd="ok"]', box).focus();
     $('[data-cmd="ok"]', box).onclick = () => confirm(true);
     $('[data-cmd="cancel"]', box).onclick = () => confirm(false);
     window.onkeydown = event => {