[PLAN] Accessibility review for new Navigation bar

We have automated Nightwatch a11y tests in core:
https://www.drupal.org/project/drupal/issues/3293469

Added simple tests using it. For now 2 failures related to current 1.x Navigation:

   – Accessibility - Navigation Module - Claro page (3.125s)

   → ✖ NightwatchAssertError
   aXe rule: duplicate-id-aria - IDs used in ARIA and labels must be unique
        In element: aside

   – Accessibility - Navigation Module - HomePage with Umami (2.963s)

   → ✖ NightwatchAssertError
   aXe rule: duplicate-id-aria - IDs used in ARIA and labels must be unique
        In element: aside
   → ✖ NightwatchAssertError
   aXe rule: landmark-unique - Ensures landmarks are unique
        In element: #menu-builder

For tests:

1. Setup NightWatch as described:
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/tests/README....

2. Clone Navigation module to /modules dir.

3. Run: yarn test:nightwatch --tag navigation

Later we need to add tests for:

- Tab navigation
- Collapsed state Tooltips/Menus

etc.

Yep, This is only approach MR. I think it is cool to have nightwatch testing. Not even only for A11y

Is there any way to add searching within menu tree?

There's old core issue about it #102254: Add an administrative search feature

I'm adding my feedback from slack to hear opinions

I've created an issue (#3424484: Improve the color contrast for structural interface components) about the color contrast for structural interface components for Claro in general, but one of the examples (example C) covers the navigation module in particular. This kind of problem isn't covered by any WCAG success criterion at this point. Therefore I don't wanted to directly add the issue to the issue summary or link it as a child issue. Therefore I've decided to just leave a comment.

On the other hand I'll add #3423277: Icons are invisible in high contrast mode to the issue summary. I've already added it as a child issue a few days ago but forgot to comment in here and add it to the issue summary.

Created another issue in the context of keyboard interaction: #3426627: Enable keyboard users to expand and collapse submenus also when the navigation is collapsed

I would like to have some nightwatch-axe Core tests set up to test the new navigation. I think that the dynamic functionality that we're going to want to be able to deliver should come with some dynamic automated tests.

The Tugboat environment in the current issue description is no longer available as of 4:49 pm PDT (+7) April 8, 2024.

For the records, @charles-belov (Thanks to him for taking the time) tested the navigation module to validate if there are any concerns with animations in the context of vestibular disorder. His conclusion was: I'm not seeing any animation concerns in either mobile or desktop.

.

Added link to Google sheet with WCAG 2.2 success criteria for reporting issues.

I believe that the menu navigation as described in #3436130: Ensure keyboard navigation works with the drawer is not behaving as described. The issue is marked as fixed. Would you prefer that I open a new issue or reopen #3436130: Ensure keyboard navigation works with the drawer?

Specifically, I can only navigate through the menu using tab and enter keys; the arrow keys don't accomplish anything. I actually prefer that. However, concerningly, escape does not work to exit sub-menus and I have to tab out of them. (I'm not filing this here in the current issue - I just wanted it here so that when you respond I can simply follow the desired instructions and not have to hunt this down somewhere else.)

Please advise.

Thank you @ckrina. Before I file, I just noticed that #3436130: Ensure keyboard navigation works with the drawer was only committed 6 days ago. Has it been merged into the Tugboat test instance?

I went to the available updates list for the Tugboat test instance to try to determine this, but the Navigation module is not listed on that page. (Is this also a bug?)

If it hasn't been merged to the instance yet, that would certainly explain why I'm not seeing the changes there.

@Charles Belov

You are right. Seems this tugboat instance is outdated.

Adding #3443571: Mobile version of Navigation should have focus trap

Updating title.

Opened #3446357: Fix overflow visibility for wrapper content in navigation CSS. Buttons are not accessible inside of display: contents;

added #3498326: Focus outline has a too low color contrast and uses a different green than Claro

added #3504913: Navigation block titles have a too low color contrast

replaced the link to #3504913: Navigation block titles have a too low color contrast, since it got closed by #3506743: Increase the color contrast of the navigation block title

I've created #3531948: Top-level menu items in the footer region are too far away from their submenu items and added it to "other" for now - none of the other categories is a good fit for it. and i've also added #3452724: Navigation side bar and top bar should have appropriate aria labels

Added #3541688: Focus does not move to submenu when opened by enter or space key.

Added #3541728: Submenu opened with hover does not close by Escape key when another menu item has focus.

Added #3541741: [PP-1] Close only lowest-level submenu with Escape key.

