fix: always set aria-label to text input in a11y mode (#5563)

* fix: always set aria-label to text input in a11y mode
ajaxorg · May 24, 2024 · 00346fd · 00346fd
1 parent 2330d80
commit 00346fd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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");
     }