Confusing visual focus order in Umami at wide breakpoint

Problem/Motivation

The tabbing focus order is very confusing at the wide breakpoint in the Umami demo. It's a problem for SC 2.4.3 Focus Order at level A, affecting multiple groups of users with disabilities.

Relevant parts of WCAG

• Success Criteria
  • 1.3.2 Meaningful Sequence (level A)
  • 2.4.3 Focus Order (level A). This is the more relevant one IMO. In particular the guidance says:
    

    Care should be taken so that the focus order makes sense to both of these sets of users and does not appear to either of them to jump around randomly.

• Techniques
  • C27: Making the DOM order match the visual order
  • G59: Placing the interactive elements in an order that follows sequences and relationships within the content
• Common Failures
  • F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

Survey of source, visual, tabbing order at wide and narrow breakpoints

visual order at wide viewport
--
search box
user account menu
site branding
main menu
banner block (super easy pasta bake)

tabbing order at wide viewport (tested at 960px wide)
--
skip-to-main-content link
(toolbar if lgged in)
main menu links
Branding
search box
User menu
Banner block (super easy pasta bake, pink link)

visual order at narrow viewport
--
main menu
branding
search
banner block (super easy pasta bake)

tabbing order narrow viewport (tested at 750px wide)
--
skip-to-main-content link
main-menu button
main menu links (should only be in tab order when menu is open, to be fixed in separate issue)
branding
search link (aside: search form is hidden by display: none at narrow breakpoint, the simple link replaces it. OK for a11y)

Note: user account menu is hidden with display: none at narrow breakpoint, cannot login! Bad for a11y

Source order:
---
Main nav
Site branding block
Search form (hidden on narrow viewport with display:none replaced by simple link)
Search link (simple link to /search, hidden on wide viewports)
user account menu
highlighted region (messages, help)
tabs region
banner top region

Proposed resolution

Make the focus order match the visual order.
If we can't get it perfect, aim for a situation which minimizes the level of jumping around spatially, and prefer short jumps to long ones.
Avoid any hocus-pocus tabindex approaches! These are tricky to maintain in any case, and will break when site-builders evaluating Drupal start moving blocks around.
Avoid trying to arrange a focus order based on what the site author imagines a user's priority to be.

Remaining tasks

Unknown, TDB.
This might be tricky to fix, because the different breakpoints are reordering blocks with CSS.

TODO: summarize the discussion from the original github issue, which rambled a bit.

User interface changes

Accessibility improvements to focus order.

API changes

None expected.

Data model changes

None expected.

Original report by @DuaelFr

This issue was originally filed by @DuaelFr at the Umami github repo - https://github.com/lauriii/umami/issues/140