Navigation Top Bar accessibility issues found by Nightwatch tests

Since this is not an easy bug to reproduce, created 2 branches:

• 3508199-navigation-top-bar-axe-test-only: It contains only the code necessary to make the error visible in Nightwatch tests
• 3508199-navigation-top-bar-axe: It should contain the code necessary to make the error visible in Nightwatch tests + the changes to fix it

Once tests in 3508199-navigation-top-bar-axe are green and approved, might be necessary to create a new branch that contains only the code necessary to fix the error. This branch will contain a diff between the 2 original ones, and that's the one that should be merged.

I know this is a bit tricky, but I have not been capable to figure out a better flow for this issue. If someone else have a better proposal, please feel free to show your concerns and ideas.

I added a role and text for the button. Nw tests passed.

But a11y needs to be checked here.

And in general, what is top_bar? What is its role? Header or navigation?

And in general, what is top_bar? What is its role? Header or navigation?

I would argue it's not navigation, there are informational bits within it as well. I want to suggest we mark it up as an <aside> with a title for screen readers. This follows what has been done with the sidebar.

Will push an update to show what I mean.

I've tested it using Apple VoiceOver, ARC Toolkit, and axe DevTools and everything looked good regarding the two reported issues:

1. aXe rule: button-name - Buttons must have discernible text - In element: .toolbar-button--icon--dots
2. aXe rule: region - All page content should be contained by landmarks - In element: .top-bar__context

I reviewed the code as well, and it all appeared to be set up properly from an accessibility perspective. The `` landmark is set up properly and didn't throw any errors with the automated checkers.

I did find one related issue when testing with the screen reader that needs to be resolved with this module or the main Navigation module itself.

• The "Edit" button is read aloud as "Ed Edit" to screen readers
• This is because there's an icon that's no needed for the button as it's purely decorative
• I recommend removing the altogether

Thank you!

The "Edit" button is read aloud as "Ed Edit" to screen readers

It should gone with this MR landed:
https://www.drupal.org/project/drupal/issues/3483209 📌 Navigation leverage icon core API Needs work

Thanks @katannshaw!

OK, so now that we've had some solid accessibility testing done here. I think we're ready to move forward. As @plopesc noted in #5, what we've done here is first expose the Nightwatch axe rule errors by turning the Navigation Top Bar always on in the 3508199-navigation-top-bar-axe-test-only branch. The Nightwatch axe rule errors are here, or:

TEST FAILURE (2m 53s):  
   - 2 assertions failed; 1433 passed
   ✖ 1) Tests/a11yTest
   – Accessibility - Navigation Module - Claro page (2.587s)
   → ✖ NightwatchAssertError
   aXe rule: button-name - Buttons must have discernible text
	In element: .toolbar-button--icon--dots
   → ✖ NightwatchAssertError
   aXe rule: region - All page content should be contained by landmarks
	In element: .top-bar__context

Note that there are other test failures in there as well. This issue is solely focused on the Nightwatch axe rules error.

We've then fixed the Nightwatch axe rule errors in the 3508199-navigation-top-bar-axe branch. We can see that the Nightwatch axe rule errors are fixed here!

The next step will be to take out the code that is exposing the navigation Top Bar here, b/c that is the work of 📌 Show the Navigation Top Bar in 11.1.x and 10.4.x Active . Again, we're only interested in fixing the accessibility issue with the Navigation Top Bar here. I will next push this commit, and the 3508199-navigation-top-bar-axe branch, will be ready to merge!

Ready to go!

@plopesc and/or @finnsky could you review the MR, and my last comment?🤞 RTBC.

Code looks good to me!

And it seems new bits fond are coming as part of other MRs.

Note for other reviewers: Instead of the 3 MRs approach suggested in #5 🐛 Navigation Top Bar accessibility issues found by Nightwatch tests Active , the lines of code that triggers the error are in MR 11257, which will be always green because the Top Bar is not going to be present since the line to force it have been reverted. Please check the previous pipeline to confirm that worked, or test it locally adding back those lines.
That MR is ready to be merged as it is.

nod_ → closed merge request !11257

Committed 0b439c0 and pushed to 11.x. Thanks!

Want to note that this patch should get backported to 10.5.x once 📌 Define the 3 areas the Top Bar will provide Active is backported.

Automatically closed - issue fixed for 2 weeks with no activity.