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 header, Local navigation: Add aria label to the main, search, and local nav blocks #634

Merged
merged 2 commits into from
Jul 2, 2024

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Jul 1, 2024

Fixes #622 — This PR adds aria-labels to the 3 header nav elements. There are two in the global header, the main navigation element and the search toggle; and one in the local navigation bar just below the global header. This PR adds aria labels to each, so they are now "Main", "Search", and "Section", respectively.

<nav class="is-responsive global-header__navigation …" aria-label="Main" data-wp-interactive…
<nav class="is-responsive  is-vertical global-header__search …" aria-label="Search" data-wp-interactive…
<nav class="has-small-font-size is-responsive …" aria-label="Section" data-wp-interactive…

Note: There is a separate issue to merge the search toggle into the main navigation landmark #311, but that would require more refactoring of the header. For now, I've just added the aria label to clarify that nav too.

To test

  • View a page with the global header (should be any page)
  • The first two navigation elements have aria-labels
  • View a page with a local navigation bar (About, a download subpage, one of the directories)
  • The local navigation menu should also have an aria-label.

CC @bbertucc, @alexstine

@ryelle ryelle added Accessibility Issues related to keyboard navigation, screen readers, etc [Block] Header & Footer [Block] Local Navigation Bar labels Jul 1, 2024
@ryelle ryelle self-assigned this Jul 1, 2024
@bbertucc
Copy link

bbertucc commented Jul 1, 2024

Looks good to me.

Copy link
Contributor

@adamwoodnz adamwoodnz left a comment

Choose a reason for hiding this comment

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

Yep works for me, tested on Learn

@ryelle ryelle merged commit d2022e0 into trunk Jul 2, 2024
2 checks passed
@ryelle ryelle deleted the fix/global-header-nav-arialabel branch July 2, 2024 20:58
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 [Block] Local Navigation Bar
3 participants