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

Navbar drop menus: no keyboard focus / no touch device access #530

Closed
jhildenbiddle opened this issue Jun 7, 2018 · 1 comment · Fixed by #2269
Closed

Navbar drop menus: no keyboard focus / no touch device access #530

jhildenbiddle opened this issue Jun 7, 2018 · 1 comment · Fixed by #2269

Comments

@jhildenbiddle
Copy link
Member

View https://libocca.org/ as an example. Notice that the "Learn" and "About" drop menus are not accessible either via keyboard navigation or on touch devices.

This issue has been addressed in docsify-themeable via a plugin. The fix involves the following:

  • Ensure that top-level text-only items are wrapped in a <span> tag with tabindex="0" to allow the text to receive focus.
  • Add focusin and focusout event listeners to simulate :focus-within behavior in legacy browsers. This allow for users to navigate the navbar with the keyboard.

The issue with the plugin is that it is sometimes triggered before the navbar has rendered. When this happens, the "fix" is not applied. If the above logic was added to docsify, the fix would be reliable the the docisfy-themeable plugin unnecessary.

Details here:

@trusktr
Copy link
Member

trusktr commented Jun 21, 2020

I assume any markup change is a breaking change, so adding this to the 5.x board.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants