🎩 What? Why?

Currently users using keyboard commands or speech voice control cannot focus the diff mode selector dropdown. This PR fixes that.

There are also other accessibility issues with this element:

• The dropdown behavior is not consistent with the other dropdowns on the page (everything that looks like a dropdown should behave like a dropdown)
• The dropdown is missing a screen reader label
• The diff mode is not dynamically announced for the screen reader when it changes (thus, the aria-live attribute)

WCAG 2.2 / 2.1.1 Keyboard (Level A)
WCAG 2.2 / 4.1.2 Name, Role, Value (Level A)

https://www.w3.org/TR/WCAG22/#keyboard
https://www.w3.org/TR/WCAG22/#name-role-value
https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html

Testing

Ask a user using either keyboard controls or speech control to test the diff mode dropdown.

📋 Checklist

• ❓ CONSIDER adding a unit test if your PR resolves an issue.
• ✔️ DO check open PR's to avoid duplicates.
• ✔️ DO keep pull requests small so they can be easily reviewed.
• ✔️ DO build locally before pushing.
• ✔️ DO make sure tests pass.
• ✔️ DO make sure any new changes are documented in docs/.
• ✔️ DO add and modify seeds if necessary.
• ✔️ DO add CHANGELOG upgrade notes if required.
• ✔️ DO add to GraphQL API if there are new public fields.
• ✔️ DO add link to MetaDecidim if it's a new feature.
• ❌AVOID breaking the continuous integration build.
• ❌AVOID making significant changes to the overall architecture.

📷 Screenshots