Accessibility - Show dropdown menus on focus

[adamjohnson]

nopCommerce version: 4.3

Steps to reproduce the problem:

1. Load the demo store in your browser.
2. Hit the tab key and tab through the main navigation ("Computers, Electronics, Apparel") * Note: without a focus indicator, you will have to use your browsers URL preview to see where you are currently focused (see #5022).

Result

Users are able to tab through the dropdown (the browser won't stop you), but the dropdown does not expand when tabbing through it.

Expected results

When tabbing through a drop down navigation, the dropdown navigation should remain open and be visible while tabbing.

This article on CSS Tricks does a great job outlining this issue in more detail.

Fix

@media (min-width: 1001px) {
  /* Fix dropdown menus for keyboard users: */
  .header-menu ul li:focus-within > .sublist {
    display: block;
  }
}

Note: See focus-within browser support. A polyfill is available if needed.

WCAG Guideline

https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_overview#focus-visible

[AndreiMaz]

Regarding all accessibility tasks. We have the "accessiBe" plugin available out of the box. It's the #1 Fully Automated Web Accessibility Solution for ADA & WCAG Compliance