"MENU" Button Not Displaying on Mobile

I didn't see anything specifically on this with USWDS issue queue. There's another ticket on here related to mobile review... perhaps we can get this all figured out for the 3.4.x release.

Looking at the example code for the Big Footer, as an example: https://designsystem.digital.gov/components/footer/

The

elements are in place alongside a

which gives the markup a structure that works with the Javascript code and avoids the error state.

It may be there are two actions to pursue:

1. This theme could implement the footer code to provide markup compatible with the Javascript in USWDS
2. The USWDS Javascript could provide better case handling to accomodate the failure mode without breaking the functionality

If I removed the strong element from the code in `web/themes/contrib/uswds_base/templates/navigation/menu--footer_menu.html.twig` --

Then it appears the Big Footer menu JS issue is resolved, and the footer collapses properly in mobile view. I think it may be just that simple.

From this:

<div class="mobile-lg:grid-col-6 desktop:grid-col">
  <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
    <strong>
      {{ link(item.title, item.url, link_attributes.addClass('usa-footer__primary-link'))}}
    </strong>
    <ul class="usa-list usa-list--unstyled">
      {% if item.below %}
        {{ menus.menu_links(item.below, 1, footer_style, link_attributes) }}
      {% endif %}
    </ul>
  </section>
</div>

To this ...:

<div class="mobile-lg:grid-col-6 desktop:grid-col">
  <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
      {{ link(item.title, item.url, link_attributes.addClass('usa-footer__primary-link'))}}
    <ul class="usa-list usa-list--unstyled">
      {% if item.below %}
        {{ menus.menu_links(item.below, 1, footer_style, link_attributes) }}
      {% endif %}
    </ul>
  </section>
</div>

Is it possible the strong element is unnecessary?

Not an exact match, this issue reports on a related problem: https://github.com/uswds/uswds/issues/4809

The poster reports the console log error related to currentElement.nextElementSibling.setAttribute("id", menuId);

The poster also describes the resulting lack of MENU button functionality and footer rendering problems that follow the error.

The poster also suggests a simple condition check to resolve it: if (currentElement.nextElementSibling) { currentElement.nextElementSibling.setAttribute("id", menuId);} -- which was my naive proposed fix as well.

The Javascript could be made more resilient on the USWDS side, for sure. We can also resolve the issue on the theme side if the twig template doesn't need the <strong> tag in web/themes/contrib/uswds_base/templates/navigation/menu--footer_menu.html.twig

If removing strong resolves an issue, then I say it's a good change. If someone wanted to keep the strong, they can do it through he sub theme.

Yes, we have already resolved the issue we are having by removing the <strong> tag from the footer menu template in the sub-theme. Curious still to know why the <strong> tag is there to begin with, since the USWDS source code does not prescribe it, and appears to have no visible or semantic benefit.

The issue appeared to be intermittent at first. I was only able to really isolate it on an actual mobile device using Chrome to debug over USB. Now able to reproduce it consistently with a fresh install of everything, emulating a mobile device in Chrome dev tools.

Just experienced this too on a fresh install.

Removed the strong tag and added text-bold which should still make the links bold, to avoid any backwards breaking.

Duplicated myself. Fix is good.