Hi, I see there are some ARIA attributes in place for menus. However, the dropdown can't be navigated with the keyboard, and the trigger button is not associated with the menu.
First, the button needs to be bound to the menu–this can be done with aria-controls="theMenuID", aria-haspopup="true", and aria-expanded="true | false".
When the dropdown opens, focus should be sent to the first item (which needs tabindex="0") instead of the unordered list which has tabindex. Using the roving tabindex technique, only one item can be tabbable at a time when the menu is open. You've already got aria-activedescendant working, so the tabindex and focus management portions will get you part of the way there!
Hooking up the escape key to close the menu would be a nice addition, too.
Hi, I see there are some ARIA attributes in place for menus. However, the dropdown can't be navigated with the keyboard, and the trigger button is not associated with the menu.
First, the button needs to be bound to the menu–this can be done with
aria-controls="theMenuID"
,aria-haspopup="true"
, andaria-expanded="true | false"
.When the dropdown opens, focus should be sent to the first item (which needs
tabindex="0"
) instead of the unordered list which has tabindex. Using the roving tabindex technique, only one item can be tabbable at a time when the menu is open. You've already gotaria-activedescendant
working, so the tabindex and focus management portions will get you part of the way there!Hooking up the escape key to close the menu would be a nice addition, too.