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

Too many keyboard focus targets on Next and Previous buttons #951

Open
jonels-msft opened this issue Jun 24, 2020 · 2 comments · May be fixed by #1152
Open

Too many keyboard focus targets on Next and Previous buttons #951

jonels-msft opened this issue Jun 24, 2020 · 2 comments · May be fixed by #1152
Labels
Improvement Minor improvement to code

Comments

@jonels-msft
Copy link
Contributor

Problem

The next and previous controls


are offering multiple keyboard control targets each. This is confusing and inefficient for people who need to use keyboard navigation.

Reproducible Project

https://pg-auto-failover.readthedocs.io/en/latest/

Error Logs/Results

Here is a video demonstrating the problem: https://www.youtube.com/watch?v=0pYfzz6Q2PE

Environment Info

  • Python Version: 3.7.3
  • Sphinx Version: 1.8.5
  • RTD Theme Version: 0.4.3
@stsewd stsewd added the Improvement Minor improvement to code label Oct 7, 2020
@Blendify
Copy link
Member

The code is actually https://github.com/readthedocs/sphinx_rtd_theme/blob/master/sphinx_rtd_theme/footer.html#L4

While trying to test this it only takes one tab key to go from one button to the next/

@jonels-msft
Copy link
Contributor Author

I looked into this again, and verified it works properly when using the tab key to move between the items. However when moving moving between the items with a screenreader, the reader will make an extra stop at a pseudo-element added to the footer using CSS:

.rst-footer-buttons:after,.rst-footer-buttons:before {
    width: 100%;
    display: table;
    content: "";
}

I think if we switch to something like flexbox for the footer and its buttons rather than floats and the workaround above then screen readers will handle it properly.

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

Successfully merging a pull request may close this issue.

3 participants