From 2cdd264780005b140a0c686312b193fe5b1ce9a0 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 9 Dec 2017 18:25:44 +0300
Subject: [PATCH] fixups

Manage: Disable tabindex in nested buttons
Manage: Fix homepage link alignment
Manage: Make entry actions keyboard navigatable
Manage: Add search help accessibility
Msgbox: Save and restore focus
Manage: Fix delete confirmation cancel
Manage: Make history button accessible
Manage: Make favicons dropdown accessible
Manage: Prevent focus on hidden textarea
Msgbox: Stop tabbing outside of msgbox
Usercss: Make nondefault reset accessible
Usercss: Make colorpicker accessible
Edit: Disable tabindex in nested buttons
Edit: Make info and config icons accessible
Options: Cleanup HTML
Options: Make advanced toggle accessible
Edit: Fix issues popup
Edit: Remove link underlines from icons
---
 edit.html                    | 39 +++++++++++++++-------------
 edit/edit.css                | 15 ++++++++++-
 edit/edit.js                 |  3 ++-
 manage.html                  | 44 ++++++++++++++++---------------
 manage/config-dialog.css     | 19 +++++++++-----
 manage/config-dialog.js      | 50 ++++++++++++++++++++++++------------
 manage/filters.js            |  3 ++-
 manage/incremental-search.js |  1 +
 manage/manage.css            | 50 +++++++++++++++++++++++++++---------
 manage/manage.js             | 13 +++++++---
 manage/updater-ui.js         |  6 ++++-
 msgbox/msgbox.js             | 26 ++++++++++++++++++-
 options.html                 |  6 ++---
 options/options.js           | 10 ++++++--
 14 files changed, 200 insertions(+), 85 deletions(-)

diff --git a/edit.html b/edit.html
index 6723d658..1c18e254 100644
--- a/edit.html
+++ b/edit.html
@@ -191,17 +191,19 @@
           <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><!--
-          --><svg id="toggle-style-help" class="svg-icon info">
-            <use xlink:href="#svg-icon-help"/>
-          </svg>
+          </label>
+          <a href="#" id="toggle-style-help" class="svg-inline-wrapper">
+            <svg class="svg-icon info">
+              <use xlink:href="#svg-icon-help"/>
+            </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"><button id="cancel-button" i18n-text="styleCancelEditLabel" tabindex="-1"></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>
@@ -246,11 +248,11 @@
             <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">
-            <svg id="colorpicker-settings" class="svg-icon settings">
+          <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote">
+            <svg class="svg-icon settings">
               <use xlink:href="#svg-icon-settings"/>
             </svg>
-          </span>
+          </a>
         </div>
         <div class="option usercss-only">
           <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
@@ -268,9 +270,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">
-            <svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-          </span>
+          <a id="keyMap-help" href="#" class="svg-inline-wrapper">
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          </a>
         </div>
         <div class="option aligned">
           <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
@@ -300,20 +302,21 @@
               </select>
               <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
             </div>
-          <span class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
-            <svg id="linter-settings" class="svg-icon settings">
+          <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
+            <svg class="svg-icon settings">
               <use xlink:href="#svg-icon-settings"/>
             </svg>
-          </span>
+          </a>
         </div>
       </details>
       <details id="lint" class="hidden" data-pref="editor.lint.expanded">
         <summary>
-          <h2 i18n-text="linterIssues">: <span id="issue-count"></span><!-- EAT SPACE
-          --><svg id="lint-help" class="svg-icon info intercepts-click">
+          <h2 i18n-text="linterIssues">: <span id="issue-count"></span></h2>
+          <a id="lint-help" href="#" class="svg-inline-wrapper">
+            <svg class="svg-icon info intercepts-click">
               <use xlink:href="#svg-icon-help"/>
             </svg>
-          </h2>
+          </a>
         </summary>
         <div></div>
       </details>
@@ -358,7 +361,7 @@
       </symbol>
 
     </svg>
