@@ -7,6 +7,7 @@ var event = require("../lib/event");
7
7
var lang = require ( "../lib/lang" ) ;
8
8
var dom = require ( "../lib/dom" ) ;
9
9
var nls = require ( "../config" ) . nls ;
10
+ var userAgent = require ( "./../lib/useragent" ) ;
10
11
11
12
var getAriaId = function ( index ) {
12
13
return `suggest-aria-id:${ index } ` ;
@@ -50,7 +51,8 @@ class AcePopup {
50
51
popup . renderer . setStyle ( "ace_autocomplete" ) ;
51
52
52
53
// 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" ) ) ;
54
56
popup . renderer . $textLayer . element . setAttribute ( "aria-label" , nls ( "Autocomplete suggestions" ) ) ;
55
57
popup . renderer . textarea . setAttribute ( "aria-hidden" , "true" ) ;
56
58
@@ -128,6 +130,7 @@ class AcePopup {
128
130
if ( selected !== t . selectedNode && t . selectedNode ) {
129
131
dom . removeCssClass ( t . selectedNode , "ace_selected" ) ;
130
132
el . removeAttribute ( "aria-activedescendant" ) ;
133
+ selected . removeAttribute ( "aria-selected" ) ;
131
134
t . selectedNode . removeAttribute ( "id" ) ;
132
135
}
133
136
t . selectedNode = selected ;
@@ -137,11 +140,13 @@ class AcePopup {
137
140
selected . id = ariaId ;
138
141
t . element . setAttribute ( "aria-activedescendant" , ariaId ) ;
139
142
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" ) ) ;
141
145
selected . setAttribute ( "aria-label" , popup . getData ( row ) . value ) ;
142
146
selected . setAttribute ( "aria-setsize" , popup . data . length ) ;
143
147
selected . setAttribute ( "aria-posinset" , row + 1 ) ;
144
148
selected . setAttribute ( "aria-describedby" , "doc-tooltip" ) ;
149
+ selected . setAttribute ( "aria-selected" , "true" ) ;
145
150
}
146
151
} ) ;
147
152
var hideHoverMarker = function ( ) { setHoverMarker ( - 1 ) ; } ;
0 commit comments