Guide accordion mobile menu

[nick-mon1]

Summary

Replaces horizontal guide menu to be vertical on mobile. Implements the mobile menu with usa-accordion to improve accessibility and mobile UX.

Link to Preview

Screenshots

Before

After

Solution

Creates a new guide-menu-links.html partial that generates the anchor tag links for both desktop and mobile menus. Creates two guide "sibling" components:

1. .dg-guide__menu-bar for desktop
2. .guide-mobile-menu for mobile

guide-mobile-menu.js will toggle between these menus.

Markup Changes

old markup

<div class="dg-guide__menu-bar">
  <div class="dg-guide__menu-bar-image-container" hidden>
    <a href="{{- .Site.BaseURL -}}" title="{{- .Site.Title }} Home">
      <picture class="dg-guide__menu-bar-image">
        <source srcset="img/digitalgov-logo.svg" />
        <img src="img/digit-100.svg" />
      </picture>
    </a>
    {{- if $glossary -}}
      <button title="Show glossary" class="dg-glossary__toggle">
        <svg class="dg-glossary__toggle-icon">
          <path
            d="M13.9583 2.99612C13.9583 2.25376 13.5274 1.631 12.9074 1.25803C12.2875 0.885127 11.4706 0.755653 10.6759 0.999207L7.41667 1.99802L4.15746 0.999208C3.36272 0.755654 2.54584 0.885127 1.92596 1.25803C1.30597 1.631 0.875 2.25376 0.875 2.99612V11.6299C0.875 12.5372 1.54014 13.3298 2.50921 13.6268L7.41667 15.1307L12.3241 13.6268C13.2932 13.3298 13.9583 12.5372 13.9583 11.6299V2.99612ZM11.1429 2.17693C11.4882 2.07112 11.8416 2.12807 12.107 2.28774C12.3723 2.44735 12.5417 2.7033 12.5417 2.99612V11.6299C12.5417 11.9855 12.2789 12.3198 11.8571 12.4491L8.125 13.5928V3.10179L11.1429 2.17693ZM2.29167 2.99612C2.29167 2.7033 2.46099 2.44735 2.7263 2.28774C2.99172 2.12808 3.34516 2.07112 3.69046 2.17694L6.70833 3.10179V13.5928L2.97621 12.4491C2.55441 12.3198 2.29167 11.9855 2.29167 11.6299V2.99612Z"
          />
        </svg>
      </button>
    {{- end -}}
  </div>
  <nav class="dg-guide__menu-bar-links" aria-label="Secondary menu bar">
    {{- if $guideData.nav -}}
      {{- range $guideData.nav -}}
        {{- $item := . -}}
        {{- $page := $.Site.GetPage $item.path -}}
        {{- $current := false -}}
        {{- if eq $currentPage $page.RelPermalink -}}
          {{- $current = true -}}
        {{- end -}}
        {{- if $item.subnav -}}
          {{- range $item.subnav -}}
            {{- $subItem := . -}}
            {{- $subPage := $.Site.GetPage $subItem.path -}}
            {{- if eq $currentPage $subPage.RelPermalink -}}
              {{- $current = true -}}
            {{- end -}}
          {{- end -}}
        {{- end -}}
        <a class="dg-guide__menu-bar-link" >{{- $item.title -}}</a>
      {{- end -}}
    {{- end -}}
  </nav>
</div>

new markup

