-
Notifications
You must be signed in to change notification settings - Fork 256
Add breadcrumbs to all layouts #4710
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add breadcrumbs to all layouts #4710
Conversation
Remove theme from page titles, except for those on patterns, so that they don't duplicate the last item in the breadcrumbs.
✅ You can preview this change here:
To edit notification comments on pull requests, go to your Netlify project configuration. |
The fact that we needed to apply padding to both `app-breadcrumbs` and `app-content` was a sign that the padding was not applied to the right elements and should instead be applied to their parent. This means that whatever gets added inside `app-side-pane__content`, the right amount of space will surround it.
Make the spacing on single page layouts consistent with the spacing on the side page pages. This includes moving the `app-width-container` outside of `<main>` so that the horizontal spacing is more easily applied to both the breadcrumbs and `<main>`
bf52b3a
to
535e8ea
Compare
Regarding Consistent Navigation, because the breadcrumbs are always in the same relative order, that is fine and passes WCAG. If the breadcrumbs being visually in a different spot could be a problem, either specifically for accessibility or generally for usability, I don't know. I think it makes logical sense to be where it is. But I don't know if it could confuse users. |
Moves the vertical padding in the white area where the content is displayed to a `app-main-wrapper` class. This ensures the spacing is consistent between `layout-pane` and `layout-single-page` so the breadcrumbs end up at the same level on all pages. The padding is applied as its own class in a similar fashion that we have `govuk-main-wrapper` in GOV.UK Frontend, but is made to match the spacing designed for the `layout-pane`. It also fixes the bottom padding having disappeared after the content on the pages using `layout-single-page`.
Ports the code of #4368 for the rendering of the subnavigation of each item of the Service Nav in a `<template>` element which will then be used by JavaScript. Co-Authored-By: [email protected]
Instantiate one component per section of the navigation to easily group the toggle button and subnavigation it reveals Co-Authored-By: [email protected]
As the mobile navigation is only available when JavaScript is loaded, and gets shown/hidden through the `hidden` HTML attribute, styles do not need to be gated by a media query. As the links live withing the Service Navigation, we can reuse its `govuk-service-navigation__link` styles for the interactive elements (subnavigation toggle and links) Co-Authored-By: [email protected]
Include the fix that makes `<template>` tags correctly handled by `element-permitted-content`. https://gitlab.com/html-validate/html-validate/-/issues/305
This PR build on top of the commits from #4698 and implements breadcrumbs on all pages, not just the pages part of the main navigation.
Like in #4698, it:
getAncestorPages
, which is used to generate the breadcrumb navigation.In addition, it tweaks the spacing so that:
Thoughts
After discussion with the squad, we'd prefer that the breadcrumbs are consistently present on every page rather than there on some page and sometimes missing (proposed by #4698). They're consistently positioned before the
<main>
element in the following source order:The side-navigation (4) may be absent in some of the pages, but:
Visually, they'll be sometimes in the side pane, sometimes on the left of the page container, which is no different from the content. They're also consitently aligned and spaced with the page header. This makes us confident that we're not doing anything untowards regarding Consistent Navigation WCAG criterion. @selfthinker, it'd be great to get your confirmation on it, though 😊