Interestingly, the menu at bricksbuilder.io does work.
Is the menu you’re using on the main site different?
Is there a way to basic menu to work?
I’m not sure if this is relevant but I did a little searching and found this:
Where they say: screen readers suppress some native javascript events. stackoverflow.com/questions/65181014/… In my case onKeyPress doesn’t get fired at all when screen readers are enabled.
@nineplanets, the Bricks website is using the Nav (Nestable). For the Nav (Nestable), you need to set the dropdown to open on Hover or Click, otherwise it would not work with NVDA.
Unfortunately, there’s no option for that with the standard menu. I’m also not a fan of the output which uses separate <nav> for desktop and mobile.
We’re switching to the Nav (Nestable) element, but running into another accessibility issue. When you’re using keyboard navigation and open the mobile menu, it doesn’t seem to include a focus trap or auto-close when out of focus, so after you tab through the menu options, you just keep tabbing to other elements on the page that are covered up by the mobile menu that stays open. Do you happen to know a way to either focus trap the tabbing until they close the menu, or just auto-close it when you lose focus on the menu?
I’m just about to start researching how to improve the accessibility of the Nestable Nav. Currently, the mobile trigger button is added as the last focusable element instead of the first. It also adds the close button as an <li>, among other issues.
What I believe is that you’d need to create a separate <div role="dialog" aria-label="..."> which would contain the close button and a separate <ul> for the mobile menu. That’s the best way to trap focus.
If I’m not mistaken, the Bricks team is currently in talks with Amber Hinds about improving the overall accessibility of their elements.
Hi @nineplanets,
Thanks so much for your report(s)!
One of my colleagues can reproduce issue #1 regarding NVDA and the regular nav menu dropdowns on Windows (unfortunately, NVDA is only available on Windows - it works with Apple Voiceover, though), so we’ve added it to the bug tracker.
We also created an improvement task regarding issue #2, the nav-nestable mobile menu and keyboard navigation.
VoiceOver controls are different, it doesn’t automatically enter browse mode.
To experience the problem on VoiceOver, activate the Lock VoiceOver keys using (Ctrl + Option + semicolon). That’ll give you a similar experience to the NVDA browse mode.
After reviewing the issue, it seems this isn’t a bug with Bricks but rather how Windows Narrator and NVDA handle key inputs. By default, Windows Narrator assigns the “Narrator key” to “Caps Lock or Insert” which can interfere with the “Enter” key. It also replaces the normal “Enter” key functionality with “Control + Space”.
To resolve this, you can either use “Control + Space” to toggle the submenu or adjust the Narrator settings to set the “Narrator key” to “Caps Lock” only. This should restore the expected functionality of the “Enter” key.
