Dropdown accessibility - tab key

[hannahbennett27]

• components: (Uncontrolled)Dropdown/DropdownMenu/DropdownItem
• reactstrap version ^7.1.0
• react version ^16.7.0

What is happening?

Dropdown menu lacks keyboard user accessibility-
On selecting to display a dropdown menu via the keyboard, pressing the tab key closes the menu, rather than tabbing through the dropdown items

What should be happening?

tab/shift+tab should operate in the same way as pressing the up or down keys - ie. tabs through the dropdown items in either direction

Steps to reproduce issue

1. Use the tab key to navigate to a dropdown (controlled/uncontrolled)
2. Select the toggle using the keyboard to display the dropdown menu
3. Attempt to use the tab/shift+tab key(s) to tab through the dropdown items

Code

        <UncontrolledDropdown>
            <DropdownToggle caret>
                Toggle button
            </DropdownToggle>
            <DropdownMenu>
                <DropdownItem>
                    Test Item 1
                </DropdownItem>
                <DropdownItem>
                    Test Item 2
                </DropdownItem>
                <DropdownItem>
                    Test Item 3
                </DropdownItem>
            </DropdownMenu>
        </UncontrolledDropdown>

Thank you

[TheSharpieOne]

I know this differs from what bootstrap itself is doing, but for accessibility tab should close the menu. As noted in the pull request comment, I think a11y trumps bootstrap alignment (at least a little)

https://www.w3.org/TR/wai-aria-practices-1.1/#menu

Tab: Moves focus to the next element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.

Shift + Tab: Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.

See their examples:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html
And if you think those are more "menu" and less "select" like, check out this listbox example which is similar:
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

If anything, I think there is a problem with tab focusing back on the toggle instead of the next element in the tab sequence.

If others feel that bootstrap alignment is more of a priority maybe we can change it to work like bootstrap and maybe have a prop which can enable better a11y (or vice versa).

[changLiuUNSW]

@TheSharpieOne I think it would be good we can align with Bootstrap.
Like us one of the biggest Banks in Australia, we have a dedicated team doing accessibility test regularly.
Based on the feedback, most people think using tab/shift+tab to navigate dropdown item is a must.

[TheSharpieOne]

If we are going to align more with bootstrap and less with aria suggestions, then there are other a11y suggestions which we current implement and bootstrap doesn't. Such as bootstrap's dropdowns do not wrap (hitting down arrow at the last item doesn't move focus to the first item). The way spacebar works (especially when the menu is open, reactstrap triggers the highlighted item (per wai aria practices) while bootstrap does nothing (causing the page to scroll)). Bootstrap doesn't implement a typeahead-ish thing where you can jump to an option based on the letter pressed (this is also in the wai aria practices)

How far do we want to take this?

The change request here is a pretty simple fix, we just completely ignore the tab key and we end up getting what bootstrap has.