Added #3541910: Elements in closed sidebar are focusable.

The Gin integration I think are going to effect this.

added #3542774: The “reduce motion” setting in the operating system should be respected to the animation section in the issue summary

added #3543541: [PP-1] on the mobile viewport with the navigation sidebar collapsed the menu items are still available in the aural interface to the screen readers section

Added #3551528: Mobile expanded sidebar modal overlay has invalid ARIA attribute: aria-expanded

Just moving some completed issues to the "Done" section of the IS. (Meanwhile, several open issues have been promoted to higher issue priority internally.)

Edited my above comment to mention that we also bumped the priority of the open issues based on our best understanding of our severity. I should have also promoted this meta itself at the time, so doing that now.

It's also always helpful to have accessibility maintainers or experts in the field give feedback on the relative severity of the individual issues, and of course we could use help fixing them in the best way possible as well. Most accessibility bugs are eligible for backport even in patch releases, because the disruption to sites is outweighed by the value of resolving the accessibility bug. Resolving the more serious accessibility issues is our top priority for Navigation going forward.

#3541910: Elements in closed sidebar are focusable just landed. This also fixed #3543541: [PP-1] on the mobile viewport with the navigation sidebar collapsed the menu items are still available in the aural interface which turned out to be a duplicate or at least the same fix.

In terms of inclusion in Standard, I don't think #3443571: Mobile version of Navigation should have focus trap and one or two similar issues should block - they are specifically around keyboard navigation on mobile. Keyboard navigation on desktop is obviously very common, hidden items leaking into the aural interface would interfere even with normal site usage on mobile for people with access to navigation. But actually using the navigation bar with keyboard on mobile should not be happening nearly as often. Obviously we should fix the bugs, just doesn't seem at the same level compared to other issues in the list.

#3438477: High contrast mode needs some more refinement is RTBC so hopefully that can land soon.

@catch

To me, the "mobile" version of the menu is a misnomer here. It's really about narrow viewports.

For example, I frequently work with side-by-side windows on my laptop, and in this case that gives me the "mobile" version of the sidebar. I wonder if someone might also experience it if they're using a tablet as a second monitor.

I'm not necessarily saying that should make it a blocker. Just wanted to mention it for consideration.

The "mobile" sidebar also kicks in on the laptop with a full-screen window zoomed up a few notches.

added an issue about duplicate IDs to the other section

revisiting #3439721: Make the link descriptions more descriptive, helpful, and clear. i'Ve noticed that #3441586: Navigation logo link does not communicate where it is taking the user that was mentioned there wasn't added to this meta yet.

I've updated the list of the remaining issues in the issue summary. Based on the discussion with @katannshaw, @mgifford, @mherchel, and myself the remaining issues got categorized into blockers for the navigation module going into the standard profile and none blockers. In today's call we only had time discussing the issues currently listed in this meta. We will have another call or discussion on slack about a few additional issues not list in here that at the very least have accessibility aspects.

added the two follow ups to the focus trap issue also to the list of blockers #3572628: Mobile sidebar should close by ESCAPE key and #3572169: Put the mobile sidebar close button into the TAB sequence.

another correction for the list #3439721: Make the link descriptions more descriptive, helpful, and clear. was added to both lists by accident. now everything should be correctly categorized

Saving to re-update statuses

by the way the (needs feedback from screenreader userss) note in the issue summary for the focus strap issue could be striked now i suppose with the feedback by at least james scholes on the a11y slack? not sure who else is a screenreader user from the people answering there, i only know from james.

Alright. I think we got all stable profile blockers set to RTBC or Needs Review.

Please review em!

Added #3573225: Some top-level menus obscure unrelated focused items in sidebar as a child, but not into the IS b/c it needs triage.

It's similar to #3443571: Mobile version of Navigation should have focus trap in that it's possible to tab into hidden items, and might be a blocker for the same reasons.

Added #3574319: Sidebar logo link sometimes lacks focus indicator, and a Needs Triage section to the IS for new issues.

Moved #3540337: Improve visibility of More actions menu button to here from #3421969: [PLAN] New Navigation and Top Bar to replace Toolbar Roadmap: Path to Stable.

Moved some items to Done and restructured the triage categories.

Noted in IS that #3541728: Submenu opened with hover does not close by Escape key when another menu item has focus is currently Major priority.

Moved #3541741: [PP-1] Close only lowest-level submenu with Escape key to Done

Added #3576830: Grandchild menu items lack focus indicator