Merge pull request #143 from WebCoder49/accessible-close-buttons

Make FindAndReplace and GoToLine close buttons screenreader accessible; fix typo in tester file

Author: WebCoder49

plugins/find-and-replace.js

@@ -204,7 +204,11 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
             const findPreviousButton = document.createElement('button');
             const replaceButton = document.createElement('button');
             const replaceAllButton = document.createElement('button');
+
+            // TODO: Make a button element (semantic HTML for accessibility) in next major version
             const cancel = document.createElement('span');
+            cancel.setAttribute("role", "button");
+            cancel.setAttribute("aria-label", this.instructions.closeDialog);
             cancel.setAttribute("tabindex", 0); // Visible to keyboard navigation
             cancel.setAttribute("title", this.instructions.closeDialog);
 
@@ -243,8 +247,10 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
             replaceInput.placeholder = this.instructions.replacePlaceholder;
             findNextButton.innerText = "↓";
             findNextButton.title = this.instructions.findNext;
+            findNextButton.setAttribute("aria-label", this.instructions.findNext);
             findPreviousButton.innerText = "↑";
             findPreviousButton.title = this.instructions.findPrevious;
+            findNextButton.setAttribute("aria-label", this.instructions.findPrevious);
             replaceButton.className = 'code-input_find-and-replace_button-hidden';
             replaceButton.innerText = this.instructions.replaceActionShort;
             replaceButton.title = this.instructions.replaceAction;

plugins/go-to-line.js

@@ -90,7 +90,11 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
 
             const dialog = document.createElement('div');
             const input = document.createElement('input');
+
+            // TODO: Make a button element (semantic HTML for accessibility) in next major version
             const cancel = document.createElement('span');
+            cancel.setAttribute("role", "button");
+            cancel.setAttribute("aria-label", this.instructions.closeDialog);
             cancel.setAttribute("tabindex", 0); // Visible to keyboard navigation
             cancel.setAttribute("title", this.instructions.closeDialog);
 

tests/tester.js

@@ -533,7 +533,7 @@ console.log("I've got another line!", 2 < 3, "should be true.");
         addText(textarea, `function printTriples(max) {\nfor(let i = 0; i < max-2; i++) {\nfor(let j = 0; j < max-1; j++) {\nfor(let k = 0; k < max; k++) {\nconsole.log(i,j,k);\n}\n//Hmmm...\n}//Test auto-unindent\n{`, true);
         move(textarea, 1); // Move after created closing bracket
         backspace(textarea); // Remove created closing bracket
-    }, 'function printTriples(max) {\n  for(let i = 0; i < max-2; i++) {\n    for(let j = 0; j < max-1; j++) {\n      for(let k = 0; k < max; k++) {\n        console.log(i,j,k);\n      }\n      //Hmmm...\n    }//Test auto-unindent\n    {\n      }\n    }\n  }\n}', 221, 211);
+    }, 'function printTriples(max) {\n  for(let i = 0; i < max-2; i++) {\n    for(let j = 0; j < max-1; j++) {\n      for(let k = 0; k < max; k++) {\n        console.log(i,j,k);\n      }\n      //Hmmm...\n    }//Test auto-unindent\n    {\n      }\n    }\n  }\n}', 221, 221);
 
     // SelectTokenCallbacks
     if(isHLJS) {