Autocomplete accessibility features

src/autocomplete.js

@@ -2,6 +2,7 @@
 
 var HashHandler = require("./keyboard/hash_handler").HashHandler;
 var AcePopup = require("./autocomplete/popup").AcePopup;
+var getAriaId = require("./autocomplete/popup").getAriaId
 var util = require("./autocomplete/util");
 var lang = require("./lib/lang");
 var dom = require("./lib/dom");
@@ -54,6 +55,7 @@ var Autocomplete = function() {
         this.popup.autoSelect = this.autoSelect;
 
         this.popup.setData(this.completions.filtered, this.completions.filterText);
+        this.editor.textInput.setAriaOptions({activeDescendant: getAriaId(this.popup.getRow())});
 
         editor.keyBinding.addKeyboardHandler(this.keyboardHandler);
 

src/autocomplete/popup.js

@@ -7,6 +7,10 @@ var event = require("../lib/event");
 var lang = require("../lib/lang");
 var dom = require("../lib/dom");
 
+var getAriaId = function(index) {
+    return `suggest-aria-id:${index}`;
+}
+
 var $singleLineEditor = function(el) {
     var renderer = new Renderer(el);
 
@@ -45,6 +49,10 @@ var AcePopup = function(parentNode) {
     popup.renderer.content.style.cursor = "default";
     popup.renderer.setStyle("ace_autocomplete");
 
+    // Set aria attributes for the popup
+    popup.renderer.container.setAttribute("role", "listbox");
+    popup.renderer.container.setAttribute("aria-label", "Autocomplete suggestions");
+
     popup.setOption("displayIndentGuides", false);
     popup.setOption("dragDelay", 150);
 
@@ -114,11 +122,21 @@ var AcePopup = function(parentNode) {
         var row = popup.getRow();
         var t = popup.renderer.$textLayer;
         var selected = t.element.childNodes[row - t.config.firstRow];
-        if (selected !== t.selectedNode && t.selectedNode)
+        var el = document.activeElement; // Active element is textarea of main editor
+        if (selected !== t.selectedNode && t.selectedNode) {
             dom.removeCssClass(t.selectedNode, "ace_selected");
+            el.removeAttribute("aria-activedescendant");
+            t.selectedNode.id = "ace_line_" + t.selectedNode.id.split(":")[1];
+        }
         t.selectedNode = selected;
-        if (selected)
+        if (selected) {
             dom.addCssClass(selected, "ace_selected");
+            var ariaId = getAriaId(row);
+            selected.id = ariaId;
+            popup.renderer.container.setAttribute("aria-activedescendant", ariaId);
+            el.setAttribute("aria-activedescendant", ariaId);
+            selected.setAttribute("aria-label", popup.getData(row).value);
+        }
     });
     var hideHoverMarker = function() { setHoverMarker(-1); };
     var setHoverMarker = function(row, suppressRedraw) {
@@ -350,3 +368,4 @@ dom.importCssString(`
 
 exports.AcePopup = AcePopup;
 exports.$singleLineEditor = $singleLineEditor;
+exports.getAriaId = getAriaId;

src/keyboard/textinput.js

@@ -48,7 +48,23 @@ var TextInput = function(parentNode, host) {
     // FOCUS
     // ie9 throws error if document.activeElement is accessed too soon
     try { var isFocused = document.activeElement === text; } catch(e) {}
-
+
+    this.setAriaOptions = function(options) {
+        if (options.activeDescendant) {
+            text.setAttribute('aria-haspopup', 'true');
+            text.setAttribute('aria-autocomplete', 'list');
+            text.setAttribute('aria-activedescendant', options.activeDescendant);
+        } else {
+            text.setAttribute('aria-haspopup', 'false');
+            text.setAttribute('aria-autocomplete', 'both');
+            text.removeAttribute('aria-activedescendant');
+        }
+        if (options.role) {
+            text.setAttribute('role', options.role);
+        }
+    };
+    this.setAriaOptions({role: "textbox"});
+
     event.addListener(text, "blur", function(e) {
         if (ignoreFocusEvents) return;
         host.onBlur(e);

src/layer/text.js

@@ -293,6 +293,8 @@ var Text = function(parentEl) {
                 lineEl.className = "ace_line_group";
             } else {
                 lineEl.className = "ace_line";
+                lineEl.id = "ace_line_" + row;
+                lineEl.setAttribute("role", "option");
             }
             fragment.push(line);