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($theme-default): display header-anchor links when using keyboard navigation #2699

Merged
merged 1 commit into from Nov 10, 2020

Conversation

ramiy
Copy link
Contributor

@ramiy ramiy commented Nov 5, 2020

Summary

a11y: When using keyboard navigation the header-anchor link (the # tag before the heading) is not visible, this PR fixies this bug.

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Docs
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change?

  • Yes
  • No

The PR fulfills these requirements:

  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE

Other information:

To recreate the issue, try navigating using you keyboard (with the TAB key) in a page with many h1-h6 headings. You won't see the heading-anchor link (the # tag before the heading). But when you hover with your mouse over a heading you will see the heading-anchor link.

Why? because the code uses only :hover (for mouse users). It should also include :focus (for keyboard users).

When using keyboard navigation the header-anchor is not visible, this PR fixies this bug
@billyyyyy3320 billyyyyy3320 changed the title fix ($theme-default): [accessibility] display header-anchor links when using keyboard navigation fix($theme-default): [accessibility] display header-anchor links when using keyboard navigation Nov 10, 2020
@billyyyyy3320 billyyyyy3320 changed the title fix($theme-default): [accessibility] display header-anchor links when using keyboard navigation fix($theme-default): display header-anchor links when using keyboard navigation Nov 10, 2020
Copy link
Collaborator

@billyyyyy3320 billyyyyy3320 left a comment

Choose a reason for hiding this comment

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

Thanks

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.

None yet

2 participants