-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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: Add "skip to main content" a11y feature #12408
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Heya cheers, see the review comments
Hi @chrisjsewell picking this back up. I addressed your first round of comments. LMK if you want to proceed with this and I will add the same a11y fix/feature to all the other builtin themes. |
Hey @kaycebasques, thanks for pushing this forward. For reference, in PyData Sphinx theme, we use the Also, in the same line linked above, you will see that we use a |
OK, I've got this working with all built-in themes. See the attached screencast for verification. verify.webm |
@trallard thanks for the review, I updated the feature to jump directly to the main content container and made sure that the "skip to main content" node does not leak through when printing |
#skiplink:focus { | ||
top: 10px; | ||
left: 10px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For agogo
and a few other built-in themes it's necessary to duplicate the CSS because they don't inherit basic.css
. When that stylesheet is inherited we don't need the duplication.
@@ -51,7 +51,7 @@ <h2 class="heading"><span>{{ title|striptags|e }}</span></h2> | |||
<div class="topnav" role="navigation" aria-label="Top"> | |||
{{ nav() }} | |||
</div> | |||
<div class="content" role="main"> | |||
<div class="content" role="main" id="main"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For this theme and a few others we need to duplicate the node ID because they override the default HTML from basic
a bit and the ID gets lost in the override.
hi @chrisjsewell this should be good to go now |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you! I just did a quick pass and overall it looks good.
I can check the tab order more in detail tomorrow when I am back in front of a computer.
@kaycebasques I was trying to check the When inspecting the source I can the Is this something you are also seeing on your end? Note I am only starting to familiarise with sphinx codebase so it is likely I am missing something on how layout/styles/themes relate to each other so thought I would check first. |
Subject: Improve usability of core Sphinx themes for people who rely on
Tab
-based navigationFeature or Bugfix
Purpose
Relates