Setting tabindex=-1 on focusable elements within dropdown menus allows
the user to treat dropdown menus as a single focusable item with its own
internal navigation using arrow keys.

Menu items are often <a> elements, which jQuery refuses to trigger click
events on. Instead it just bubbles up to the menu.

Using HTMLElement's click method fixes this and makes menu items
clickable from the keyboard using dropdown menus.

Setting role= makes assistive technology aware there is a widget here.
In this case, Orca will now exit browse mode and allow us to capture
keydown events when focused on a dropdown menu. It will also inform the
user that there's a menu focused.

Since dropdowns can be used in multiple elements each with different
ARIA roles, a guessRole method is used to find the correct role.
All roles I consider possible are listed, but only menu is implemented.

This is deliberately done before the transition finishes so that screen
readers get immediate feedback.

This makes dropdown menu buttons screen reader accessible.

aria-labelledby refers to an element using an ID, so the chosen labels
are now assigned a unique ID- This ID is not stable, do not refer to it
with user scripts.

As the menus grab focus and navigate by tracking a 'selected' div class,
assistive technology has no idea that what the current selection is.

Assign IDs to each menu item and set aria-activedescendant to the ID of
the currently selected menu item.

When the menu is unfocused, remove aria-activedescendant- This isn't
neccessary but in my experience it triggers Orca to remind the user of
their current selection when re-focusing the menu.

This file is taken from Semantic UI which isn't linted upstream.
Ignore it as we won't fix these issues.

Co-Authored-By: guillep2k <[email protected]>

Co-Authored-By: guillep2k <[email protected]>