Make skip link visible to keyboard users

OpenGov-OpenData · Jul 24, 2024 · 960a634 · 960a634
1 parent 349dd01
commit 960a634
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/ckanext/opendata_theme/opengov_custom_css/assets/css/theme.css b/ckanext/opendata_theme/opengov_custom_css/assets/css/theme.css
@@ -453,6 +453,21 @@ form.form-inline.form-select.lang-select {
   margin-left: 20px;
 }
 
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+.skip-content {
+  background-color: #ffffff;
+}
+
 /* hidden only for public user registration/edit */
 #user-register-form .image-upload,
 #user-edit-form .image-upload {

diff --git a/ckanext/opendata_theme/opengov_custom_theme/templates/page.html b/ckanext/opendata_theme/opengov_custom_theme/templates/page.html
@@ -0,0 +1,5 @@
+{% ckan_extends %}
+
+{% block skip %}
+  <div class="visually-hidden-focusable skip-content"><a href="#content">{{ _('Skip to content') }}</a></div>
+{% endblock %}