Stacks fix(a11y): Add bold font to selected nav items

Apr 04 '25 13:04 qheaden-stack

Deploy Preview for stacks ready!

Name	Link
Latest commit	d0fc4331628bb96892618608ab4ae8d4cd32cbb9
Latest deploy log	https://app.netlify.com/projects/stacks/deploys/682757e01a35a60007160649
Deploy Preview	https://deploy-preview-1894--stacks.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Apr 04 '25 13:04 netlify[bot]

@CGuindon I wanted to raise a design concern with you and see how/if we want to address it.

With the addition of the hidden bold text to maintain a consistent size for navigation items between selected states, the items are now all a bit wider:

Before (361px wide)

After (378px wide)

This has two potential issues:

This is not the intended design
This could possibly cause layout shifts from what we currently have (this could make the update in Core kinda a pain if we need to mitigate any new undesirable overflow/wrapping)

This issue could potentially be partially mitigated by reducing the gap between navigation items:

With gap reduced from 4px to 1px (366px wide)

The compromise is that hover state reveals that the navigation items are closer together. I'm happy to brainstorm other ideas or just leave it as-is if that seems right.

Apr 04 '25 22:04 dancormier

@dancormier I don't think we can reduce the spacing to 1px — I believe this might cause issues with the focus state (the blue ring adds 1-2 px on the outside sometimes?). I'm honestly not too worried about the navigation get a tiny bit wider. Navigations are already wrapping for responsive screen sizes — I'd be curious to first see if there are any pages where the nav perfectly fits right now and it becomes a big issue for a regular desktop size.