Skip to content

Commit b9bb9ef

Browse files
spectranautzcorpanmcking65
authored
Combobox Examples: add tests for backspace pull (#1645)
Fixes #1345. * Add regression tests: backspace for combobox-both and combobox-list * Remove backspace from key table and fix bugs Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Matt King <[email protected]>
1 parent d014a4d commit b9bb9ef

File tree

2 files changed

+365
-2
lines changed

2 files changed

+365
-2
lines changed

‎test/tests/combobox_autocomplete-both.js

Lines changed: 199 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -540,6 +540,203 @@ ariaTest(
540540
}
541541
);
542542

543+
// "Test 1" in https://github.com/w3c/aria-practices/issues/1345
544+
545+
ariaTest(
546+
'Test backspace with focus on textbox',
547+
exampleFile,
548+
'standard-single-line-editing-keys',
549+
async (t) => {
550+
// Send key "a" to the textbox
551+
552+
await t.context.session
553+
.findElement(By.css(ex.textboxSelector))
554+
.sendKeys('a');
555+
556+
// Get the value of the first option in the listbox
557+
558+
const firstOption = await (
559+
await t.context.queryElements(t, ex.optionsSelector)
560+
)[0].getText();
561+
562+
// Confirm that the value of the textbox is now set to the first option
563+
564+
t.is(
565+
await t.context.session
566+
.findElement(By.css(ex.textboxSelector))
567+
.getAttribute('value'),
568+
firstOption,
569+
'key press "a" should result in first option in textbox'
570+
);
571+
572+
// Send key BACK_SPACE
573+
574+
await t.context.session
575+
.findElement(By.css(ex.textboxSelector))
576+
.sendKeys(Key.BACK_SPACE);
577+
578+
// Confirm that the listbox is still open
579+
580+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
581+
582+
// Confirm that the value of the textbox is now "A"
583+
584+
t.is(
585+
await t.context.session
586+
.findElement(By.css(ex.textboxSelector))
587+
.getAttribute('value'),
588+
'A',
589+
'key press "BACK_SPACE" should result in deleting the autocompleted text'
590+
);
591+
592+
// Send key BACK_SPACE
593+
594+
await t.context.session
595+
.findElement(By.css(ex.textboxSelector))
596+
.sendKeys(Key.BACK_SPACE);
597+
598+
// Confirm that the listbox is still open
599+
600+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
601+
602+
// Confirm that the value of the textbox is now ""
603+
604+
t.is(
605+
await t.context.session
606+
.findElement(By.css(ex.textboxSelector))
607+
.getAttribute('value'),
608+
'',
609+
'key press "BACK_SPACE" should result in deleting the "A"'
610+
);
611+
612+
// Send key ARROW_DOWN
613+
await t.context.session
614+
.findElement(By.css(ex.textboxSelector))
615+
.sendKeys(Key.ARROW_DOWN);
616+
617+
// Confirm that the listbox is still open
618+
619+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
620+
621+
// Confirm aria-selected is set on the item "Alabama"
622+
623+
await assertAttributeValues(
624+
t,
625+
ex.optionsSelector + ':nth-of-type(1)',
626+
'aria-selected',
627+
'true'
628+
);
629+
630+
// Confirm that the value of the textbox is now set to the first option
631+
632+
t.is(
633+
await t.context.session
634+
.findElement(By.css(ex.textboxSelector))
635+
.getAttribute('value'),
636+
firstOption,
637+
'key press "ARROW_DOWN" should result in first option in textbox'
638+
);
639+
640+
// Confirm that there are 56 options visible
641+
t.is(
642+
await (await t.context.queryElements(t, ex.optionsSelector)).length,
643+
56,
644+
'key press "ARROW_DOWN" should result in all options being visible'
645+
);
646+
}
647+
);
648+
649+
// "Test 2" in https://github.com/w3c/aria-practices/issues/1345
650+
651+
ariaTest(
652+
'Test backspace with focus on textbox (2)',
653+
exampleFile,
654+
'standard-single-line-editing-keys',
655+
async (t) => {
656+
// Send keys "no" to the textbox
657+
658+
await t.context.session
659+
.findElement(By.css(ex.textboxSelector))
660+
.sendKeys('n', 'o');
661+
662+
// Confirm that the value of the textbox is now set to "North Carolina"
663+
664+
t.is(
665+
await t.context.session
666+
.findElement(By.css(ex.textboxSelector))
667+
.getAttribute('value'),
668+
'North Carolina',
669+
'key press "n" "o" should result in "North Carolina" in textbox'
670+
);
671+
672+
// Send key BACK_SPACE
673+
674+
await t.context.session
675+
.findElement(By.css(ex.textboxSelector))
676+
.sendKeys(Key.BACK_SPACE);
677+
678+
// Confirm that the listbox is still open
679+
680+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
681+
682+
// Confirm that the value of the textbox is now "No"
683+
684+
t.is(
685+
await t.context.session
686+
.findElement(By.css(ex.textboxSelector))
687+
.getAttribute('value'),
688+
'No',
689+
'key press "BACK_SPACE" should result in deleting the autocompleted text'
690+
);
691+
692+
// Send key BACK_SPACE
693+
694+
await t.context.session
695+
.findElement(By.css(ex.textboxSelector))
696+
.sendKeys(Key.BACK_SPACE);
697+
698+
// Confirm that the listbox is still open
699+
700+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
701+
702+
// Confirm that the value of the textbox is now "N"
703+
704+
t.is(
705+
await t.context.session
706+
.findElement(By.css(ex.textboxSelector))
707+
.getAttribute('value'),
708+
'N',
709+
'key press "BACK_SPACE" should result in deleting the "o"'
710+
);
711+
712+
// Send key ARROW_DOWN
713+
await t.context.session
714+
.findElement(By.css(ex.textboxSelector))
715+
.sendKeys(Key.ARROW_DOWN);
716+
717+
// Confirm that the listbox is still open
718+
719+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
720+
721+
// Confirm that the value of the textbox is now set to "Nebraska"
722+
723+
t.is(
724+
await t.context.session
725+
.findElement(By.css(ex.textboxSelector))
726+
.getAttribute('value'),
727+
'Nebraska',
728+
'key press "ARROW_DOWN" should result in "Nebraska" in textbox'
729+
);
730+
731+
// Confirm that there are 9 options visible
732+
t.is(
733+
await (await t.context.queryElements(t, ex.optionsSelector)).length,
734+
9,
735+
'key press "ARROW_DOWN" should result in 9 options being visible'
736+
);
737+
}
738+
);
739+
543740
ariaTest(
544741
'Test enter key press with focus on listbox',
545742
exampleFile,
@@ -551,7 +748,7 @@ ariaTest(
551748
.findElement(By.css(ex.textboxSelector))
552749
.sendKeys('a', Key.ARROW_DOWN);
553750

554-
// Get the value of the first option in the listbox
751+
// Get the value of the second option in the listbox
555752

556753
const secondOption = await (
557754
await t.context.queryElements(t, ex.optionsSelector)
@@ -563,7 +760,7 @@ ariaTest(
563760
.findElement(By.css(ex.textboxSelector))
564761
.sendKeys(Key.ENTER);
565762

566-
// Confirm that the listbox is still open
763+
// Confirm that the listbox is closed
567764

568765
await assertAttributeValues(
569766
t,

‎test/tests/combobox_autocomplete-list.js

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -596,6 +596,172 @@ ariaTest(
596596
}
597597
);
598598

599+
// "Test 3" in https://github.com/w3c/aria-practices/issues/1345
600+
601+
ariaTest(
602+
'Test backspace with focus on textbox',
603+
exampleFile,
604+
'standard-single-line-editing-keys',
605+
async (t) => {
606+
t.plan(7);
607+
608+
// Send key "a" to the textbox
609+
610+
await t.context.session
611+
.findElement(By.css(ex.textboxSelector))
612+
.sendKeys('a');
613+
614+
// Confirm that the value of the textbox is "a"
615+
616+
t.is(
617+
await t.context.session
618+
.findElement(By.css(ex.textboxSelector))
619+
.getAttribute('value'),
620+
'a',
621+
'key press "a" should result in "a" in textbox'
622+
);
623+
624+
// Send key BACK_SPACE
625+
626+
await t.context.session
627+
.findElement(By.css(ex.textboxSelector))
628+
.sendKeys(Key.BACK_SPACE);
629+
630+
// Confirm that the listbox is still open
631+
632+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
633+
634+
// Confirm that the value of the textbox is now ""
635+
636+
t.is(
637+
await t.context.session
638+
.findElement(By.css(ex.textboxSelector))
639+
.getAttribute('value'),
640+
'',
641+
'key press "BACK_SPACE" should result in deleting the "a"'
642+
);
643+
644+
// Send key ARROW_DOWN
645+
await t.context.session
646+
.findElement(By.css(ex.textboxSelector))
647+
.sendKeys(Key.ARROW_DOWN);
648+
649+
// Confirm that the listbox is still open
650+
651+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
652+
653+
// Confirm that the value of the textbox is still ""
654+
655+
t.is(
656+
await t.context.session
657+
.findElement(By.css(ex.textboxSelector))
658+
.getAttribute('value'),
659+
'',
660+
'key press "ARROW_DOWN" should result in no change in textbox value'
661+
);
662+
663+
// Confirm that "Alabama" option is aria-selected="true"
664+
665+
t.is(
666+
await t.context.session
667+
.findElement(By.css(ex.optionsSelector + '[aria-selected="true"]'))
668+
.getText(),
669+
'Alabama',
670+
'key press "ARROW_DOWN" should result in "Alabama" option being selected'
671+
);
672+
673+
// Confirm that there are 56 options visible
674+
t.is(
675+
await (await t.context.queryElements(t, ex.optionsSelector)).length,
676+
56,
677+
'key press "ARROW_DOWN" should result in all options being visible'
678+
);
679+
}
680+
);
681+
682+
// "Test 4" in https://github.com/w3c/aria-practices/issues/1345
683+
684+
ariaTest(
685+
'Test backspace with focus on textbox (2)',
686+
exampleFile,
687+
'standard-single-line-editing-keys',
688+
async (t) => {
689+
t.plan(7);
690+
691+
// Send keys "no" to the textbox
692+
693+
await t.context.session
694+
.findElement(By.css(ex.textboxSelector))
695+
.sendKeys('n', 'o');
696+
697+
// Confirm that the value of the textbox is now set to "no"
698+
699+
t.is(
700+
await t.context.session
701+
.findElement(By.css(ex.textboxSelector))
702+
.getAttribute('value'),
703+
'no',
704+
'key press "n" "o" should result in "no" in textbox'
705+
);
706+
707+
// Send key BACK_SPACE
708+
709+
await t.context.session
710+
.findElement(By.css(ex.textboxSelector))
711+
.sendKeys(Key.BACK_SPACE);
712+
713+
// Confirm that the listbox is still open
714+
715+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
716+
717+
// Confirm that the value of the textbox is now "n"
718+
719+
t.is(
720+
await t.context.session
721+
.findElement(By.css(ex.textboxSelector))
722+
.getAttribute('value'),
723+
'n',
724+
'key press "BACK_SPACE" should result in deleting the "o"'
725+
);
726+
727+
// Send key ARROW_DOWN
728+
await t.context.session
729+
.findElement(By.css(ex.textboxSelector))
730+
.sendKeys(Key.ARROW_DOWN);
731+
732+
// Confirm that the listbox is still open
733+
734+
await assertAttributeValues(t, ex.textboxSelector, 'aria-expanded', 'true');
735+
736+
// Confirm that the value of the textbox is still "n"
737+
738+
t.is(
739+
await t.context.session
740+
.findElement(By.css(ex.textboxSelector))
741+
.getAttribute('value'),
742+
'n',
743+
'key press "ARROW_DOWN" should result in no change in textbox value'
744+
);
745+
746+
// Confirm that "Nebraska" option is aria-selected="true"
747+
748+
t.is(
749+
await t.context.session
750+
.findElement(By.css(ex.optionsSelector + '[aria-selected="true"]'))
751+
.getText(),
752+
'Nebraska',
753+
'key press "ARROW_DOWN" should result in "Nebraska" option being selected'
754+
);
755+
756+
// Confirm that there are 9 options visible
757+
t.is(
758+
await (await t.context.queryElements(t, ex.optionsSelector)).length,
759+
9,
760+
'key press "ARROW_DOWN" should result in 9 options being visible'
761+
);
762+
}
763+
);
764+
599765
ariaTest(
600766
'Test single escape key press with focus on textbox',
601767
exampleFile,

0 commit comments

Comments
 (0)