feat(docs): update navigation components for improved accessibility and structure#3517
feat(docs): update navigation components for improved accessibility and structure#3517
Conversation
github-project-automation
bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Updates docs navigation and homepage layout to improve small-viewport behavior and accessibility, addressing mobile display issues from #3507.
Changes:
- Add a new
outgoingSVG symbol to the docs sprite(s) and use it for the mobile docs “Browse docs” toggle. - Adjust mobile “On this page” toggle styling by removing the custom
.bd-toc-toggleclass/styles. - Update homepage masthead CTA container to wrap/stack more appropriately on smaller screens.
Reviewed changes
Copilot reviewed 4 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg | Adds outgoing symbol for the new docs navigation icon. |
| site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg | Adds outgoing symbol for the new docs navigation icon. |
| site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg | Adds outgoing symbol for the new docs navigation icon. |
| site/src/scss/_toc.scss | Removes now-unused .bd-toc-toggle styling. |
| site/src/layouts/DocsLayout.astro | Removes .bd-toc-toggle class from the TOC collapse button. |
| site/src/components/home/MastHead.astro | Updates CTA layout to stack/wrap better on small viewports. |
| site/src/components/header/SubNav.astro | Reworks the mobile docs navigation toggle (icon + improved label structure). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const slug = Astro.url.pathname.split('/')[4] | ||
|
|
||
| const sidebarMap = { | ||
| 'getting-started': 'Getting started', | ||
| foundation: 'Foundation', | ||
| components: 'Components', | ||
| utilities: 'Utilities', | ||
| layout: 'Layout' | ||
| } |
There was a problem hiding this comment.
sidebarMap[slug] only covers a subset of top-level docs sections, so on pages like /about/* or other slugs not listed, the UI will render Browse docs: with an empty section label (and the visually-hidden label will also be empty). Consider adding the missing sections (e.g. about) and/or providing a fallback label + conditional rendering of the colon only when a section title is available.
| <use xlink:href={`${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#outgoing')}`}></use> | ||
| </svg> | ||
| <span class="d-none d-sm-inline">Browse docs: {sidebarMap[slug]}</span> | ||
| <span class="d-sm-none">Browse docs</span><span class="visually-hidden">{sidebarMap[slug]}</span> |
There was a problem hiding this comment.
On the mobile label, Browse docs and the visually-hidden section name are rendered in adjacent spans with no separating whitespace, which can be announced as a single word by screen readers. Add a separator (space/punctuation) in the accessible name, or restructure to render a single combined label with parts visually hidden per breakpoint.
| <span class="d-sm-none">Browse docs</span><span class="visually-hidden">{sidebarMap[slug]}</span> | |
| <span class="d-sm-none">Browse docs</span><span class="visually-hidden">: {sidebarMap[slug]}</span> |
| <use xlink:href={`${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#outgoing')}`}></use> | ||
| </svg> | ||
| <span class="d-none d-sm-inline">Browse docs: {sidebarMap[slug]}</span> | ||
| <span class="d-sm-none">Browse docs</span><span class="visually-hidden">{sidebarMap[slug]}</span> |
There was a problem hiding this comment.
Maybe Browse [slug] would be better here ?
| d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z" | ||
| ></path> | ||
| </svg> | ||
| <div class="container-fluid container-max-width d-flex justify-content-start"> |
There was a problem hiding this comment.
To discuss, but I'd have kept the button on the right I think
| <div class="container-fluid container-max-width d-flex justify-content-start"> | |
| <div class="container-fluid container-max-width d-flex justify-content-end"> |
Related issues
Closes #3507
Description
Checklists
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews