From 42a1ee7fdd8e8e678bb6e8afa9610314b3f56274 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 17 Oct 2022 11:31:01 +0200 Subject: [PATCH 1/3] ENH: add skip link --- .../assets/styles/index.scss | 1 + .../assets/styles/sections/_skip-link.scss | 22 +++++++++++++++++++ .../theme/pydata_sphinx_theme/layout.html | 6 ++++- 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss diff --git a/src/pydata_sphinx_theme/assets/styles/index.scss b/src/pydata_sphinx_theme/assets/styles/index.scss index 81900b248..b52ac6eeb 100644 --- a/src/pydata_sphinx_theme/assets/styles/index.scss +++ b/src/pydata_sphinx_theme/assets/styles/index.scss @@ -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"; diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss b/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss new file mode 100644 index 000000000..a91094923 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss @@ -0,0 +1,22 @@ +/******************************************************************************* +* Rules for the UX/UI of skip navigation link btn. It's only visible to people +* navigating with keyboard for accecibility purposes +*/ +.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; + } +} diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html index 3f68e4dd1..ae77172f2 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html @@ -46,6 +46,10 @@ {# set up with scrollspy to update the toc as we scroll #} {# ref: https://getbootstrap.com/docs/4.0/components/scrollspy/ #} + + {# isnside the body tag create accecibility links to skip naviagation #} + + {%- endblock %} {%- block content %} @@ -84,7 +88,7 @@
{% include "sections/sidebar-primary.html" %}
-
+
{# Main content area #} {% block docs_main %}
From 4a556b8cf0bd809139f80ece0d8ab66b48d0fb5b Mon Sep 17 00:00:00 2001 From: Rambaud Pierrick <12rambau@users.noreply.github.com> Date: Wed, 19 Oct 2022 21:59:36 +0200 Subject: [PATCH 2/3] add ref Co-authored-by: Chris Holdgraf --- src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html index ae77172f2..ca08d053e 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html @@ -47,7 +47,8 @@ {# ref: https://getbootstrap.com/docs/4.0/components/scrollspy/ #} - {# isnside the body tag create accecibility links to skip naviagation #} + {# A button hidden by default to help assistive devices quickly jump to main content #} + {# ref: https://www.youtube.com/watch?v=VUR0I5mqq7I #} {%- endblock %} From f53c4f3b1438ddf56a254c50b85f97c1cec3efa1 Mon Sep 17 00:00:00 2001 From: Rambaud Pierrick <12rambau@users.noreply.github.com> Date: Wed, 19 Oct 2022 22:00:06 +0200 Subject: [PATCH 3/3] add ref Co-authored-by: Chris Holdgraf --- .../assets/styles/sections/_skip-link.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss b/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss index a91094923..1df14ef78 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss @@ -1,7 +1,8 @@ /******************************************************************************* -* Rules for the UX/UI of skip navigation link btn. It's only visible to people -* navigating with keyboard for accecibility purposes -*/ + * 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;