Off canvas focus

[Steven]

When the mobile menu is activated on a device where a keyboard, VoiceOver, or Voice Assistant is being used to navigate the site, the overlay doesn’t appear to get the focus. When the menu opens, the focus remains on the underlying page instead of the menu. This makes the menu and close option inaccessible to keyboard/voice assisted users. Can the script that handles opening the off canvas menu be modified to set focus to the overlay? Running GP Premium 1.9.1 on WordPress 5.3.

[Tom]

Hi there,

Strange – it should be accessible. What happens if you temporarily remove the widgets from the panel?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Steven]

Hi Tom,

I disabled the element hook that was injecting the search into the off canvas menu. It still has the focus issue. To reproduce:

Configure a site to use the off canvas for mobile.
Narrow the browser to activate the mobile toggle button.
Select the mobile toggle button using a keyboard and the Enter key.
Try to navigate the primary nav in the off canvas menu with the tab key.
You’ll see it traversing the underlying page until it gets to the bottom of the page and then appears to eventually get to the off canvas menu items.

The desired behavior would be to have the focus set to the off canvas container and have it announced that the menu has been opened.

[Tom]

That behavior should be happening. For example, check out this site in our library: https://gpsites.co/spacious

I wonder what combination of options is breaking it. I’ll play around to see if I can reproduce it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Steven]

Try Customizing > Layout > Off Canvas Panel > Style = Overlay

[Tom]

Yea, there’s the bug. Thanks for reporting this – will get in fixed in 1.10 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Steven]

Thanks for the confirmation.

[Naomi]

👍👍👍😊 So glad to hear that!

[Tom]

This has been fixed in 1.10.0, which will be going into alpha testing shortly 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Naomi]

Very exciting! Thank you!

[Tom]

Just a heads up that 1.10.0 is available for testing if you’d like the confirm the fix: https://generatepress.com/gp-premium-1-10-0/

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Steven]

Not sure if this is fixed. I’ve updated to the Version 1.10.0-alpha.1: https://bhamprod.wpengine.com/

[Tom]

Strange, it was working but now it’s not.

I think I’ve figured it out now so it will be in beta.1. Would you like to wait until then to find out, or are you comfortable overwriting a file in the plugin to test now?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Steven]

Happy to manually override so we can give you feedback.

[Tom]

Awesome, thank you!

Replace the contents of the wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js file with this: https://pastebin.com/u2hLLfi4

Then you may need to clear your browser cache/do a hard refresh.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts