search

localgovdrupal / localgov_base

The base theme for LocalGov Drupal websites.
9 stars 15 forks source link

Focus order of items in menu in mobile view #590

Open msayoung opened 3 months ago

msayoung commented 3 months ago

Reported by @waako

On mobile the focus order of items in the header - within the expanded Menu section - does not match the visual order of the items.

Tabbing through the items we encounter them

  1. Main navigation items
  2. Search input, search button
  3. Services menu items

The visual order is

  1. Search
  2. Main menu items
  3. Services menu items

image

Further information: https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Note. I don't think this is a failure of the criteria as I'm not sure that the meaning and operability is compromised, so I'm making this best practice. Others may disagree.

markconroy commented 6 days ago

I can't find the exact issue (maybe it was on a Slack conversation), but I think this came up before. The order of items in our header template is what is followed on desktop, but on mobile it was decided to not have the search block between the menu and the services menu.

This issue has a PR that looks like the culprit - https://github.com/localgovdrupal/localgov_base/issues/121 but lacks conversation around it.

I'm not fully sure what we do to sort this. Though I would love us to have a dedicated "Off Canvas" region that we can place the mobile menu block items into like we have done for microsites, and then we can place whatever we want in there, in whatever order we want to.

Thanks to Big Blue Door for sponsoring my time to work on this.