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

Fix ARIA labels for all anchors with href="#"; adds aria-pressed information for toggles #1262

Merged
merged 1 commit into from Jun 7, 2023

Conversation

mattxwang
Copy link
Member

This follows up from #1259 and closes #1261. Basically, this PR accomplishes the two items discussed in the issue:

  1. for all anchors that are actually buttons (i.e., have href="#"), I've replaced them with a semantic <button>
  2. for anchors that are "toggle buttons" (the mobile menu nav, sidebar children/grandchildren toggles), I've added an aria-pressed property that is updated as the button is clicked

I've also slightly modified some of the aria-labels to make them more consistent. Observe that we shouldn't update these as the button is clicked; screen readers use the aria-pressed property to add an annotation to each button.

To test this,

  • the sidebar children and grandchildren can be done on the deploy preview:
    • open an arbitrary page; observe that the sidebar children/grandchildren dropdown ticks now have a proper aria-label and aria-pressed, as well as otherwise work as intended
    • toggle one of the buttons; observe the aria-pressed role changing as this is done
    • open a grandchild page; observe that the aria-pressed has a correct default wrt whether or not the page is active
  • the mobile menu can be done on the deploy preview; on a smaller viewport, observe the correct aria-pressed
  • two features require local changes to test:
    • the site.search.button needs to be enabled in the _config.yml. To test this, locally clone the repo, change the flag, and observe that the button still works as intended + has no visual regressions.
    • the collections feature is a bit more complicated. To test this, locally clone the repo, add an arbitrary collection and changes to _config.yml, and observe the same behaviour for the sidebar children/grandchildren above

@mattxwang mattxwang requested a review from a team May 31, 2023 21:19
@mattxwang
Copy link
Member Author

@just-the-docs/reviewers if I could get a review on this, that would be great; I'll likely cut a patch release after this change!

(you may want to review this with whitespace off, since there are some artifacts from previous PRs. need to eventually get around to re-enabling prettier)

@mattxwang mattxwang merged commit 0ca6933 into main Jun 7, 2023
19 checks passed
@mattxwang mattxwang deleted the resolve-href-# branch June 7, 2023 02:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve accessibility for toggleable buttons
1 participant