From 5ff664f9b92e420e55968e81a3c55f08f9ad7094 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 21 Feb 2022 23:45:42 +0300
Subject: [PATCH] simplify/generalize close-on-esc

---
 edit.html             |  2 +-
 edit/settings.html    |  2 +-
 edit/util.js          | 21 +++++++++------------
 js/dlg/message-box.js |  4 ----
 js/dom.js             |  2 ++
 5 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/edit.html b/edit.html
index 8b935318..0a0ec89e 100644
--- a/edit.html
+++ b/edit.html
@@ -213,7 +213,7 @@
     </template>
 
     <template data-id="keymapHelp">
-      <table class="keymap-list can-close-on-esc">
+      <table class="keymap-list">
         <thead>
           <tr>
             <th><input i18n="placeholder:helpKeyMapHotkey" type="search"></th>
diff --git a/edit/settings.html b/edit/settings.html
index 84c46ad7..07647f38 100644
--- a/edit/settings.html
+++ b/edit/settings.html
@@ -1,5 +1,5 @@
 <div>
-  <fieldset class="style-settings can-close-on-esc">
+  <fieldset class="style-settings">
     <div class="rel">
       <input id="ss-updatable" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
diff --git a/edit/util.js b/edit/util.js
index 9a7f2c3d..2fa14914 100644
--- a/edit/util.js
+++ b/edit/util.js
@@ -29,35 +29,32 @@ const helpPopup = {
     div.style.display = 'block';
     helpPopup.originalFocus = document.activeElement;
     helpPopup.div = div;
+    moveFocus(div, 0);
     return div;
   },
 
   close(event) {
+    let el;
     const canClose =
       !event ||
-      event.type === 'click' || (
-        getEventKeyName(event) === 'Escape' &&
-        !$('.CodeMirror-hints, #message-box') && (
-          !document.activeElement ||
-          !document.activeElement.closest('#search-replace-dialog') && (
-            document.activeElement.tagName !== 'INPUT' ||
-            document.activeElement.closest('.can-close-on-esc')
-          )
-        )
+      event.type === 'click' ||
+      getEventKeyName(event) === 'Escape' && !$('.CodeMirror-hints, #message-box') && (
+        !(el = document.activeElement) ||
+        !el.closest('#search-replace-dialog')
       );
     const {div} = helpPopup;
     if (!canClose || !div) {
       return;
     }
-    if (event && div.codebox && !div.codebox.options.readOnly && !div.codebox.isClean()) {
+    if (event && (el = div.codebox) && !el.options.readOnly && !el.isClean()) {
       setTimeout(async () => {
         const ok = await messageBoxProxy.confirm(t('confirmDiscardChanges'));
         return ok && helpPopup.close();
       });
       return;
     }
-    if (div.contains(document.activeElement) && helpPopup.originalFocus) {
-      helpPopup.originalFocus.focus();
+    if (div.contains(document.activeElement) && (el = helpPopup.originalFocus)) {
+      el.focus();
     }
     const contents = $('.contents', div);
     div.style.display = '';
diff --git a/js/dlg/message-box.js b/js/dlg/message-box.js
index d3be66b0..8fe51611 100644
--- a/js/dlg/message-box.js
+++ b/js/dlg/message-box.js
@@ -64,10 +64,6 @@ messageBox.show = async ({
       /config-dialog/.test(className)) {
     moveFocus(messageBox.element, 1);
   }
-  // suppress focus outline when invoked via click
-  if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
-    document.activeElement.dataset.focusedViaClick = '';
-  }
   if (document.activeElement === messageBox._originalFocus) {
     document.body.focus();
   }
diff --git a/js/dom.js b/js/dom.js
index f34a32ac..a8a55d92 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -268,6 +268,8 @@ function moveFocus(rootElement, step) {
     const el = elements[(activeIndex + i * step + num) % num];
     if (!el.disabled && el.tabIndex >= 0) {
       el.focus();
+      // suppress focus outline when invoked via click
+      toggleDataset(el, 'focusedViaClick', focusAccessibility.lastFocusedViaClick);
       return activeEl !== el && el;
     }
   }