Skip to content
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

Global Footer: Switch multiple nav blocks to lists inside a nav wrapper. #455

Merged
merged 3 commits into from
Oct 2, 2023

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Sep 25, 2023

Fixes #402 — This switches to the global footer block to use a nav group block around 5 lists, instead of 5 separate nav blocks. Additionally, the label "Footer" has been added to the nav, so it now appears as "Footer navigation" when browsing by landmark.

This also had to change the way menu items were localized, removing the filter on nav-link blocks in favor of directly calling the function on appropriate links.

Props @joedolson for the report

Screenshots

Production Branch
Home, wide screen
Home, small screen
Rosetta, wide screen
Rosetta, small screen
Classic theme, wide screen
Classic theme, small screen

To test

  1. If you can, apply this to a sandbox and test on various sites— new & old themes, rosetta, etc.
  2. Otherwise, use with one of the redesign sites (main, showcase, etc) to test locally
  3. The footer is now one single nav element, individual items are lists
  4. There should be no visual changes in the footer

Optionally test with a screen reader to see the single Footer navigation landmark.

@ryelle ryelle added Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer labels Sep 25, 2023
@ryelle ryelle self-assigned this Sep 25, 2023
Copy link
Contributor

@StevenDufresne StevenDufresne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Noting that there's a non-consequential padding-right.

.wp-block-group.global-footer>*, .wp-block-group.global-header {
    padding-right: var(--wp--custom--alignment--scroll-bar-width);
}
Screenshot 2023-09-27 at 2 31 10 PM

This is not necessary on the footer items, because they are not full-width (the edge-spacing on the footer handles this).
@ryelle
Copy link
Contributor Author

ryelle commented Oct 2, 2023

Good catch, that doesn't seem to be necessary since the footer items are wrapped in a group with side-padding. I've removed it in 3d3b06a.

@ryelle ryelle merged commit d85ac10 into trunk Oct 2, 2023
2 checks passed
@ryelle ryelle deleted the update/footer-menu-navs branch October 2, 2023 20:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Global footer navigation should not use five separate nav landmarks
2 participants