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

* feat: allow users to add arialabel to text input

Author: akoreman

ace.d.ts

@@ -235,6 +235,7 @@ export namespace Ace {
     relativeLineNumbers: boolean;
     enableMultiselect: boolean;
     enableKeyboardAccessibility: boolean;
+    textInputAriaLabel: string;
   }
 
   export interface SearchOptions {

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",

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);
             }
         }
     };

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");
     }
 };