Skip to content

Commit ee917cf

Browse files
authored
Merge pull request #5403 from akoreman/completion_a11y
fix: set completion popup role to 'menu' for safari
2 parents 1c207c9 + fbcb850 commit ee917cf

File tree

3 files changed

+13
-6
lines changed

3 files changed

+13
-6
lines changed

src/autocomplete/popup.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ var event = require("../lib/event");
77
var lang = require("../lib/lang");
88
var dom = require("../lib/dom");
99
var nls = require("../config").nls;
10+
var userAgent = require("./../lib/useragent");
1011

1112
var getAriaId = function(index) {
1213
return `suggest-aria-id:${index}`;
@@ -50,7 +51,8 @@ class AcePopup {
5051
popup.renderer.setStyle("ace_autocomplete");
5152

5253
// Set aria attributes for the popup
53-
popup.renderer.$textLayer.element.setAttribute("role", "listbox");
54+
popup.renderer.$textLayer.element.setAttribute("role", userAgent.isSafari ? "menu" : "listbox");
55+
popup.renderer.$textLayer.element.setAttribute("aria-roledescription", nls("Autocomplete suggestions"));
5456
popup.renderer.$textLayer.element.setAttribute("aria-label", nls("Autocomplete suggestions"));
5557
popup.renderer.textarea.setAttribute("aria-hidden", "true");
5658

@@ -128,6 +130,7 @@ class AcePopup {
128130
if (selected !== t.selectedNode && t.selectedNode) {
129131
dom.removeCssClass(t.selectedNode, "ace_selected");
130132
el.removeAttribute("aria-activedescendant");
133+
selected.removeAttribute("aria-selected");
131134
t.selectedNode.removeAttribute("id");
132135
}
133136
t.selectedNode = selected;
@@ -137,11 +140,13 @@ class AcePopup {
137140
selected.id = ariaId;
138141
t.element.setAttribute("aria-activedescendant", ariaId);
139142
el.setAttribute("aria-activedescendant", ariaId);
140-
selected.setAttribute("role", "option");
143+
selected.setAttribute("role", userAgent.isSafari ? "menuitem" : "option");
144+
selected.setAttribute("aria-roledescription", nls("item"));
141145
selected.setAttribute("aria-label", popup.getData(row).value);
142146
selected.setAttribute("aria-setsize", popup.data.length);
143147
selected.setAttribute("aria-posinset", row+1);
144148
selected.setAttribute("aria-describedby", "doc-tooltip");
149+
selected.setAttribute("aria-selected", "true");
145150
}
146151
});
147152
var hideHoverMarker = function() { setHoverMarker(-1); };

src/autocomplete_test.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,16 @@ module.exports = {
6666
assert.ok(!editor.container.querySelector("style"));
6767

6868
sendKey("a");
69-
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="2" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-spacer"> </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-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
69+
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-roledescription="item" aria-label="arraysort" aria-setsize="2" aria-posinset="1" aria-describedby="doc-tooltip" aria-selected="true"><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-spacer"> </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-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
7070
sendKey("rr");
71-
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
71+
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-roledescription="item" aria-label="arraysort" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip" aria-selected="true"><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
7272
sendKey("r");
73-
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
73+
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-roledescription="item" aria-label="arraysort" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip" aria-selected="true"><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
7474

7575
sendKey("Return");
7676
assert.equal(editor.getValue(), "arraysort\narraysort alooooooooooooooooooooooooooooong_word");
7777
editor.execCommand("insertstring", " looooooooooooooooooooooooooooong_");
78-
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="alooooooooooooooooooooooooooooong_word" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
78+
checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-roledescription="item" aria-label="alooooooooooooooooooooooooooooong_word" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip" aria-selected="true"><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
7979
sendKey("Return");
8080
editor.destroy();
8181
editor.container.remove();

src/lib/useragent.js

+2
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ exports.isWebKit = parseFloat(ua.split("WebKit/")[1]) || undefined;
6161

6262
exports.isChrome = parseFloat(ua.split(" Chrome/")[1]) || undefined;
6363

64+
exports.isSafari = parseFloat(ua.split(" Safari/")[1]) && !exports.isChrome || undefined;
65+
6466
exports.isEdge = parseFloat(ua.split(" Edge/")[1]) || undefined;
6567

6668
exports.isAIR = ua.indexOf("AdobeAIR") >= 0;

0 commit comments

Comments
 (0)