fix(a11y): update aria-label of textinput on cursor move (#5665)

ajaxorg · Nov 4, 2024 · 6ff93a8 · 6ff93a8
1 parent 25d3fee
commit 6ff93a8
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git a/src/keyboard/textinput.js b/src/keyboard/textinput.js
@@ -73,6 +73,19 @@ TextInput= function(parentNode, host) {
 
         numberOfExtraLines = number;
     };
+
+    this.setAriaLabel = function() {
+        var ariaLabel = "";
+        if (host.$textInputAriaLabel) {
+            ariaLabel += `${host.$textInputAriaLabel}, `;
+        }
+        if(host.session) {
+            var row = host.session.selection.cursor.row;
+            ariaLabel += nls("text-input.aria-label", "Cursor at row $0", [row + 1]);
+        }
+        text.setAttribute("aria-label", ariaLabel);
+    };
+
     this.setAriaOptions = function(options) {
         if (options.activeDescendant) {
             text.setAttribute("aria-haspopup", "true");
@@ -88,19 +101,11 @@ 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;
-                arialLabel += nls("text-input.aria-label", "Cursor at row $0", [row + 1]);
-            }
-            text.setAttribute("aria-label", arialLabel);
+            this.setAriaLabel();
         }
     };
 
-    this.setAriaOptions({role: "textbox"}); 
+    this.setAriaOptions({role: "textbox"});
 
     event.addListener(text, "blur", function(e) {
         if (ignoreFocusEvents) return;
@@ -191,6 +196,9 @@ TextInput= function(parentNode, host) {
         // sync value of textarea
         resetSelection();
     });
+
+    // if cursor changes position, we need to update the label with the correct row
+    host.on("changeSelection", this.setAriaLabel);
 
     // Convert from row,column position to the linear position with respect to the current
     // block of lines in the textarea.

diff --git a/src/keyboard/textinput_test.js b/src/keyboard/textinput_test.js
@@ -789,7 +789,24 @@ module.exports = {
 
         let text = editor.container.querySelector(".ace_text-input"); 
         assert.equal(text.getAttribute("aria-label"), "super cool editor, Cursor at row 1");
-    }
+    },
+
+    "test: text input aria label updated on cursor move": function() {
+        editor.setValue("line1\nline2\nline3", -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}});
+        sendEvent("keydown", {key: { code: "ArrowDown", key: "ArrowDown", keyCode: 40}});
+        sendEvent("keydown", {key: { code: "ArrowRight", key: "ArrowRight", keyCode: 39}});
+        editor.renderer.$loop._flush();
+
+        assert.equal(text.getAttribute("aria-label"), "Cursor at row 3");
+    },
 };