Accessibility - Make mobile menu toggle a <button> element

[adamjohnson]

nopCommerce version: 4.3

Steps to reproduce the problem:

1. Visit the demo store.
2. Shrink your browser to a mobile/tablet size.
3. Try to use your keyboard to expand the "Categories" main navigation

Results

Keyboard users cannot access the "Categories" main navigation because it uses the following HTML:

<div class="menu-toggle">Categories</div>

Expected results

Keyboard users should be able to interact with the main navigation of a store.

Fix

Use a button element (which natively will recieve focus):

<button type="button" class="menu-toggle" aria-expanded="false" aria-controls="aria-categories-mobile-ul">Categories</button>

Note: some JavaScript will be required to change the aria-expanded value on click from false to true and vice versa. Also, you'll want to add an id to the unordered list this shows/hides and add that id as the aria-controls attribute value.

Here's some vanilla JS to control the aria-expanded state:

// "Categories" menu aria-expanded state:
var getMenuToggle = document.querySelector('.menu-toggle');
var expandedState = false;
getMenuToggle.addEventListener('click', function (event) {
  expandedState = !expandedState;
  getMenuToggle.setAttribute('aria-expanded', expandedState);
});

Related to #5022.

[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