Skip to content

Commit bf1a4ea

Browse files
authored
fix: switch aria-selected to aria-current for webkit (#5416)
follow-up to #5403, we set the role to menuitem for items in the completer popup on webkit browsers but aria-selected is not allowed for menuitem roles triggering customers who run automated a11y tests. This changes it to aria-current which is allowed for this role.
1 parent ef29ada commit bf1a4ea

File tree

1 file changed

+9
-4
lines changed

1 file changed

+9
-4
lines changed

src/autocomplete/popup.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ var getAriaId = function (index) {
1212
return `suggest-aria-id:${index}`;
1313
};
1414

15+
// Safari requires different ARIA A11Y attributes compared to other browsers
16+
var popupAriaRole = userAgent.isSafari ? "menu" : "listbox";
17+
var optionAriaRole = userAgent.isSafari ? "menuitem" : "option";
18+
var ariaActiveState = userAgent.isSafari ? "aria-current" : "aria-selected";
19+
1520
/**
1621
*
1722
* @param {HTMLElement} [el]
@@ -56,7 +61,7 @@ class AcePopup {
5661
popup.renderer.setStyle("ace_autocomplete");
5762

5863
// Set aria attributes for the popup
59-
popup.renderer.$textLayer.element.setAttribute("role", userAgent.isSafari ? "menu" : "listbox");
64+
popup.renderer.$textLayer.element.setAttribute("role", popupAriaRole);
6065
popup.renderer.$textLayer.element.setAttribute("aria-roledescription", nls("Autocomplete suggestions"));
6166
popup.renderer.$textLayer.element.setAttribute("aria-label", nls("Autocomplete suggestions"));
6267
popup.renderer.textarea.setAttribute("aria-hidden", "true");
@@ -137,7 +142,7 @@ class AcePopup {
137142
if (selected !== t.selectedNode && t.selectedNode) {
138143
dom.removeCssClass(t.selectedNode, "ace_selected");
139144
el.removeAttribute("aria-activedescendant");
140-
selected.removeAttribute("aria-selected");
145+
selected.removeAttribute(ariaActiveState);
141146
t.selectedNode.removeAttribute("id");
142147
}
143148
t.selectedNode = selected;
@@ -147,13 +152,13 @@ class AcePopup {
147152
selected.id = ariaId;
148153
t.element.setAttribute("aria-activedescendant", ariaId);
149154
el.setAttribute("aria-activedescendant", ariaId);
150-
selected.setAttribute("role", userAgent.isSafari ? "menuitem" : "option");
155+
selected.setAttribute("role", optionAriaRole);
151156
selected.setAttribute("aria-roledescription", nls("item"));
152157
selected.setAttribute("aria-label", popup.getData(row).value);
153158
selected.setAttribute("aria-setsize", popup.data.length);
154159
selected.setAttribute("aria-posinset", row + 1);
155160
selected.setAttribute("aria-describedby", "doc-tooltip");
156-
selected.setAttribute("aria-selected", "true");
161+
selected.setAttribute(ariaActiveState, "true");
157162
}
158163
});
159164
var hideHoverMarker = function() { setHoverMarker(-1); };

0 commit comments

Comments
 (0)