-  
+
   <script src="vendor/focus/what-input.min.js"></script>
   </body>
 </html>
diff --git a/edit/edit.css b/edit/edit.css
index 7c9ee482..236c97a4 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -76,6 +76,19 @@ label {
   min-height: 1.4rem;
 }
 
+.svg-inline-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+
+.svg-inline-wrapper svg {
+  border-bottom: 1px dashed transparent;
+}
+
+.svg-inline-wrapper:focus svg {
+  border-bottom-color: #AAA;
+}
+
 /* basic info */
 #basic-info {
   margin-bottom: 1rem;
@@ -802,4 +815,4 @@ html:not(.usercss) .usercss-only,
     flex-wrap: wrap;
     white-space: normal;
   }
-}
\ No newline at end of file
+}
diff --git a/edit/edit.js b/edit/edit.js
index 78082854..e84c0fe4 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -512,7 +512,8 @@ function showToMozillaHelp() {
   showHelp(t('styleMozillaFormatHeading'), t('styleToMozillaFormatHelp'));
 }
 
-function showToggleStyleHelp() {
+function showToggleStyleHelp(event) {
+  event.preventDefault();
   showHelp(t('helpAlt'), t('styleEnabledToggleHint'));
 }
 
diff --git a/manage.html b/manage.html
index aa87da5e..fc0bef30 100644
--- a/manage.html
+++ b/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">
-          <svg class="svg-icon delete" viewBox="0 0 20 20">
+        <a href="#" class="delete" i18n-title="deleteStyleLabel">
+          <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>
-      <span class="update" i18n-title="installUpdate">
+      </a>
+      <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"/>
@@ -239,18 +239,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 +263,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 +294,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">
-            <title i18n-text="optionsSubheading"></title>
-            <use xlink:href="#svg-icon-select-arrow"/>
-          </svg>
+          <a href="#" data-toggle-on-click="#faviconsHelp">
+            <svg class="svg-icon select-arrow">
+              <title i18n-text="optionsSubheading"></title>
+              <use xlink:href="#svg-icon-select-arrow"/>
+            </svg>
+          </a>
         </label>
         <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
           <div>
@@ -317,7 +321,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>
diff --git a/manage/config-dialog.css b/manage/config-dialog.css
index bd6f037e..6a7eae56 100644
--- a/manage/config-dialog.css
+++ b/manage/config-dialog.css
@@ -93,13 +93,18 @@
   margin-right: 4px;
 }
 
