A11y: replace span subIndicator with button

[jenlampton]

In recent accessibility testing, we found that a screen reader user could not effectively operate the mobile navigation. The recommended solution was to replace the <span> subIndicator, with <button>, adjacent to the link.

OLD:

<a href="/planning" class="sm-link has-submenu"  id="sm-16563614018665178-17" aria-haspopup="true" aria-controls="sm-16563614018665178-18" aria-expanded="false">
  Planning
  <span class="sub-arrow"></span>
</a>

NEW:

<a href="/planning" class="sm-link has-submenu"  id="sm-16563614018665178-17" aria-haspopup="true" aria-controls="sm-16563614018665178-18" aria-expanded="false">
  Planning
</a>
<button class="sub-arrow"> +</button>

This would allow the user to use the link to navigate to the page, and the button to reveal the submenu, with no confusion as to which action would trigger which result.

I was thinking we could add two new options for subIndicatorsPos that would allow the item to be placed adjacent to the link instead of within. Something like prependAdjacent and appendAdjacent.

And perhaps we could add another setting for subIndicatorsTag that could be either span or button.

[matt-bernhardt]

This is something that I'm starting to look into as well, and wasn't sure if there was an existing option for this sort of markup, or how SmartMenus could be extended.

The article I'm attempting to emulate is the one on Fly-out Menus from the W3C, which includes this as an example menu item under "Approach 2: Use button as toggle"

<li class="has-submenu">
  <a href="#flyoutnavkbbtn" aria-expanded="false">Space Bears</a>
  <button aria-expanded="false"><span><span class="visuallyhidden">show submenu for “Space Bears”</span></span></button>
  <ul>
    <li><a href="#flyoutnavkbbtn">Space Bear 6</a></li>
    <li><a href="#flyoutnavkbbtn">Space Bear 6 Plus</a></li>
  </ul>
</li>

I do see this sort of markup in the new Configurator tool that you announced a short while ago - is the intent to start supporting this type of markup with version 2?

[vadikom]

Yep, this is supported in version 2. Each item could have a separate link and a sub toggler button. Here is a sample:

<li class="sm-nav-item">
  <a class="sm-nav-link sm-nav-link--split" href="#">Link</a><button class="sm-nav-link sm-nav-link--split sm-sub-toggler" aria-label="Toggle sub menu"></button>
    <ul class="sm-sub">
      ...
    </ul>
</li>

The script will automatically set any required accessibility related attributes (e.g. aria-controls, aria-expanded, etc.)

As an example, the version 2 docs` sidebar menu is build with such split links.

Please note the code is still in alpha and I already have some plans to possibly introduce quite notable changes (e.g. reorganizing the CSS to make it more modular, etc.) but if it works for you as it is, actually I believe it is quite stable.