Skip to content

Commit 6845905

Browse files
committedNov 27, 2023
fix: set completion popup role to 'menu' for safari
1 parent 1c207c9 commit 6845905

File tree

3 files changed

+11
-7
lines changed

3 files changed

+11
-7
lines changed
 

‎src/autocomplete/popup.js

+5-3
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,8 +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("aria-label", nls("Autocomplete suggestions"));
54+
popup.renderer.$textLayer.element.setAttribute("role", userAgent.isSafari ? "menu" : "listbox");
55+
popup.renderer.$textLayer.element.setAttribute("aria-roledescription", nls("Autocomplete suggestions"));
5556
popup.renderer.textarea.setAttribute("aria-hidden", "true");
5657

5758
popup.setOption("displayIndentGuides", false);
@@ -137,7 +138,8 @@ class AcePopup {
137138
selected.id = ariaId;
138139
t.element.setAttribute("aria-activedescendant", ariaId);
139140
el.setAttribute("aria-activedescendant", ariaId);
140-
selected.setAttribute("role", "option");
141+
selected.setAttribute("role", userAgent.isSafari ? "menuitem" : "option");
142+
selected.setAttribute("aria-roledescription", nls("item"));
141143
selected.setAttribute("aria-label", popup.getData(row).value);
142144
selected.setAttribute("aria-setsize", popup.data.length);
143145
selected.setAttribute("aria-posinset", row+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"><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"><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"><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"><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)
Please sign in to comment.