⌨ Accessibility Issue

The purpose of the new role dropdown menu lacks context for screen readers.

🦋 Expected Behaviour

The purpose of the menu is clear.

🕵️ Details

The new role dropdown menu uses the current role as the name which can be confusing. When using a screen reader, all you hear is something like "Button applicant collapsed, 3 items". For someone using the site who is not already aware of this, they may not understand what the dropdown does.

📋 Steps to Reproduce

1. Login with someone who has multiple roles [email protected]
2. Start any screen reader
3. Tab focus until you land on the role dropdown
4. Observe what is read out

🙋‍♀️ Proposed Solution

~~We may want to add an aria-label and possibly an aria-description to notify users what the dropdown does 🤔 ~~

We took a look and unfortunately, aria-description is not fully supported yet. The interim solution would to add a label to the input like "Current role" and associate it with the button with an aria-describedby but that will require visual changes so we will need an updated design.

Localized Copy

English: Select a different role to access its corresponding tools and information.
French: Sélectionnez un rôle différent pour accéder aux outils et informations correspondants.

✅ Acceptance Criteria

• Add "Current role" label (not a label element thought 😅 ) before the button (requires design change)
• Associated the current role specified text to the role menu as aria-describedby