Button Dropdown example

This repo aims to address some concerns/accessibility issues with the standards Bootstrap button dropdown module.

Bootstrap button dropdown example:

Issues with Bootstrap version

Focus should shift from button to the dropdown when the button is triggered. Instead, focus remains on the button and it is announced again
When users TAB past last dropdown item and on to other focusable items, the dropdown menu should close
users cannot use UP ARROW and DOWN ARROW keystrokes to select dropdown items

Ideal process for Keyboard-only users

To get to button:

Users should be able to TAB to button, which then receives focus

Button announced:

aria-label value should be announced (as it over-rides the button value)
Button could be announced as "collapsed" via aria-expanded="false". Alternatively, this attribute could be injected only when the button is expanded.
Button should be announced as a "popup button" via aria-haspopup="true". The presence of this attribute should mean that the number of items in dropdown should also be announced.

To trigger the button:

ENTER or SPACE strokes should trigger dropdown
Additional ENTER or SPACE strokes should close dropdown

After button triggered:

aria-expanded should change to aria-expanded="true" on the button. Or, if the attribute was not present before, it should now be present, and set to aria-expanded="true".
Focus should immediately shift to <UL> and the dropdown should become visible
<UL> should announced aria-describedby value

To escape dropdown

ESC should close the dropdown and return focus to the button

To leave dropdown

Users should be able to TAB down through the dropdown items and then on to other focusable items outside the dropdown. As soon focus leave the last dropdown item, the dropdown should disappear.
Users should be able to SHIFT TAB up through the dropdown items and back to the button. Dropdown should remain open (unless users then close the dropdown by triggering the button again)

To move around items inside dropdown

When focus has shifted to the UL, users should be able to use TAB, SHIFT TAB, UP ARROW or DOWN ARROW to move up or down <A> elements
When users reach the beginning or end of the list, UP ARROW and DOWN ARROW keystrokes should then have not have any effect.
an item can be chosen using ENTER or SPACE

To select items inside dropdown

ENTER or SPACE strokes should select focused dropdown item

When an item selected

As these are links, the user should be taken to a new page

Ideal process for Mouse users

To trigger the button:

Users should be able to MOUSE CLICK on button which should make the <UL> becomes visible

To escape dropdown

Users should be able to MOUSE CLICK anywhere outside of dropdown
Users should be able to MOUSE CLICK on button again

To select

Users should be able to MOUSE CLICK on any item within the dropdown

When an item selected

As these are links, the user should be taken to a new page