feat: allow users to add arialabel to text input (#5560)

* feat: allow users to add arialabel to text input
ajaxorg · May 22, 2024 · 8d7dfb6 · 8d7dfb6
1 parent 36353db
commit 8d7dfb6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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
@@ -90,7 +90,12 @@ 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 = "";
+                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
@@ -753,6 +753,29 @@ module.exports = {
         assert.equal(editor.getValue(), "");
         sendEvent("input", {key: {inputType: "historyRedo"}});
         assert.equal(editor.getValue(), "x");
+    },
+
+    "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);
+        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");
     }
 };