Skip to content
Permalink
Browse files

fix(b-pagination, b-pagination-nav): add UP/DOWN keyboard navigation …

…support for JAWS (fixes #4322) (#4325)
  • Loading branch information
tmorehouse committed Oct 30, 2019
1 parent 5fa7e22 commit c686088f939328eb30d0bf089d077584e2988b70
@@ -465,9 +465,9 @@ recommended unless the content of the button textually conveys it's purpose.
pattern.

- Tabbing into the pagination component will autofocus the current active page button
- <kbd>LEFT</kbd> and <kbd>RIGHT</kbd> arrow keys will focus the previous and next buttons in the
page list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the
focused page button
- <kbd>LEFT</kbd> (or <kbd>UP</kbd>) and <kbd>RIGHT</kbd> (or <kbd>DOWN</kbd>) arrow keys will focus
the previous and next buttons, respectively, in the page list
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the currently focused page button
- Pressing <kbd>TAB</kbd> will move to the next control or link on the page, while pressing
<kbd>SHIFT</kbd>+<kbd>TAB</kbd> will move to the previous control or link on the page.

@@ -347,9 +347,9 @@ recommended unless the content of the button textually conveys it's purpose.
pattern.

- Tabbing into the pagination component will autofocus the current active page button
- <kbd>LEFT</kbd> and <kbd>RIGHT</kbd> arrow keys will focus the previous and next buttons in the
page list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the
focused page button
- <kbd>LEFT</kbd> (or <kbd>UP</kbd>) and <kbd>RIGHT</kbd> (or <kbd>DOWN</kbd>) arrow keys will focus
the previous and next buttons, respectively, in the page list
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the currently focused page button
- Pressing <kbd>TAB</kbd> will move to the next control or link on the page, while pressing
<kbd>SHIFT</kbd>+<kbd>TAB</kbd> will move to the previous control or link on the page.

@@ -864,7 +864,6 @@ describe('pagination', () => {
expect(document.activeElement).toEqual(links.at(3).element)

// LEFT
// links.at(3).trigger('keydown.left')
wrapper.trigger('keydown.left')
await waitNT(wrapper.vm)
expect(document.activeElement).toEqual(links.at(2).element)
@@ -874,6 +873,16 @@ describe('pagination', () => {
await waitNT(wrapper.vm)
expect(document.activeElement).toEqual(links.at(3).element)

// UP (same as LEFT)
wrapper.trigger('keydown.up')
await waitNT(wrapper.vm)
expect(document.activeElement).toEqual(links.at(2).element)

// DOWN (same as RIGHT)
links.at(2).trigger('keydown.down')
await waitNT(wrapper.vm)
expect(document.activeElement).toEqual(links.at(3).element)

// SHIFT-RIGHT
links.at(2).trigger('keydown.right', { shiftKey: true })
await waitNT(wrapper.vm)
@@ -287,6 +287,17 @@ export default {
})
},
methods: {
handleKeyNav(evt) {
const keyCode = evt.keyCode
const shift = evt.shiftKey
if (keyCode === KeyCodes.LEFT || keyCode === KeyCodes.UP) {
evt.preventDefault()
shift ? this.focusFirst() : this.focusPrev()
} else if (keyCode === KeyCodes.RIGHT || keyCode === KeyCodes.DOWN) {
evt.preventDefault()
shift ? this.focusLast() : this.focusNext()
}
},
getButtons() {
// Return only buttons that are visible
return selectAll('a.page-link', this.$el).filter(btn => isVisible(btn))
@@ -545,19 +556,7 @@ export default {
'aria-disabled': disabled ? 'true' : 'false',
'aria-label': this.ariaLabel || null
},
on: {
keydown: evt => {
const keyCode = evt.keyCode
const shift = evt.shiftKey
if (keyCode === KeyCodes.LEFT) {
evt.preventDefault()
shift ? this.focusFirst() : this.focusPrev()
} else if (keyCode === KeyCodes.RIGHT) {
evt.preventDefault()
shift ? this.focusLast() : this.focusNext()
}
}
}
on: { keydown: this.handleKeyNav }
},
buttons
)

0 comments on commit c686088

Please sign in to comment.
You can’t perform that action at this time.