Merge pull request #1700 from SundeepChand/feat/kbd-access

catarak · web-flow · commit 7ec42a61028a · 2020-12-11T17:08:42.000-05:00
Improved keyboard accessibility of the find-replace popup
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
@@ -121,14 +121,6 @@ pre.CodeMirror-line {
   height: 100%;
 }
 
-.CodeMirror-find-div {
-  padding: 0;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-
 .CodeMirror-search-modifiers {
   margin-left: #{10 / $base-font-size}rem;
 }
@@ -142,12 +134,22 @@ pre.CodeMirror-line {
 .CodeMirror-find-controls {
   display: flex;
 }
-
+.CodeMirror-search-inputs {
+  width: 30%;
+  margin-left: 10px;
+}
 .CodeMirror-replace-div {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
+.CodeMirror-search-controls {
+  width: 60%;
+  display: flex;
+  flex-wrap: wrap-reverse;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
 .CodeMirror-replace-controls {
   display: flex;
   margin-left: #{10 / $base-font-size}rem;
diff --git a/client/utils/codemirror-search.js b/client/utils/codemirror-search.js
@@ -82,6 +82,7 @@ function persistentDialog(cm, text, deflt, onEnter, replaceOpened, onKeyDown) {
     var state = getSearchState(cm);
 
     CodeMirror.on(searchField, "keyup", function (e) {
+      state.replaceStarted = false;
       if (e.keyCode !== 13 && searchField.value.length > 1) { // not enter and more than 1 character to search
         startSearch(cm, getSearchState(cm), searchField.value);
       } else if (searchField.value.length < 1) {
@@ -154,30 +155,30 @@ function persistentDialog(cm, text, deflt, onEnter, replaceOpened, onKeyDown) {
     }
 
     function toggleReplace(open) {
-      var replaceDivHeightOpened = "45px", replaceDivHeightClosed = "0px";
       var toggleButtonHeightOpened = "80px", toggleButtonHeightClosed = "40px";
 
       if (open) {
-        replaceDiv.style.height = replaceDivHeightOpened;
+        replaceFieldDiv.style.display = replaceControlsDiv.style.display = '';
         toggleReplaceBtnDiv.style.height = toggleButtonHeightOpened;
-        showReplaceButton.style.height = toggleButtonHeightOpened;
-        showReplaceButton.innerHTML = triangleArrowDown;
+        toggleReplaceBtn.style.height = toggleButtonHeightOpened;
+        toggleReplaceBtn.innerHTML = triangleArrowDown;
       } else {
-        replaceDiv.style.height = replaceDivHeightClosed;
+        replaceFieldDiv.style.display = replaceControlsDiv.style.display = 'none';
         toggleReplaceBtnDiv.style.height = toggleButtonHeightClosed;
-        showReplaceButton.style.height = toggleButtonHeightClosed;
-        showReplaceButton.innerHTML = triangleArrowRight;
+        toggleReplaceBtn.style.height = toggleButtonHeightClosed;
+        toggleReplaceBtn.innerHTML = triangleArrowRight;
       }
     }
 
-    var showReplaceButton = dialog.getElementsByClassName("CodeMirror-replace-toggle-button")[0];
-    var toggleReplaceBtnDiv = dialog.getElementsByClassName("Toggle-replace-btn-div")[0];
-    var replaceDiv = dialog.getElementsByClassName("CodeMirror-replace-div")[0];
+    var toggleReplaceBtnDiv = document.getElementById('Btn-Toggle-replace-div');
+    var toggleReplaceBtn = document.getElementById('Btn-Toggle-replace')
+    var replaceFieldDiv = document.getElementById('Replace-input-div');
+    var replaceControlsDiv = document.getElementById('Replace-controls-div');
     if (replaceOpened) {
       toggleReplace(true);
     }
-    CodeMirror.on(showReplaceButton, "click", function () {
-      if (replaceDiv.style.height === "0px") {
+    CodeMirror.on(toggleReplaceBtn, "click", function () {
+      if (replaceFieldDiv.style.display === "none") {
         toggleReplace(true);
       } else {
         toggleReplace(false);
@@ -186,10 +187,6 @@ function persistentDialog(cm, text, deflt, onEnter, replaceOpened, onKeyDown) {
 
     var replaceField = document.getElementById('Replace-input-field');
     CodeMirror.on(replaceField, "keyup", function (e) {
-      if (!searchField.value) {
-        searchField.focus();
-        return;
-      }
       var state = getSearchState(cm);
       var query = parseQuery(searchField.value, state);
       var withText = parseString(replaceField.value);
@@ -232,13 +229,15 @@ function persistentDialog(cm, text, deflt, onEnter, replaceOpened, onKeyDown) {
         if (match) {
           cm.setSelection(cursor.from(), cursor.to());
           doReplace(match, cursor, query, withText);
+          doReplaceButton.focus();
         }
       } else {
         startSearch(cm, state, searchField.value);
         state.replaceStarted = true;
         cm.focus();
         CodeMirror.commands.findNext(cm);
         searchField.blur();
+        doReplaceButton.focus();
       }
     })
 
@@ -251,6 +250,9 @@ function persistentDialog(cm, text, deflt, onEnter, replaceOpened, onKeyDown) {
       var state = getSearchState(cm);
       var query = parseQuery(searchField.value, state);
       var withText = parseString(replaceField.value);
+      if (searchField.value.length > 1) {
+        state.replaceStarted = true;
+      }
       if (state.replaceStarted) {
         replaceAll(cm, query, withText);
         state.replaceStarted = false;
@@ -491,104 +493,105 @@ function replaceAll(cm, query, text) {
 var getQueryDialog = function() {
   return (`
     <div class="CodeMirror-find-popup-container">
-      <div class="Toggle-replace-btn-div">
+      <div id="Btn-Toggle-replace-div" class="Toggle-replace-btn-div">
         <button
-          title="${i18n.t('CodemirrorFindAndReplace.Replace')}"
-          aria-label="${i18n.t('CodemirrorFindAndReplace.Replace')}"
-          role="button"
+          title="${i18n.t('CodemirrorFindAndReplace.ToggleReplace')}"
+          aria-label="${i18n.t('CodemirrorFindAndReplace.ToggleReplace')}"
+          role="button" id="Btn-Toggle-replace"
           class="CodeMirror-search-modifier-button CodeMirror-replace-toggle-button"
         >
           <span aria-hidden="true" class="button">
             ${triangleArrowRight}
           </span>
         </button>
       </div>
-      <div class="CodeMirror-find-input-fields">
-        <div class="CodeMirror-find-div">
-          <div class="CodeMirror-find-input">
-            <input id="Find-input-field" type="text" class="search-input CodeMirror-search-field" placeholder="${i18n.t('CodemirrorFindAndReplace.FindPlaceholder')}" />
-          </div>
-          <div class="CodeMirror-find-controls">
-            <div class="CodeMirror-search-modifiers button-wrap">
-              <button
-                title="${i18n.t('CodemirrorFindAndReplace.Regex')}"
-                aria-label="${i18n.t('CodemirrorFindAndReplace.Regex')}"
-                role="checkbox"
-                class="CodeMirror-search-modifier-button CodeMirror-regexp-button"
-              >
-                <span aria-hidden="true" class="button">.*</span>
-              </button>
-              <button
-                title="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
-                aria-label="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
-                role="checkbox"
-                class="CodeMirror-search-modifier-button CodeMirror-case-button"
-              >
-                <span aria-hidden="true" class="button">Aa</span>
-              </button>
-              <button
-                title="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
-                aria-label="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
-                role="checkbox"
-                class="CodeMirror-search-modifier-button CodeMirror-word-button"
-              >
-                <span aria-hidden="true" class="button">" "</span>
-              </button>
-            </div>
-            <div class="CodeMirror-search-nav">
-              <p class="CodeMirror-search-results">${i18n.t('CodemirrorFindAndReplace.NoResults')}</p>
-              <button
-                title="${i18n.t('CodemirrorFindAndReplace.Previous')}"
-                aria-label="${i18n.t('CodemirrorFindAndReplace.Previous')}"
-                class="CodeMirror-search-button icon up-arrow prev"
-              >
-                <span aria-hidden="true">
-                  ${upArrow}
-                </span>
-              </button>
-              <button
-                title="${i18n.t('CodemirrorFindAndReplace.Next')}"
-                aria-label="${i18n.t('CodemirrorFindAndReplace.Next')}"
-                class="CodeMirror-search-button icon down-arrow next"
-              >
-                <span aria-hidden="true">
-                  ${downArrow}
-                </span>
-              </button>
-            </div>
-            <div class="CodeMirror-close-button-container">
-              <button
-                title="${i18n.t('CodemirrorFindAndReplace.Close')}"
-                aria-label="${i18n.t('CodemirrorFindAndReplace.Close')}"
-                class="CodeMirror-close-button close icon"
-              >
-                <span aria-hidden="true">
-                  ${exitIcon}
-                </span>
-              </button>
-            </div>
-          </div>
+      <div class="CodeMirror-search-inputs">
+        <div class="CodeMirror-find-input">
+          <input id="Find-input-field" type="text" class="search-input CodeMirror-search-field" placeholder="${i18n.t('CodemirrorFindAndReplace.FindPlaceholder')}" />
         </div>
-        <div style="height: 0px; overflow: hidden;" class="CodeMirror-replace-div">
+        <div style="display: none;" id="Replace-input-div"
+        class="CodeMirror-replace-input">
           <input id="Replace-input-field" type="text" placeholder="${i18n.t('CodemirrorFindAndReplace.ReplacePlaceholder')}" class="search-input CodeMirror-search-field"/>
-          <div class="CodeMirror-replace-controls">
+        </div>
+      </div>
+      <div class="CodeMirror-search-controls">
+        <div style="display: none;" id="Replace-controls-div" class="CodeMirror-replace-controls">
+          <button
+            title="${i18n.t('CodemirrorFindAndReplace.Replace')}"
+            aria-label="${i18n.t('CodemirrorFindAndReplace.Replace')}"
+            role="button"
+            id="Btn-replace"
+            class="CodeMirror-search-modifier-button CodeMirror-replace-button"
+          >
+            ${i18n.t('CodemirrorFindAndReplace.Replace')}
+          </button>
+          <button
+            title="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
+            aria-label="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
+            role="button"
+            id="Btn-replace-all"
+            class="CodeMirror-search-modifier-button CodeMirror-replace-button"
+          >
+            ${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}
+          </button>
+        </div>
+        <div class="CodeMirror-find-controls">
+          <div class="CodeMirror-search-modifiers button-wrap">
             <button
-              title="${i18n.t('CodemirrorFindAndReplace.Replace')}"
-              aria-label="${i18n.t('CodemirrorFindAndReplace.Replace')}"
-              role="button"
-              id="Btn-replace"
-              class="CodeMirror-search-modifier-button CodeMirror-replace-button"
+              title="${i18n.t('CodemirrorFindAndReplace.Regex')}"
+              aria-label="${i18n.t('CodemirrorFindAndReplace.Regex')}"
+              role="checkbox"
+              class="CodeMirror-search-modifier-button CodeMirror-regexp-button"
             >
-              ${i18n.t('CodemirrorFindAndReplace.Replace')}
+              <span aria-hidden="true" class="button">.*</span>
             </button>
             <button
-              title="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
-              aria-label="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
-              role="button"
-              id="Btn-replace-all"
-              class="CodeMirror-search-modifier-button CodeMirror-replace-button"
+              title="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
+              aria-label="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
+              role="checkbox"
+              class="CodeMirror-search-modifier-button CodeMirror-case-button"
+            >
+              <span aria-hidden="true" class="button">Aa</span>
+            </button>
+            <button
+              title="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
+              aria-label="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
+              role="checkbox"
+              class="CodeMirror-search-modifier-button CodeMirror-word-button"
+            >
+              <span aria-hidden="true" class="button">" "</span>
+            </button>
+          </div>
+          <div class="CodeMirror-search-nav">
+            <p class="CodeMirror-search-results">${i18n.t('CodemirrorFindAndReplace.NoResults')}</p>
+            <button
+              title="${i18n.t('CodemirrorFindAndReplace.Previous')}"
+              aria-label="${i18n.t('CodemirrorFindAndReplace.Previous')}"
+              class="CodeMirror-search-button icon up-arrow prev"
+            >
+              <span aria-hidden="true">
+                ${upArrow}
+              </span>
+            </button>
+            <button
+              title="${i18n.t('CodemirrorFindAndReplace.Next')}"
+              aria-label="${i18n.t('CodemirrorFindAndReplace.Next')}"
+              class="CodeMirror-search-button icon down-arrow next"
+            >
+              <span aria-hidden="true">
+                ${downArrow}
+              </span>
+            </button>
+          </div>
+          <div class="CodeMirror-close-button-container">
+            <button
+              title="${i18n.t('CodemirrorFindAndReplace.Close')}"
+              aria-label="${i18n.t('CodemirrorFindAndReplace.Close')}"
+              class="CodeMirror-close-button close icon"
             >
-              ${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}
+              <span aria-hidden="true">
+                ${exitIcon}
+              </span>
             </button>
           </div>
         </div>
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
@@ -50,6 +50,7 @@
     }
   },
   "CodemirrorFindAndReplace": {
+    "ToggleReplace": "Toggle Replace",
     "Find": "Find",
     "FindPlaceholder": "Find in files",
     "Replace": "Replace",
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
@@ -50,6 +50,7 @@
     }
   },
   "CodemirrorFindAndReplace": {
+    "ToggleReplace": "Alternar reemplazar",
     "Find": "Buscar",
     "FindPlaceholder": "Buscar en archivos",
     "Replace": "Reemplazar",
diff --git a/translations/locales/ja/translations.json b/translations/locales/ja/translations.json
@@ -50,6 +50,7 @@
       }
     },
     "CodemirrorFindAndReplace": {
+      "ToggleReplace": "置換の切り替え",
       "Find": "検索",
       "FindPlaceholder": "ファイル内検索",
       "Replace": "置換",

Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,7 @@`
`50`	`50`	`}`
`51`	`51`	`},`
`52`	`52`	`"CodemirrorFindAndReplace": {`
	`53`	`+ "ToggleReplace": "Toggle Replace",`
`53`	`54`	`"Find": "Find",`
`54`	`55`	`"FindPlaceholder": "Find in files",`
`55`	`56`	`"Replace": "Replace",`