♿ [#4720] Skiplink as first focusable element and visible on focus

open-formulieren · Oct 28, 2024 · 28978f4 · 28978f4
1 parent 2cfc111
commit 28978f4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/src/openforms/templates/404.html b/src/openforms/templates/404.html
@@ -1,6 +1,7 @@
 {% extends 'master.html' %}
 
 {% block extra_css %}{% endblock %}
+{% block skiplink %}{% endblock %}
 
 {% block content %}
   <h1>Sorry, the requested page could not be found (404)</h1>

diff --git a/src/openforms/templates/account_blocked.html b/src/openforms/templates/account_blocked.html
@@ -1,6 +1,7 @@
 {% extends 'master.html' %}
 
 {% block extra_css %}{% endblock %}
+{% block skiplink %}{% endblock %}
 
 {% block content %}
 

diff --git a/src/openforms/templates/master.html b/src/openforms/templates/master.html
@@ -30,6 +30,10 @@
 </head>
 
 <body class="utrecht-page">
+    {% block skiplink %}
+        <a class="skiplink" href="#main-content">{% translate "Show content." %}</a>
+    {% endblock %}
+
     {# No point in putting this in a <template> tag, since it targets noscript #}
     {% if enable_analytics and analytics_tools_config.enable_google_analytics and analytics_tools_config.gtm_code %}
         {# Load the second part of the Google tag manager snippet #}
@@ -42,12 +46,10 @@
     {% block content %}
         {% block header %}
             {% include "includes/page-header.html" %}
-            <a class="skiplink" href="#main-content">{% translate "Show content." %}</a>
         {% endblock %}
 
         <div class="utrecht-page__content utrecht-page-content">
-            <main class="utrecht-page-content__main">
-                <span class="skiplink-target" id="main-content"></span>
+            <main class="utrecht-page-content__main" id="main-content">
                 {% block inner-content %}
                     Override <code>{% verbatim %}{% block inner-content %}{% endverbatim %}</code>
                     to get some actual content.

diff --git a/src/openforms/ui/static/ui/scss/components/skiplink/_skiplink.scss b/src/openforms/ui/static/ui/scss/components/skiplink/_skiplink.scss
@@ -1,7 +1,16 @@
 .skiplink {
   position: absolute;
-  top: -100vh;
-  left: -100vh;
+  padding: 6px;
+  background-color: var(--of-skiplink-bg, var(--of-button-primary-bg));
+  color: var(--of-skiplink-fg, var(--of-button-primary-fg));
+  border-bottom-right-radius: 6px;
+  border-right: 1px solid var(--of-skiplink-color-border, var(--of-button-primary-color-border));
+  border-bottom: 1px solid var(--of-skiplink-color-border, var(--of-button-primary-color-border));
+
+  &:not(&:focus) {
+    top: -100vh;
+    left: -100vh;
+  }
 
   @media print {
     display: none;