@@ -263,7 +263,7 @@ describe('combobox-nav', function () {
263
263
input = document . querySelector ( 'input' )
264
264
list = document . querySelector ( 'ul' )
265
265
options = document . querySelectorAll ( '[role=option]' )
266
- combobox = new Combobox ( input , list , { defaultFirstOption : true } )
266
+ combobox = new Combobox ( input , list , { firstOptionSelectionMode : 'selected' } )
267
267
combobox . start ( )
268
268
} )
269
269
@@ -276,6 +276,7 @@ describe('combobox-nav', function () {
276
276
it ( 'indicates first option when started' , ( ) => {
277
277
assert . equal ( document . querySelector ( '[data-combobox-option-default]' ) , options [ 0 ] )
278
278
assert . equal ( document . querySelectorAll ( '[data-combobox-option-default]' ) . length , 1 )
279
+ assert . equal ( list . children [ 0 ] . getAttribute ( 'aria-selected' ) , null )
279
280
} )
280
281
281
282
it ( 'indicates first option when restarted' , ( ) => {
@@ -311,4 +312,63 @@ describe('combobox-nav', function () {
311
312
} )
312
313
} )
313
314
} )
315
+
316
+ describe ( 'with defaulting to focusing the first option' , function ( ) {
317
+ let input
318
+ let list
319
+ let combobox
320
+ beforeEach ( function ( ) {
321
+ document . body . innerHTML = `
322
+ <input type="text">
323
+ <ul role="listbox" id="list-id">
324
+ <li id="baymax" role="option">Baymax</li>
325
+ <li><del>BB-8</del></li>
326
+ <li id="hubot" role="option">Hubot</li>
327
+ <li id="r2-d2" role="option">R2-D2</li>
328
+ <li id="johnny-5" hidden role="option">Johnny 5</li>
329
+ <li id="wall-e" role="option" aria-disabled="true">Wall-E</li>
330
+ <li><a href="#link" role="option" id="link">Link</a></li>
331
+ </ul>
332
+ `
333
+ input = document . querySelector ( 'input' )
334
+ list = document . querySelector ( 'ul' )
335
+ combobox = new Combobox ( input , list , { firstOptionSelectionMode : 'focused' } )
336
+ combobox . start ( )
337
+ } )
338
+
339
+ afterEach ( function ( ) {
340
+ combobox . destroy ( )
341
+ combobox = null
342
+ document . body . innerHTML = ''
343
+ } )
344
+
345
+ it ( 'focuses first option when started' , ( ) => {
346
+ // Does not set the default attribute
347
+ assert . equal ( document . querySelectorAll ( '[data-combobox-option-default]' ) . length , 0 )
348
+ // Item is correctly selected
349
+ assert . equal ( list . children [ 0 ] . getAttribute ( 'aria-selected' ) , 'true' )
350
+ } )
351
+
352
+ it ( 'indicates first option when restarted' , ( ) => {
353
+ combobox . stop ( )
354
+ combobox . start ( )
355
+ assert . equal ( list . children [ 0 ] . getAttribute ( 'aria-selected' ) , 'true' )
356
+ } )
357
+
358
+ it ( 'applies default option on Enter' , ( ) => {
359
+ let commits = 0
360
+ document . addEventListener ( 'combobox-commit' , ( ) => commits ++ )
361
+
362
+ assert . equal ( commits , 0 )
363
+ press ( input , 'Enter' )
364
+ assert . equal ( commits , 1 )
365
+ } )
366
+
367
+ it ( 'does not error when no options are visible' , ( ) => {
368
+ assert . doesNotThrow ( ( ) => {
369
+ document . getElementById ( 'list-id' ) . style . display = 'none'
370
+ combobox . clearSelection ( )
371
+ } )
372
+ } )
373
+ } )
314
374
} )
0 commit comments