[Open Source Fridays] Accessibility enhancement for the top navbar while using screen readers

[andersonjeccel]

Q	A
Bug fix? (use the a.b branch)	[ ]
New feature/enhancement? (use the a.x branch)	[x]
Deprecations?	[ ]
BC breaks? (use the c.x branch)	[ ]
Automated tests included?	[ ]
Related user documentation PR URL	mautic/mautic-documentation#...
Related developer documentation PR URL	mautic/developer-documentation#...
Issue(s) addressed	Fixes #...

Description:

This PR enhances user experience for people with screen readers. Specifically:

1. Avoid Mautic logo being selected and read as “graphic”
2. Refined the code to ensure that list items (<li>) within the navigation bar do not interrupt the flow of the screen reader, allowing for seamless transition to subsequent links.
3. Adjusted icon elements to be bypassed by screen readers when they do not convey essential information, reducing unnecessary stops and enhancing user experience.
4. Enhanced the notification system with a non-visible label that screen readers can announce, alerting users to new notifications effectively.
5. Ensured that screen readers communicate the presence of position located beneath the user’s name, providing context and clarity.
6. Made certain that users are informed by the screen reader of the existence of a profile picture, personalizing their experience.
7. Clarified that the user’s name functions as an interactive link to their account menu, making navigation more intuitive.
8. Established a clear distinction between links that navigate to a different page and buttons that trigger actions on the current page, aiding in user expectation management.
9. Improved the dashboard widgets dropdown to be screen reader-friendly, ensuring that it is properly associated with its corresponding menu and actions when activated.
10. Removes maximum scale property from viewport to ensure accessibility tools can use zooming features without issues

Pending tasks:

• Solve the weird behaviour when screen readers try to read the hidden search input
• Add aria-label to page actions dropdown, which needs a dev to rewrite the function so we can put a translation string there

Steps to test this PR:

1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
2. Activate your screen reader (Windows + Ctrl + Enter on Windows 11)
3. Navigate to the homepage.
4. Use the screen reader’s navigation commands to reach the page elements.
5. Confirm that the screen reader skip the logo correctly and does not read it as a graphic.
6. Focus on the navigation bar.
7. Use the arrow keys to move through the items.
8. Confirm the screen reader does not stop prematurely and reads all relevant links without interruption.
9. Navigate where icons are present.
10. Observe if the screen reader skips non-essential icons.
11. Confirm that only informative icons are read out.
12. Trigger a new notification (e.g., by receiving a message or alert).
13. Navigate to the asterisk icon to listen for the screen reader to announce there is a new notification.
14. Locate the area beneath the user’s name where the position is displayed.
15. Confirm that the screen reader announces the position as part of the user details.
16. Find the profile picture element.
17. Check that the screen reader informs about the presence of a profile picture.
18. Select the user’s link.
19. Confirm that the screen reader indicates that it has pop up and leads to the account menu.
20. Interact with all the previous elements by navigating to them.
21. Note the different responses from the screen reader for each type of element.
22. Navigate to the dashboard widgets dropdown.
23. Activate the dropdown.
24. Confirm the screen reader reads the associated menu and its options when clicked.

[andersonjeccel]

I need help to rewrite this:

    {{ buttonsRender(
        (
            '<button type="button" class="btn btn-default btn-nospin dropdown-toggle" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" id="dropdownMenuButton"><i class="ri-arrow-down-s-line"></i></button>\n'
            ~ '<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenuButton">'
        )
        , '</ul>'
    )|raw }}
</div>

So I can use aria-label="{{ 'mautic.core.dropdown.accessibility_label'|trans }}"

[obamwonyi]

[obamwonyi]

Every thing works as you have described in the PR, but there are some few things I believe are not meant to behave the way they do, like I have demonstrated in the image above.
The left side panel will read the links only when you navigate through them as links, but when you navigate through them as characters it will read the symbolic ID of each Icon that proceeds the text.

In the case of the clog Icon to open the right-side panel my screen reader does not pronounce the Icon properly, its like its trying to pronounce two words at the same time then it ends up not making any sense .

I logged in as an admin when I navigate to the admin in the header it does not give any info on the profile, you can look at the image for the info my screen reader gives.

[obamwonyi]

And concerning the code above what if you implement it as shown below

{{ buttonsRender(
    (
        '<button type="button" class="btn btn-default btn-nospin dropdown-toggle" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" id="dropdownMenuButton" aria-label="{{ 'mautic.core.dropdown.accessibility_label'|trans }}"><i class="ri-arrow-down-s-line"></i></button>\n'
        ~ '<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenuButton">'
    ),
    '</ul>'
)|raw }} 

[andersonjeccel]

Thank you for taking the time to review it!
The search icon is presenting some complexities, but I'm optimistic that we can find a solution. We might require the expertise of a JS developer to create a code that can dynamically change the HTML input state. Although it's currently beyond my knowledge, I'm eager to dive deeper into it and explore potential solutions.

While my pull request primarily addresses the top navbar, I'm aware that the sidebars still pose a challenge. However, I'm confident that I'll be able to address this issue soon!

Regarding the code, I did attempt to implement your suggestion but the function includes a raw property that disregards certain functions like the translation string... so yeah, probably needs to rewrite the entire function