search

CodeStitchOfficial / Intermediate-Website-Kit-SASS

The official CodeStitch Intermediate kit, featuring 11ty, Decap CMS and SASS - all set up for you! Perfect for websites of all sizes.
Creative Commons Zero v1.0 Universal
767 stars 208 forks source link

Mobile header has focus and tabbing issues #14

Closed BuckyBuck135 closed 5 months ago

BuckyBuck135 commented 5 months ago

Description of the issue:

Dark mode toggle doesn't catch focus on mobile, or at least, not when it should. Tabbing from the start of the header catches:

  1. the logo: ok
  2. skips the dark mode toggle and goes onto the hamburger menu button: bug
  3. the menu items (while menu is closed): bug
  4. after cycling through all the menu items, the dark mode toggle

Expected behavior:

Tabbing should focus the elements in order and skip over the menu items if it closed.

Reproducible example

The live site

Participation

I'm willing top open a PR.

ItsEthanH commented 5 months ago

This seems to be because of the funny order we've put the navigation items on desktop.

We've set the dark mode toggle's position to absolute, and moved it (visually) before the hamburger menu, when semantically, it's after the menu.

Just a simple case of setting some tabindex's to the navigation items and to the skip link (so that can remain the first item in the tabbing order).

Fixed in PR #13

BuckyBuck135 commented 5 months ago

Hi Ethan,

Just a simple case of setting some tabindex's to the navigation items and to the skip link (so that can remain the first item in the tabbing order).

I've just tested that, and I realized that while it works on mobile (tabbing focuses logo > dark mode > hamburger), the tab order is breaking desktop tabbing. It goes logo > dark mode > nav item 1 > nav item 2 etc See this gif codestitch nav tab

I haven't found a solution yet. I'll try something with order, but I think the markup won't make it easy. Knowing that keyboard navigation is more likely on desktop than on mobile, it's probably best to remove these new tabindex until a solution is found, even if that means that mobile tabbing order is not ideal.