@@ -228,6 +228,13 @@ $.widget( "ui.autocomplete", {
228
228
if ( / ^ k e y / . test ( event . originalEvent . type ) ) {
229
229
this . _value ( item . value ) ;
230
230
}
231
+ } else {
232
+ // Normally the input is populated with the item's value as the
233
+ // menu is navigated, causing screen readers to notice a change and
234
+ // announce the item. Since the focus event was canceled, this doesn't
235
+ // happen, so we update the live region so that screen readers can
236
+ // still notice the change and announce it.
237
+ this . liveRegion . text ( item . value ) ;
231
238
}
232
239
} ,
233
240
menuselect : function ( event , ui ) {
@@ -261,6 +268,13 @@ $.widget( "ui.autocomplete", {
261
268
}
262
269
} ) ;
263
270
271
+ this . liveRegion = $ ( "<span>" , {
272
+ role : "status" ,
273
+ "aria-live" : "polite"
274
+ } )
275
+ . addClass ( "ui-helper-hidden-accessible" )
276
+ . insertAfter ( this . element ) ;
277
+
264
278
if ( $ . fn . bgiframe ) {
265
279
this . menu . element . bgiframe ( ) ;
266
280
}
@@ -284,6 +298,7 @@ $.widget( "ui.autocomplete", {
284
298
. removeAttr ( "aria-autocomplete" )
285
299
. removeAttr ( "aria-haspopup" ) ;
286
300
this . menu . element . remove ( ) ;
301
+ this . liveRegion . remove ( ) ;
287
302
} ,
288
303
289
304
_setOption : function ( key , value ) {
@@ -530,24 +545,19 @@ $.extend( $.ui.autocomplete, {
530
545
531
546
532
547
// live region extension, adding a `messages` option
548
+ // NOTE: This is an experimental API. We are still investigating
549
+ // a full solution for string manipulation and internationalization.
533
550
$ . widget ( "ui.autocomplete" , $ . ui . autocomplete , {
534
551
options : {
535
552
messages : {
536
553
noResults : "No search results." ,
537
554
results : function ( amount ) {
538
- return amount + ( amount > 1 ? " results are" : " result is" ) + " available, use up and down arrow keys to navigate." ;
555
+ return amount + ( amount > 1 ? " results are" : " result is" ) +
556
+ " available, use up and down arrow keys to navigate." ;
539
557
}
540
558
}
541
559
} ,
542
- _create : function ( ) {
543
- this . _super ( ) ;
544
- this . liveRegion = $ ( "<span>" , {
545
- role : "status" ,
546
- "aria-live" : "polite"
547
- } )
548
- . addClass ( "ui-helper-hidden-accessible" )
549
- . insertAfter ( this . element ) ;
550
- } ,
560
+
551
561
__response : function ( content ) {
552
562
var message ;
553
563
this . _superApply ( arguments ) ;
0 commit comments