<div class="dg-guide__menu-bar">
  <div class="dg-guide__menu-bar-image-container" hidden>
    <a href="{{- .Site.BaseURL -}}" title="{{- .Site.Title }} Home">
      <picture class="dg-guide__menu-bar-image">
        <source
          srcset="{{- "img/digitalgov-logo.svg" | relURL -}}"
          media="(min-width: 480px)"
        />
        <img
          src="{{- "img/digit-100.svg" | relURL -}}"
          alt="Digital Gov Logo"
        />
      </picture>
    </a>
    {{- if $glossary -}}
      <button title="Show glossary" class="dg-glossary__toggle">
        <svg class="dg-glossary__toggle-icon">
          <path
            d="M13.9583 2.99612C13.9583 2.25376 13.5274 1.631 12.9074 1.25803C12.2875 0.885127 11.4706 0.755653 10.6759 0.999207L7.41667 1.99802L4.15746 0.999208C3.36272 0.755654 2.54584 0.885127 1.92596 1.25803C1.30597 1.631 0.875 2.25376 0.875 2.99612V11.6299C0.875 12.5372 1.54014 13.3298 2.50921 13.6268L7.41667 15.1307L12.3241 13.6268C13.2932 13.3298 13.9583 12.5372 13.9583 11.6299V2.99612ZM11.1429 2.17693C11.4882 2.07112 11.8416 2.12807 12.107 2.28774C12.3723 2.44735 12.5417 2.7033 12.5417 2.99612V11.6299C12.5417 11.9855 12.2789 12.3198 11.8571 12.4491L8.125 13.5928V3.10179L11.1429 2.17693ZM2.29167 2.99612C2.29167 2.7033 2.46099 2.44735 2.7263 2.28774C2.99172 2.12808 3.34516 2.07112 3.69046 2.17694L6.70833 3.10179V13.5928L2.97621 12.4491C2.55441 12.3198 2.29167 11.9855 2.29167 11.6299V2.99612Z"
          />
        </svg>
      </button>
    {{- end -}}
  </div>
  <nav class="dg-guide__menu-bar-links" aria-label="Secondary menu bar">
    {{ partial "core/guides/guide-menu-links.html" (dict "guideData" $guideData "currentPage" $currentPage "pageScope" .) }}
  </nav>
</div>

How to Test

• [ ] resize browser below 480px to trigger mobile guide menu (vertical navigation)
• [ ] resize browser over 480px to trigger desktop guide menu (horizontal navigation)
• [ ] test on mobile phone browser via browserstack
  • [ ] chrome
  • [ ] safari
  • [ ] firefox

What to Test

• [ ] sections + button will display current guide sections as list items, current guide section is highlighted in blue
• [ ] glossary icon will hide/show glossary on HCD guides
• [ ] digital.gov icon will link back to homepage

guides
accessibility-for-teams
dap
hcd
mobile-principles
public-participation
rpa
site-scanning
web-analytics-playbook

---

Dev Checklist

• [x] PR has correct labels
• [x] A11y testing (voice over testing, meets WCAG, run axe tools)
• [x] Tested against USWDS accordion testing guidelines
• [x] Code is formatted properly

[github-actions[bot]]

:mag: Preview in Federalist

[clmedders]

Looks good overall... most of what i was going to point out james has already said.. i do have some design questions/thoughts

for mobile, it might be good to have the menu take up the full screen and not allow the user to scroll as you can see when its open you can still scroll it and see some of the content

Also on mobile... the links are working however they are just taking the user to the top of the page.. i wonder if we should link to the start of the content like target the id="content-start" so that way the user it right at the section they have selected.

On tablet its hard to know that there is more to the menu like no indication that if i scroll then i will have more options. Just something i noticed.. in the img below there is no way of knowing there is one more option in the bar

[nick-mon1]

New changes include:

• Used the hugo inline partial to be shared for both desktop and mobile menus
• Added documentation to updated guide partials
• Removed un-necessary javascript
• Flattened CSS code
• Switched the button to be on right side, will be easier for most users to press with thumb
• Tested usa-accordion against USWDS accordion guidelines

@clmedders I like your idea of making the menu full height but reading about this UX pattern I'm unsure if we need it. @bonnieAcameron Do you have thoughts?

Full height/width menus are useful when we have lots of links.

[nick-mon1]

@mejiaj

Resolved comments above and addressed:

• added a class for the menu bar link: <a class="dg-guide__menu-bar-link {{ cond $current "dg-current" "" }}">

• wrapped the guide-mobile-menu.js in an IIFE and added conditional for checking if on a guide page

• removed the :hover styles for adding a border-bottom and also centered the text within the outline box on click.

• Fixed an icon flex layout bug when not on a guide page with a glossary

[nick-mon1]

@mejiaj Modified the javascript to be more consistent. Prefer hidden to hidden="true".

Before

After