Pagination pages 2...> not accessible using `tab` key tabindex #a11y

[scottsasaki]

Pagination is not accessible using tab key #a11y

Official bootstrap allows users to use the tab key on the keyboard to navigate to available pages. This differs from bootstrap-vue where only the current page is tabbable, then the user must change to using left/right keys on the keyboard.

This could be difficult for someone with low mobility that has been using the tab key to navigate and then needs to transition to the arrow keys.

Steps to reproduce the bug

1. Go to https://bootstrap-vue.js.org/docs/components/pagination/#pagination
2. Using the keyboard hit the tab key until your :focus lands on the example 1st page.
3. Hit tab again and you will be moved past the pagination box.

Expected behavior

tabindex should be set to 0. The user should be able to tab to the next enabled page, as well as enabled left/right arrows.

Versions

v2.0.0-rc.22

Libraries:

• BootstrapVue: 2.0.0
• Bootstrap: 4.#.#

Environment:

• Device: Macbook
• OS: Mojave
• Browser: Chrome
• Version: 74

Demo link

https://bootstrap-vue.js.org/docs/components/pagination/#pagination

Additional context

I couldn't find any documentation around why the tabindex was set to -1 when the page was enabled

[peoray]

Hello, I'd like to work on this :slightly_smiling_face:

[tmorehouse]

Pagination uses built in key board navigation. the pagination component is a widget that has the current active page item with tabindex=0, the other pages are reachable via left/right keys when using the keyboard.

https://bootstrap-vue.js.org/docs/components/pagination#keyboard-navigation-support

b-pagination follows the WAI-ARIA best practice roving tab index pattern: https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_roving_tabindex

The active page (as detected by the v-model for b-pagination) has tab index of 0 while all others are tabindex of -1. Using the left/right/home/end keys you can move to other page buttons. hitting enter (or space) will select the page. The new current page will have tab index of 0

B-pagination is an intelligent component that manages displaying a subset of page buttons. The native bootstrap V4.3 pagination is just plain markup without any intelligence (it doesn't have a jQuery plugin) for rendering a subset of page buttons.

If you need just a plain set of pagination buttons, with known static/links (without automatic ellipsis, first/end buttons), then I would suggest rendering the plain markup and applying the bootstrap styling classes.

[tmorehouse]

We would maybe add in a flag prop for disabling the WAI ARIA authoring best practices keyboard navigation for pagination (which states that the current page should be the element focused when tabbing into a pagination control), which you would explicitly need to opt-in by setting the prop to true.