-.config-body label:not(.nondefault) .config-reset-icon {
-  visibility: hidden;
+.config-reset-icon {
+  width: 16px;
+  display: inline-block;
 }
 
-.svg-icon.config-reset-icon {
+.config-body label:not(.nondefault) .config-reset-icon a {
+  display: none;
+}
+
+.config-reset-icon .svg-icon {
   /*position: absolute;*/
-  pointer-events: all !important;
+  pointer-events: none;
   cursor: pointer;
   /*right: -7px;*/
   fill: #aaa;
@@ -110,7 +115,7 @@
   flex-shrink: 0;
 }
 
-.svg-icon.config-reset-icon:hover {
+.config-reset-icon:hover .svg-icon {
   fill: #666;
 }
 
@@ -155,9 +160,11 @@
 
 .color-swatch {
   position: absolute;
+  top: 0;
+  left: 0;
   border: 1px solid gray;
-  margin-top: -22px;
   cursor: pointer;
+  opacity: 1;
 }
 
 .colorpicker-popup {
diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 0661c333..dd879b7d 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -30,13 +30,13 @@ function configDialog(style) {
     ],
     buttons: [{
       textContent: t('confirmSave'),
-      dataset: {cmd: 'save'},
+      dataset: {cmd: 'save', allowEnter: true},
       disabled: true,
       onclick: save,
     }, {
       textContent: t('genericResetLabel'),
       title: t('optionsReset'),
-      dataset: {cmd: 'default'},
+      dataset: {cmd: 'default', allowEnter: true},
       onclick: useDefault,
     }, {
       textContent: t('confirmClose'),
@@ -78,7 +78,13 @@ function configDialog(style) {
     updateButtons();
   }
 
-  function onhide() {
+  function onhide({button, enter}) {
+    if (enter) {
+      switch (button) {
+        case 0: save(); break;
+        case 1: useDefault(); break;
+      }
+    }
     document.body.style.minWidth = '';
     document.body.style.minHeight = '';
     colorpicker.hide();
@@ -195,12 +201,16 @@ function configDialog(style) {
   }
 
   function buildConfigForm() {
-    let resetter = $create('SVG:svg.svg-icon.config-reset-icon', {viewBox: '0 0 20 20'}, [
-      $create('SVG:title', t('genericResetLabel')),
-      $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',
-      }),
+    let resetter = $create('span.config-reset-icon', [
+      $create('a', {href:'#', dataset: {allowEnter: true}}, [
+        $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [
+          $create('SVG:title', t('genericResetLabel')),
+          $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;
@@ -208,8 +218,10 @@ function configDialog(style) {
         case 'color':
           children = [
             $create('.cm-colorview.config-value', [
-              va.input = $create('.color-swatch', {
+              va.input = $create('a.color-swatch', {
                 va,
+                href: '#',
+                dataset: {allowEnter: true},
                 onclick: showColorpicker
               }),
             ]),
@@ -260,8 +272,8 @@ function configDialog(style) {
       }
 
       resetter = resetter.cloneNode(true);
-      resetter.va = va;
-      resetter.onclick = resetOnClick;
+      $('a', resetter).va = va;
+      $('a', resetter).onclick = resetOnClick;
 
       elements.push(
         $create(`label.config-${va.type}`, [
@@ -310,10 +322,16 @@ function configDialog(style) {
   }
 
   function resetOnClick(event) {
-    event.preventDefault();
-    this.va.value = null;
-    renderValues([this.va]);
-    onchange({target: this.va.input});
+    if (
+      event.type === 'click' ||
+      (event.keyCode || event.which) === 13
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.va.value = null;
+      renderValues([this.va]);
+      onchange({target: this.va.input});
+    }
   }
 
   function showColorpicker() {
diff --git a/manage/filters.js b/manage/filters.js
index 9fb24c4b..21ceaeb6 100644
--- a/manage/filters.js
+++ b/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'),
diff --git a/manage/incremental-search.js b/manage/incremental-search.js
index 1d6f75a0..9976e187 100644
--- a/manage/incremental-search.js
+++ b/manage/incremental-search.js
@@ -7,6 +7,7 @@ onDOMready().then(() => {
   let focusedName = '';
   const input = $create('textarea', {
     spellcheck: false,
+    attributes: {tabindex: -1},
     oninput: incrementalSearch,
   });
   replaceInlineStyle({
diff --git a/manage/manage.css b/manage/manage.css
index f7c00a7e..8fe28b3c 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -159,7 +159,7 @@ select {
 }
 
 .homepage .svg-icon {
-  margin-top: -4px;
+  margin-top: 0;
   margin-left: .5ex;
 }
 
@@ -374,6 +374,10 @@ select {
   right: 0;
 }
 
+#newUIoptions a > .svg-icon.select-arrow {
+  position: static;
+}
+
 .select-resizer {
   cursor: default;
   border: none;
@@ -446,10 +450,11 @@ select {
   color: hsla(180, 100%, 15%, 1);
 }
 
-.newUI .homepage .svg-icon {
-  position: absolute;
-  margin-top: 0;
-  margin-left: -28px;
+/* align delete button if no homepage link */
+.newUI a.homepage.disabled {
+  /* margin-left: 0.5ex + 20px svg width + margin-right: 8px */
+  width: calc(0.5ex + 28px);
+  display: inline-block;
 }
 
 .newUI .actions {
@@ -466,6 +471,25 @@ select {
     margin-right: 8px;
 }
 
+.newUI .style-name-link:focus,
+.newUI .actions a:focus,
+.newUI a.expander {
+  outline: none;
+  text-decoration: none;
+}
+
+.newUI .style-name-link,
+.newUI .actions a svg,
+.newUI a.expander {
+  border-bottom: 1px dashed transparent;
+}
+
+.newUI .style-name-link:focus,
+.newUI .actions a:focus svg,
+.newUI a.expander:focus {
+  border-bottom: 1px dashed #AAA;
+}
+
 .newUI .updater-icons > * {
   transition: opacity 1s;
   display: none;
@@ -658,7 +682,8 @@ select {
   margin-right: .5em;
 }
 
-#newUIoptions [data-toggle-on-click] {
+#newUIoptions [data-toggle-on-click],
+#newUIoptions a[data-toggle-on-click] svg {
   transform: rotate(-90deg);
   cursor: pointer;
   right: -16px;
@@ -666,7 +691,8 @@ select {
   pointer-events: auto;
 }
 
-#newUIoptions [data-toggle-on-click][open] {
+#newUIoptions [data-toggle-on-click][open],
+#newUIoptions a[data-toggle-on-click][open] svg {
   transform: none;
 }
 
@@ -687,12 +713,12 @@ input[id^="manage.newUI"] {
 }
 
 /* Default, no update buttons */
-.update,
-.check-update {
+.updater-icons .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;
 }
@@ -836,8 +862,8 @@ input[id^="manage.newUI"] {
   border-radius: 0.25rem;
 }
 
-#search-wrapper .info {
-  margin: 4px -5px 0 8px;
+#search-wrapper #search-help {
+  margin: 4px 0 0 8px;
 }
 
 #message-box.help-text > div {
diff --git a/manage/manage.js b/manage/manage.js
index eea012b2..669bc726 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -191,6 +191,9 @@ function createStyleElement({style, name}) {
 
   if (style.url) {
     $('.homepage', entry).appendChild(parts.homepageIcon.cloneNode(true));
+  } else {
+    $('.homepage', entry).removeAttribute('href');
+    $('.homepage', entry).classList.add('disabled');
   }
   if (style.updateUrl && newUI.enabled) {
     $('.actions', entry).appendChild(template.updaterIcons.cloneNode(true));
@@ -334,10 +337,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 +358,7 @@ Object.assign(handleEvent, {
   },
 
   delete(event, entry) {
+    event.preventDefault();
     const id = entry.styleId;
     const {name} = BG.cachedStyles.byId.get(id) || {};
     animateElement(entry);
@@ -362,8 +368,8 @@ Object.assign(handleEvent, {
       className: 'danger center',
       buttons: [t('confirmDelete'), t('confirmCancel')],
     })
-    .then(({button, enter}) => {
-      if (button === 0 || enter) {
+    .then(({button}) => {
+      if (button === 0) {
         deleteStyleSafe({id});
       }
     });
@@ -374,7 +380,8 @@ Object.assign(handleEvent, {
     event.preventDefault();
   },
 
-  expandTargets() {
+  expandTargets(event) {
+    event.preventDefault();
     this.closest('.applies-to').classList.toggle('expanded');
   },
 
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index e936bc26..b6089271 100644
--- a/manage/updater-ui.js
+++ b/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;
@@ -185,6 +186,8 @@ function showUpdateHistory() {
       ],
       onshow: logText && (() => {
         scroller = $('#message-box-contents');
+        scroller.setAttribute('tabindex', 0);
+        scroller.focus();
         scrollToBottom();
         $('#message-box-buttons button').insertAdjacentElement('afterend',
           // TODO: add a global class for our labels
@@ -198,6 +201,7 @@ function showUpdateHistory() {
           ]));
         toggler.onchange();
       }),
+      blockScroll: true
     });
   });
   function scrollToBottom() {
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index c02b1eef..2e6c1082 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -8,6 +8,7 @@ function messageBox({
   onshow,         // function(messageboxElement) invoked after the messagebox is shown
   blockScroll,    // boolean, blocks the page scroll
 }) {              // RETURNS: Promise resolved to {button[number], enter[boolean], esc[boolean]}
+  messageBox.originalFocus = document.activeElement;
   initOwnListeners();
   bindGlobalListeners();
   createElement();
@@ -16,6 +17,11 @@ function messageBox({
     onshow(messageBox.element);
   }
   messageBox.element.focus();
+  const firstEl = $('a, button, input, select', messageBox.element);
+  if (firstEl) {
+    firstEl.focus();
+  }
+  messageBox.lastEl = firstEl || messageBox.element;
   return new Promise(_resolve => {
     messageBox.resolve = _resolve;
   });
@@ -30,11 +36,26 @@ function messageBox({
       },
       key(event) {
         const keyCode = event.keyCode || event.which;
+        if (event.target.closest('#message-box, .colorpicker-popup')) {
+          messageBox.lastEl = event.target;
+        }
+        if (keyCode === 13 && event.target.dataset.allowEnter) {
+          // usercss item resets needs to activate
+          return;
+        }
         if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
         && (keyCode === 13 || keyCode === 27)) {
           event.preventDefault();
           event.stopPropagation();
-          resolveWith(keyCode === 13 ? {enter: true} : {esc: true});
+          resolveWith(keyCode === 13 ? {enter: true, button: event.target.buttonIndex} : {esc: true});
+        }
+      },
+      keyup(event) {
+        const keyCode = event.keyCode || event.which;
+        if (keyCode === 9 && !event.target.closest('#message-box, .colorpicker-popup')) {
+          event.preventDefault();
+          event.stopPropagation();
+          messageBox.lastEl.focus();
         }
       },
       scroll() {
@@ -50,6 +71,7 @@ function messageBox({
       className: 'fadeout',
       onComplete: removeSelf,
     });
+    messageBox.originalFocus.focus();
   }
 
   function createElement() {
@@ -85,10 +107,12 @@ function messageBox({
       window.addEventListener('scroll', messageBox.listeners.scroll);
     }
     window.addEventListener('keydown', messageBox.listeners.key, true);
+    window.addEventListener('keyup', messageBox.listeners.keyup, true);
   }
 
   function unbindGlobalListeners() {
     window.removeEventListener('keydown', messageBox.listeners.key, true);
+    window.removeEventListener('keyup', messageBox.listeners.keyup, true);
     window.removeEventListener('scroll', messageBox.listeners.scroll);
   }
 
diff --git a/options.html b/options.html
index e800ff67..e3eb1f9e 100644
--- a/options.html
+++ b/options.html
@@ -116,12 +116,12 @@
     </div>
 
     <div class="block" id="advanced">
-	  <div class="collapsible-resizer">
-        <h1 i18n-text="optionsAdvanced">
+      <div class="collapsible-resizer">
+        <h1 i18n-text="optionsAdvanced" tabindex="0">
           <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>
diff --git a/options/options.js b/options/options.js
index 42e2d03e..85c34b8f 100644
--- a/options/options.js
+++ b/options/options.js
@@ -7,12 +7,18 @@ setTimeout(splitLongTooltips);
 
 if (!FIREFOX && !OPERA) {
   const block = $('#advanced');
-  block.classList.add('collapsible', 'collapsed');
-  block.onclick = event => {
+  const toggleAdvanced = event => {
     if (block.classList.contains('collapsed') || event.target.closest('h1')) {
       block.classList.toggle('collapsed');
     }
   };
+  block.classList.add('collapsible', 'collapsed');
+  block.onclick = event => toggleAdvanced(event);
+  block.onkeydown = event => {
+    if ((event.keyCode || event.which) === 13) {
+      toggleAdvanced(event);
+    }
+  };
 }
 
 // actions