Describe the bug

The on-page dropdown elements are not keyboard navigatable as they used to be in previous versions. See the screencast for details which shows the keys being pressed.

To Reproduce

1. Go to the front page
2. Navigate to the bottom of the page to see the language selector
3. Using keyboard navigation, place focus to the language dropdown selector
4. Open the selector either with ENTER or SPACE key
5. Try to navigate the options within the dropdown using the arrow keys

Expected behavior

The dropdown elements should be navigatable using arrow keys as the user would expect.

Also, when the dropdown is opened, the focus should be automatically placed to the first item of the dropdown.

See the legacy design for correct behavior of similar dropdown elements. E.g. the language dropdown at the top of the page (in legacy design).

The following is missing:

• When the dropdown is opened, the focus should be placed into the first element of the dropdown
• The user should be able to navigate through the dropdown options using arrow keys (UP and DOWN)
• The user should be able to close the dropdown using the ESC key
• Preferrably the TAB key should take the user to the next element in the DOM from the dropdown, not within its items
  • Note that this also does not work perfectly in the legacy design, see the W3 example implementation in the additional context section
  • When the dropdown loses focus, the dropdown should be closed automatically (e.g. when navigating to some other element or clicking with mouse outside of the dropdown)
• The dropdown should contain the relevant ARIA attributes, see the W3 example implementation in the additional context section

Screenshots

Here is a screenshot showing the behavior in legacy design and redesign using arrow key navigation (keystrokes are visible on the screen):

Stacktrace

No response

Extra data

• Device: (any keyboard enabled device)
• Device OS: (any)
• Browser: (any)
• Decidim Version: 0.28.0.dev
• Decidim installation: Redesign staging

Additional context

See W3 example implementation:
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/