From 1db035c25c0ebf4c89781f18f0ca200be5fa2b37 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Tue, 15 Jul 2025 21:55:53 +0100 Subject: [PATCH] Make FindAndReplace and GoToLine close buttons screenreader accessible; fix typo in tester file --- plugins/find-and-replace.js | 6 ++++++ plugins/go-to-line.js | 4 ++++ tests/tester.js | 2 +- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/plugins/find-and-replace.js b/plugins/find-and-replace.js index 639c398..b747274 100644 --- a/plugins/find-and-replace.js +++ b/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; diff --git a/plugins/go-to-line.js b/plugins/go-to-line.js index b6ea68a..04e3536 100644 --- a/plugins/go-to-line.js +++ b/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); diff --git a/tests/tester.js b/tests/tester.js index a408ce3..92e2d33 100644 --- a/tests/tester.js +++ b/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) {