+28
-20
lines changedFilter options
+28
-20
lines changed Original file line number Diff line number Diff line change
@@ -465,9 +465,9 @@ recommended unless the content of the button textually conveys it's purpose.
465 465
pattern.
466 466 467 467
- Tabbing into the pagination component will autofocus the current active page button
468 -
- <kbd>LEFT</kbd> and <kbd>RIGHT</kbd> arrow keys will focus the previous and next buttons in the
469 -
page list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the
470 -
focused page button
468 +
- <kbd>LEFT</kbd> (or <kbd>UP</kbd>) and <kbd>RIGHT</kbd> (or <kbd>DOWN</kbd>) arrow keys will focus
469 +
the previous and next buttons, respectively, in the page list
470 +
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the currently focused page button
471 471
- Pressing <kbd>TAB</kbd> will move to the next control or link on the page, while pressing
472 472
<kbd>SHIFT</kbd>+<kbd>TAB</kbd> will move to the previous control or link on the page.
473 473
@@ -347,9 +347,9 @@ recommended unless the content of the button textually conveys it's purpose.
347 347
pattern.
348 348 349 349
- Tabbing into the pagination component will autofocus the current active page button
350 -
- <kbd>LEFT</kbd> and <kbd>RIGHT</kbd> arrow keys will focus the previous and next buttons in the
351 -
page list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the
352 -
focused page button
350 +
- <kbd>LEFT</kbd> (or <kbd>UP</kbd>) and <kbd>RIGHT</kbd> (or <kbd>DOWN</kbd>) arrow keys will focus
351 +
the previous and next buttons, respectively, in the page list
352 +
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the currently focused page button
353 353
- Pressing <kbd>TAB</kbd> will move to the next control or link on the page, while pressing
354 354
<kbd>SHIFT</kbd>+<kbd>TAB</kbd> will move to the previous control or link on the page.
355 355
@@ -864,7 +864,6 @@ describe('pagination', () => {
864 864
expect(document.activeElement).toEqual(links.at(3).element)
865 865 866 866
// LEFT
867 -
// links.at(3).trigger('keydown.left')
868 867
wrapper.trigger('keydown.left')
869 868
await waitNT(wrapper.vm)
870 869
expect(document.activeElement).toEqual(links.at(2).element)
@@ -874,6 +873,16 @@ describe('pagination', () => {
874 873
await waitNT(wrapper.vm)
875 874
expect(document.activeElement).toEqual(links.at(3).element)
876 875 876 +
// UP (same as LEFT)
877 +
wrapper.trigger('keydown.up')
878 +
await waitNT(wrapper.vm)
879 +
expect(document.activeElement).toEqual(links.at(2).element)
880 + 881 +
// DOWN (same as RIGHT)
882 +
links.at(2).trigger('keydown.down')
883 +
await waitNT(wrapper.vm)
884 +
expect(document.activeElement).toEqual(links.at(3).element)
885 + 877 886
// SHIFT-RIGHT
878 887
links.at(2).trigger('keydown.right', { shiftKey: true })
879 888
await waitNT(wrapper.vm)
@@ -287,6 +287,17 @@ export default {
287 287
})
288 288
},
289 289
methods: {
290 +
handleKeyNav(evt) {
291 +
const keyCode = evt.keyCode
292 +
const shift = evt.shiftKey
293 +
if (keyCode === KeyCodes.LEFT || keyCode === KeyCodes.UP) {
294 +
evt.preventDefault()
295 +
shift ? this.focusFirst() : this.focusPrev()
296 +
} else if (keyCode === KeyCodes.RIGHT || keyCode === KeyCodes.DOWN) {
297 +
evt.preventDefault()
298 +
shift ? this.focusLast() : this.focusNext()
299 +
}
300 +
},
290 301
getButtons() {
291 302
// Return only buttons that are visible
292 303
return selectAll('a.page-link', this.$el).filter(btn => isVisible(btn))
@@ -545,19 +556,7 @@ export default {
545 556
'aria-disabled': disabled ? 'true' : 'false',
546 557
'aria-label': this.ariaLabel || null
547 558
},
548 -
on: {
549 -
keydown: evt => {
550 -
const keyCode = evt.keyCode
551 -
const shift = evt.shiftKey
552 -
if (keyCode === KeyCodes.LEFT) {
553 -
evt.preventDefault()
554 -
shift ? this.focusFirst() : this.focusPrev()
555 -
} else if (keyCode === KeyCodes.RIGHT) {
556 -
evt.preventDefault()
557 -
shift ? this.focusLast() : this.focusNext()
558 -
}
559 -
}
560 -
}
559 +
on: { keydown: this.handleKeyNav }
561 560
},
562 561
buttons
563 562
)
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4