fix(b-pagination, b-pagination-nav): add UP/DOWN keyboard navigation support for JAWS (fixes #4322) (#4325)

Author: tmorehouse

src/components/pagination-nav/README.md

@@ -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.
 

src/components/pagination/README.md

@@ -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.
 

src/components/pagination/pagination.spec.js

@@ -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)

src/mixins/pagination.js

@@ -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
     )