After the recent update (possibly 1.7.12), sub-menus in the header navigation no longer display on hover or keyboard navigation. This raises some accessibility concerns and UX concerns.
My primary UX concern is that it is not clear to users on a desktop computer that there is a sub-menu unless indicators are used (since the sub-menus no longer dropdown on hover).
My primary accessibility concern is that keyboard users can’t see the sub-menus as they tab through them.
I have added the following CSS to a theme and it fixes the concern but I have 10-20 existing sites that have the same issue/set of circumstances. Is this considered a bug or do I need to implement this fix into all of my child themes?
/*** Fix UX and Accessibility Concerns for Hover and Keyboard Navigation of the Header Nav Menu ***/
.menu-item-has-children:hover .sub-menu, li.menu-item-has-children a:focus .sub-menu, li.menu-item-has-children:focus-within .sub-menu {
left: auto;
}
The issues referenced above are only present on touchscreen laptops using keyboard and mouse input.
After conversations with support, it was confirmed that the issues are related to touchscreen fixes implemented in 1.7.12. These were needed to make the sub-menu accessible for touch-input users on large devices/using the desktop menu. These were needed fixes and limits the scope of the UX concern. However, I still have concerns that users may not realize there isn’t a sub-menu if it doesn’t appear on hover.
There were some flaws in my proposed solution. Although it did fix the concerns about desktop views, it also caused issues on mobile devices in certain situations. A similar solution (see snippet below) could potentially work if it included media queries (limit the changes to desktop views that are touch-enabled only). Implementing a change like that on Beaver Builders side would be a lot more difficult though as theme developers need to accommodate many different variables and preferences.
/*** Fix UX and Accessibility Concerns for Hover and Keyboard Navigation of the Header Nav on Large Touchscreen Devices ***/
.menu-item-has-children:hover .sub-menu, li.menu-item-has-children a:focus-visible .sub-menu, li.menu-item-has-children .sub-menu:focus-within {
left: auto;
}
With the additional background, I would suggest implementing a more limited snippet of CSS to fix the keyboard navigation/accessibility concern. The code snippet below has been tested on a couple of BB Theme sites:
I will update this thread if I receive any other updates that are important to the BB community or find a fix that could work on the majority of sites.
If you use the Beaver Builder mega-menu class, you will want to add both of the rules or just the second one.
/* Fix UX and Accessibility Concerns for Keyboard Navigation of the Header Nav on Large Touchscreen Devices */
li.menu-item-has-children .sub-menu:focus-within {
left: auto;
}
/* Added for Mega Menu Compatibility - Fix UX and Accessibility Concerns for Keyboard Navigation of the Header Nav on Large Touchscreen Devices */
li.menu-item-has-children.mega-menu .sub-menu:focus-within {
left: 0;
}