💄 style: improve navigation bar & metadata wrapping

[welpo]

Summary

Improves wrapping of navigation bar icons —grouping them together for wrapping— and post metadata (see screenshots).

Changes

• Group wrapped navigation icons
• Make metadata 'separator' unselectable
• Better wrapping of article metadata:
  • Tags never get split
  • Separator uses a class instead of non-breaking spaces
  • Elements are joined with their separator
  • Elements starting in a new line (due to wrapping), do not get space before the separator

Accessibility

Improved: adds aria-hidden="true" to the separator. This prevents screen readers from announcing decorative content that could be distracting or redundant.

The list structure (<li> elements) already provides sufficient context for understanding that these are related but separate pieces of information. Before, the screen reader would announce something like "January 1, 2024 bullet 5 min read". With aria-hidden="true", the screen reader would simply announce: "January 1, 2024 5 min read"

Tabbing works as before.

Screenshots

Before

Note:

• lone theme switcher icon

After

Before

Note:

• "5 min read" odd wrapping
• "FAQ" tag wrapped mid-word

After

Note how the Tags separator starts where one would expect. Before, with the forced non-breaking spaces, it would include space before the separator.

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this change
• I have updated theme.toml with a sane default for the feature
• I have made corresponding changes to the documentation:
  • Updated config.toml comments
  • Updated theme.toml comments
  • Updated "Mastering tabi" post in English
  • (Optional) Updated "Mastering tabi" post in Spanish
  • (Optional) Updated "Mastering tabi" post in Catalan

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	79a4b5a
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/6732433aea85e70008dbdf8a
😎 Deploy Preview	https://deploy-preview-425--tabi-demo.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 site configuration.