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.

Sign up for GitHub

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

Jump to bottom

ENH: Add skip to main content button for a11y #1019

Merged
merged 3 commits into from Oct 20, 2022
Merged

ENH: Add skip to main content button for a11y #1019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42a1ee7
ENH: add skip link
12rambau Oct 17, 2022
4a556b8
add ref
12rambau Oct 19, 2022
f53c4f3
add ref
12rambau Oct 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions src/pydata_sphinx_theme/assets/styles/index.scss
View file
Open in desktop
Expand Up @@ -33,6 +33,7 @@ $grid-breakpoints: (
@import "./base/base";

// Major theme layout, skeleton, and whitespace
@import "./sections/skip-link";
@import "./sections/container";
@import "./sections/announcement";
@import "./sections/article";
Expand Down
23 changes: 23 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss
View file
Open in desktop
@@ -0,0 +1,23 @@
/*******************************************************************************
* Rules for the UX/UI of skip navigation link btn. It's only visible to people
* navigating with keyboard for accecibility purposes
* ref: https://www.youtube.com/watch?v=VUR0I5mqq7I
*/
.skip-link {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
background-color: var(--pst-color-background);
color: var(--pst-color-link);
padding: 0.5rem;
translate: 0 -100%;
transition: translate 150ms ease-in-out;
z-index: $zindex-modal;
border-bottom: 1px solid var(--pst-color-border);

&:focus {
translate: 0;
}
}
7 changes: 6 additions & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html
View file
Open in desktop
Expand Up @@ -46,6 +46,11 @@
{# set up with scrollspy to update the toc as we scroll #}
{# ref: https://getbootstrap.com/docs/4.0/components/scrollspy/ #}
<body data-spy="scroll" data-target="#bd-toc-nav" data-offset="180" data-default-mode="{{ default_mode }}">

{# A button hidden by default to help assistive devices quickly jump to main content #}
{# ref: https://www.youtube.com/watch?v=VUR0I5mqq7I #}
<a class="skip-link" href="#main-content">{{ _("Skip to main content") }}</a>

{%- endblock %}

{%- block content %}
Expand Down Expand Up @@ -84,7 +89,7 @@
<div class="bd-sidebar-primary bd-sidebar{% if not sidebars %} hide-on-wide{% endif %}">
{% include "sections/sidebar-primary.html" %}
</div>
<main class="bd-main">
<main id="main-content" class="bd-main">
choldgraf marked this conversation as resolved.
Show resolved Hide resolved
{# Main content area #}
{% block docs_main %}
<div class="bd-content">
Expand Down