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..81743b7f242 100644 --- a/src/keyboard/textinput.js +++ b/src/keyboard/textinput.js @@ -88,15 +88,15 @@ 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); } }; 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"); }