Merge pull request #5059 from aoyku/ace-line-fix-2

Add accessibility attributes back into autocomplete popup lines
ajaxorg · Feb 15, 2023 · 07dc157 · 07dc157
2 parents 30fc3ea + 4b4528d
commit 07dc157
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/ace.d.ts b/ace.d.ts
@@ -752,6 +752,7 @@ export namespace Ace {
 
   export interface TextInput {
     resetSelection(): void;
+    setAriaOption(activeDescendant: string, role: string): void;
   }
 
   export interface Editor extends OptionsProvider, EventEmitter {

diff --git a/src/autocomplete/popup.js b/src/autocomplete/popup.js
@@ -135,7 +135,10 @@ var AcePopup = function(parentNode) {
             selected.id = ariaId;
             popup.renderer.container.setAttribute("aria-activedescendant", ariaId);
             el.setAttribute("aria-activedescendant", ariaId);
+            selected.setAttribute("role", "option");
             selected.setAttribute("aria-label", popup.getData(row).value);
+            selected.setAttribute("aria-setsize", popup.data.length);
+            selected.setAttribute("aria-posinset", row);
         }
     });
     var hideHoverMarker = function() { setHoverMarker(-1); };

diff --git a/src/autocomplete_test.js b/src/autocomplete_test.js
@@ -26,16 +26,16 @@ module.exports = {
         editor.renderer.$themeId = "./theme/textmate";
 
         editor.execCommand("insertstring", "a");
-        checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" aria-label="arraysort"><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-meta">local</s></d><d "ace_line"><s "ace_completion-highlight">a</s><s "ace_">looooooooooooooooooooooooooooong_word</s><s "ace_completion-meta">local</s></d>', function() {
+        checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize=2 aria-posinset=0><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-meta">local</s></d><d "ace_line"><s "ace_completion-highlight">a</s><s "ace_">looooooooooooooooooooooooooooong_word</s><s "ace_completion-meta">local</s></d>', function() {
             editor.execCommand("insertstring", "rr");
-            checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" aria-label="arraysort"><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-meta">local</s></d>', function() {
+            checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize=1 aria-posinset=0><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-meta">local</s></d>', function() {
                 editor.execCommand("insertstring", "r");
-                checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" aria-label="arraysort"><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-meta">local</s></d>', function() {
+                checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize=1 aria-posinset=0><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-meta">local</s></d>', function() {
 
                     editor.onCommandKey(null, 0, 13);
                     assert.equal(editor.getValue(), "arraysort\narraysort alooooooooooooooooooooooooooooong_word");
                     editor.execCommand("insertstring", " looooooooooooooooooooooooooooong_");
-                    checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" aria-label="alooooooooooooooooooooooooooooong_word"><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-meta">local</s></d>', function() {
+                    checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="alooooooooooooooooooooooooooooong_word" aria-setsize=1 aria-posinset=0><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-meta">local</s></d>', function() {
                         editor.onCommandKey(null, 0, 13);
                         editor.destroy();
                         editor.container.remove();