From 395a79c0eb7e138e87803e06dd52fbde7b4b3f39 Mon Sep 17 00:00:00 2001 From: Alice Koreman Date: Wed, 22 May 2024 16:59:14 +0200 Subject: [PATCH 1/4] feat: allow users to add arialabel to text input --- ace.d.ts | 1 + src/editor.js | 4 ++++ src/keyboard/textinput.js | 3 ++- src/keyboard/textinput_test.js | 12 ++++++++++++ 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/ace.d.ts b/ace.d.ts index d22d3d23572..5bf4e978465 100644 --- a/ace.d.ts +++ b/ace.d.ts @@ -235,6 +235,7 @@ export namespace Ace { relativeLineNumbers: boolean; enableMultiselect: boolean; enableKeyboardAccessibility: boolean; + textInputAriaLabel: string; } export interface SearchOptions { diff --git a/src/editor.js b/src/editor.js index dfde1c8edd4..3b0b4d6c4b8 100644 --- a/src/editor.js +++ b/src/editor.js @@ -3002,6 +3002,10 @@ config.defineOptions(Editor.prototype, "editor", { }, initialValue: false }, + textInputAriaLabel: { + set: function(val) { this.$textInputAriaLabel = val; }, + initialValue: "" + }, customScrollbar: "renderer", hScrollBarAlwaysVisible: "renderer", vScrollBarAlwaysVisible: "renderer", diff --git a/src/keyboard/textinput.js b/src/keyboard/textinput.js index 7a316c21ab5..6be34c2e3d5 100644 --- a/src/keyboard/textinput.js +++ b/src/keyboard/textinput.js @@ -90,7 +90,8 @@ TextInput= function(parentNode, host) { text.setAttribute("aria-roledescription", nls("text-input.aria-roledescription", "editor")); if(host.session) { var row = host.session.selection.cursor.row; - text.setAttribute("aria-label", nls("text-input.aria-label", "Cursor at row $0", [row + 1])); + var arialLabel = `${host.$textInputAriaLabel}, ${nls("text-input.aria-label", "Cursor at row $0", [row + 1])}`; + text.setAttribute("aria-label", arialLabel); } } }; diff --git a/src/keyboard/textinput_test.js b/src/keyboard/textinput_test.js index 7d8a3928a34..a6d597ca963 100644 --- a/src/keyboard/textinput_test.js +++ b/src/keyboard/textinput_test.js @@ -753,6 +753,18 @@ module.exports = { assert.equal(editor.getValue(), ""); sendEvent("input", {key: {inputType: "historyRedo"}}); assert.equal(editor.getValue(), "x"); + }, + + "test: text input aria label": function() { + editor.setValue("x x", -1); + editor.setOption('textInputAriaLabel', "super cool editor"); + editor.setOption('enableKeyboardAccessibility', true); + editor.renderer.$loop._flush(); + + editor.focus(); + + let text = editor.container.querySelector(".ace_text-input"); + assert.equal(text.getAttribute("aria-label"), "super cool editor, Cursor at row 1"); } }; From 170a48e1769f1d14a8f9282481f36ab2aec61a47 Mon Sep 17 00:00:00 2001 From: Alice Koreman Date: Wed, 22 May 2024 17:11:14 +0200 Subject: [PATCH 2/4] fix: account for optional label not set --- src/keyboard/textinput.js | 6 +++++- src/keyboard/textinput_test.js | 13 ++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/keyboard/textinput.js b/src/keyboard/textinput.js index 6be34c2e3d5..d1951961a82 100644 --- a/src/keyboard/textinput.js +++ b/src/keyboard/textinput.js @@ -90,7 +90,11 @@ TextInput= function(parentNode, host) { text.setAttribute("aria-roledescription", nls("text-input.aria-roledescription", "editor")); if(host.session) { var row = host.session.selection.cursor.row; - var arialLabel = `${host.$textInputAriaLabel}, ${nls("text-input.aria-label", "Cursor at row $0", [row + 1])}`; + var arialLabel = ""; + if (host.$textInputAriaLabel) { + arialLabel += `${host.$textInputAriaLabel}, `; + } + arialLabel += nls("text-input.aria-label", "Cursor at row $0", [row + 1]); text.setAttribute("aria-label", arialLabel); } } diff --git a/src/keyboard/textinput_test.js b/src/keyboard/textinput_test.js index a6d597ca963..d35f6e50d4a 100644 --- a/src/keyboard/textinput_test.js +++ b/src/keyboard/textinput_test.js @@ -755,7 +755,18 @@ module.exports = { assert.equal(editor.getValue(), "x"); }, - "test: text input aria label": function() { + "test: text input aria label without extra label set": function() { + editor.setValue("x x", -1); + editor.setOption('enableKeyboardAccessibility', true); + editor.renderer.$loop._flush(); + + editor.focus(); + + let text = editor.container.querySelector(".ace_text-input"); + assert.equal(text.getAttribute("aria-label"), "Cursor at row 1"); + }, + + "test: text input aria label with extra label set": function() { editor.setValue("x x", -1); editor.setOption('textInputAriaLabel', "super cool editor"); editor.setOption('enableKeyboardAccessibility', true); From 075edfb1f9212c364c44f976f53edd852f326ec1 Mon Sep 17 00:00:00 2001 From: Alice Koreman Date: Fri, 24 May 2024 10:42:01 +0200 Subject: [PATCH 3/4] fix: always set aria-label to text input in a11y mode --- src/editor.js | 5 +++++ src/keyboard/textinput.js | 12 ++++++------ src/keyboard/textinput_test.js | 19 ++++++++++++++++--- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/editor.js b/src/editor.js index 3b0b4d6c4b8..ab0ce713404 100644 --- a/src/editor.js +++ b/src/editor.js @@ -2939,6 +2939,7 @@ config.defineOptions(Editor.prototype, "editor", { // - Prevent tab-trapping. // - Hide irrelevant elements from assistive technology. // - On Windows, set more lines to the textarea. + // - set aria-label to the text input. if (value){ this.renderer.enableKeyboardAccessibility = true; this.renderer.keyboardFocusClassName = "ace_keyboard-focus"; @@ -2973,6 +2974,10 @@ config.defineOptions(Editor.prototype, "editor", { gutterKeyboardHandler = new GutterKeyboardHandler(this); gutterKeyboardHandler.addListener(); + + this.textInput.setAriaOptions({ + setLabel: true + }); } else { this.renderer.enableKeyboardAccessibility = false; diff --git a/src/keyboard/textinput.js b/src/keyboard/textinput.js index d1951961a82..e940251d833 100644 --- a/src/keyboard/textinput.js +++ b/src/keyboard/textinput.js @@ -88,19 +88,19 @@ TextInput= function(parentNode, host) { } if (options.setLabel) { text.setAttribute("aria-roledescription", nls("text-input.aria-roledescription", "editor")); + var arialLabel = ""; + if (host.$textInputAriaLabel) { + arialLabel += `${host.$textInputAriaLabel}, `; + } if(host.session) { var row = host.session.selection.cursor.row; - var arialLabel = ""; - if (host.$textInputAriaLabel) { - arialLabel += `${host.$textInputAriaLabel}, `; - } arialLabel += nls("text-input.aria-label", "Cursor at row $0", [row + 1]); - text.setAttribute("aria-label", arialLabel); } + text.setAttribute("aria-label", arialLabel); } }; - this.setAriaOptions({role: "textbox"}); + this.setAriaOptions({role: "textbox", setLabel: host.renderer.enableKeyboardAccessibility}); event.addListener(text, "blur", function(e) { if (ignoreFocusEvents) return; diff --git a/src/keyboard/textinput_test.js b/src/keyboard/textinput_test.js index d35f6e50d4a..f912bfbf250 100644 --- a/src/keyboard/textinput_test.js +++ b/src/keyboard/textinput_test.js @@ -760,10 +760,25 @@ module.exports = { editor.setOption('enableKeyboardAccessibility', true); editor.renderer.$loop._flush(); - editor.focus(); + let text = editor.container.querySelector(".ace_text-input"); + assert.equal(text.getAttribute("aria-label"), "Cursor at row 1"); + }, + + "test: text input aria label updated on focus": function() { + editor.setValue("x x\ny y", -1); + editor.setOption('enableKeyboardAccessibility', true); + editor.renderer.$loop._flush(); let text = editor.container.querySelector(".ace_text-input"); assert.equal(text.getAttribute("aria-label"), "Cursor at row 1"); + + editor.focus(); + sendEvent("keydown", {key: { code: "ArrowDown", key: "ArrowDown", keyCode: 40}}); + editor.renderer.$loop._flush(); + + editor.blur(); + editor.focus(); + assert.equal(text.getAttribute("aria-label"), "Cursor at row 2"); }, "test: text input aria label with extra label set": function() { @@ -772,8 +787,6 @@ module.exports = { editor.setOption('enableKeyboardAccessibility', true); editor.renderer.$loop._flush(); - editor.focus(); - let text = editor.container.querySelector(".ace_text-input"); assert.equal(text.getAttribute("aria-label"), "super cool editor, Cursor at row 1"); } From dd9c26bc009e104b2dc4914099d70518ffb91c85 Mon Sep 17 00:00:00 2001 From: Alice Koreman Date: Fri, 24 May 2024 10:58:26 +0200 Subject: [PATCH 4/4] remove unneeded change --- src/keyboard/textinput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/keyboard/textinput.js b/src/keyboard/textinput.js index e940251d833..81743b7f242 100644 --- a/src/keyboard/textinput.js +++ b/src/keyboard/textinput.js @@ -100,7 +100,7 @@ TextInput= function(parentNode, host) { } }; - this.setAriaOptions({role: "textbox", setLabel: host.renderer.enableKeyboardAccessibility}); + this.setAriaOptions({role: "textbox"}); event.addListener(text, "blur", function(e) { if (ignoreFocusEvents) return;