[Accessibility] `SubdomainNavBar` misses controls when narrow about brand

[rezrah]

Hey @simurai 👋

Problem 1

When using no <SubdomainNavBar.Link>, but only a <SubdomainNavBar.SecondaryAction>, on narrow viewports the hamburger menu button (to access the <SubdomainNavBar.SecondaryAction>) is missing.

Thanks for flagging. Burger menu button currently only appears when links are present. We can update to include both primary and secondary actions.

Next steps:

• Update SubdomainNavBar burger menu visibility logic to include CTAs
• Design review for location of buttons, which would appear at the bottom of an otherwise empty menu

Problem 2

With a viewport of 320x256 the title (Home) link should still be visible.

This was an intentional design choice. We even encourage use of our nav bar without the header in some cases.. Wonder if we could use an aria-label or similar to convey this information instead 🤔 We can check in with a11y team on next steps to remediate this one. Thanks for flagging.

cc. @natalie-iv

[simurai]

Wonder if we could use an aria-label or similar to convey this information instead

How I understood https://github.com/github/accessibility-audits/issues/7085, using aria-label wouldn't resolve the issue, since it's not screen reader related.

they will not be able to know the disappeared contents present on the page due to which they will miss the information, which can block their further actions.

I think the issue is that if we show some information to desktop users, mobile users should have access to the same information. So if desktop users see the subdomain, then mobile should also have a way to see the subdomain. One might can try to argue that the subdomain is "non-essential" or "decorative", but not sure if that's acceptable in this case.

The only two options I can think of:

Option A

Remove the title/subdomain (GitHub Universe) altogether (for desktop + mobile). Pages will need another way to communicate that.

Wide viewport	Narrow viewport

Option B

Move the title/subdomain (GitHub Universe) into the hamburger menu as the first item. It won't initially be visible on mobile, but can still be accessed when opening the hamburger menu.

Wide viewport	Narrow viewport	Narrow viewport (menu open)

Personally I would go with option B since having the subdomain is quite nice. I pinged the accessibility team to verify if that's ok, or if there is another way to resolve this issue.

[simurai]

From https://github.com/github/accessibility-audits/issues/7085#issuecomment-1870652455

the audit issue isn't about conveying info to screen reader users, it's about ensuring people who magnify their screen (and people on mobile) don't have interactive controls vanish on them. As long as they can still get to the controls on the same page through standard navigation/interaction mechanisms, that fixes the problem.

So yes, option B would fix the issue by moving the title/subdomain (GitHub Universe) into the hamburger menu.