Fix main bar avatar

[Stef-Rousset]

🎩 What? Why?

This PR modifies the dropdonw-menu to improve accessibility, by:

• adding a aria-modal="true" on dropdown-menu-account-mobile div
• adding sr-only spans that gives informations on unread notifications and conversations
• modifying the role="menu" added by a11y, which is inappropriate on div id="dropdown-menu-account" and div id="dropdown-menu-account-mobile", for role="dialog"

This PR is issued from the audit of Angers city (page 24, 25 , 26 and 28), and refers to criterias 2.5.3, 4.1.2, 1.3.3 and 1.4.1 from WCAG.

📌 Related Issues

• Related to https://github.com/orgs/OpenSourcePolitics/projects/26/views/1?pane=issue&itemId=112498333&issue=OpenSourcePolitics%7Cintern-tasks%7C27
• Related to https://github.com/orgs/OpenSourcePolitics/projects/26/views/1?pane=issue&itemId=112499004&issue=OpenSourcePolitics%7Cintern-tasks%7C28
• Related to https://github.com/orgs/OpenSourcePolitics/projects/26/views/1?pane=issue&itemId=112501048&issue=OpenSourcePolitics%7Cintern-tasks%7C30
• https://github.com/orgs/OpenSourcePolitics/projects/26/views/1?pane=issue&itemId=112500055&issue=OpenSourcePolitics%7Cintern-tasks%7C29

Testing

As a logged in user, open your dev tools and inspect the html

• check that the div id="dropdown-menu-account" and div id="dropdown-menu-account-mobile" have a role="dialog"
• in mobile view, click on the avatar to open the menu, and check that the div id="dropdown-menu-account-mobile" has an aria-modal="true" (cf screenshot one)
• close the modal and check that div id="dropdown-menu-account-mobile" has no aria-modal attribute
• as a user with unread conversations, check that the button id="trigger-dropdown-account" has a span child sr-only "Unread conversations" (cf screenshot two)
• as a user with unread notifications, check that the button id="trigger-dropdown-account" has a span child sr-only "Unread notifications"
• as a user with unread conversations or unread notifications, check that the dropdown menu has sr-only spans "Unread conversations" or "Unread notifications" (cf screenshot three)

📷 Screenshots (optional)

SCREENSHOT ONE

SCREENSHOT TWO

SCREENSHOT THREE

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. @carolromero & @xabier feel free to chime in.