Focus is not leaving the main content in multiple dropdown menus

[sairina]

Observed behavior

In most (if not, all) parts of Kolibri outside of the navbar and appbar, if a user is navigating with a keyboard, when they tab into anything with a dropdown menu, the focus is not gained by the menu component, but instead, stays in the main content, and the user cannot use any keys to navigate within the menu.

Some examples include:

Facility > Users
Device > Manage Device Channels

Errors and logs

No errors in console

Expected behavior

User should be able to navigate through a page and when a user enters into a dropdown menu, they should be able to access the contents of the dropdown menu immediately (focus on keyboard should go straight into the menu and should be navigable using the arrow keys).

User-facing consequences

See expected behavior. We want to fix this for accessibility.

Steps to reproduce

See screenshots

Context

Kolibri 0.15
Chrome
Mac OS

[marcellamaki]

Closed with learningequality/kolibri-design-system#185