Skip to content

Commit

Permalink
Add support for Home and End keys
Browse files Browse the repository at this point in the history
The [WAI ARIA Practices 1.1][listbox-keyboard] outlines optional support
for [`Home` and `End` keys][keys] to jump to the top and bottom of the
listbox, respectively.

[listbox-keyboard]: https://www.w3.org/TR/wai-aria-practices-1.1/#listbox-popup-keyboard-interaction
[keys]: https://www.w3.org/TR/uievents-key/#keys-navigation
  • Loading branch information
seanpdoyle committed Nov 22, 2020
1 parent 4ae6175 commit e130b77
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 0 deletions.
10 changes: 10 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,16 @@ function keyboardBindings(event: KeyboardEvent, combobox: Combobox) {
combobox.navigate(-1)
event.preventDefault()
break
case 'Home':
combobox.clearSelection()
combobox.navigate(1)
event.preventDefault()
break
case 'End':
combobox.clearSelection()
combobox.navigate(-1)
event.preventDefault()
break
case 'n':
if (ctrlBindings && event.ctrlKey) {
combobox.navigate(1)
Expand Down
8 changes: 8 additions & 0 deletions test/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,14 @@ describe('combobox-nav', function() {
assert.equal(options[5].getAttribute('aria-selected'), 'true')
assert.equal(input.getAttribute('aria-activedescendant'), 'link')

press(input, 'Home')
assert.equal(options[0].getAttribute('aria-selected'), 'true')
assert.equal(input.getAttribute('aria-activedescendant'), 'baymax')

press(input, 'End')
assert.equal(options[5].getAttribute('aria-selected'), 'true')
assert.equal(input.getAttribute('aria-activedescendant'), 'link')

press(input, 'Enter')
assert.equal(expectedTargets.length, 2)
assert.equal(expectedTargets[0], 'hubot')
Expand Down

0 comments on commit e130b77

Please sign in to comment.