feat: STADTKLN-134 implement skip links (#20)

* feat: implement skip links on homepage * feat: implement skip-links on enquiry * feat: implement skip links on blog pages * chore: revert homepage hero to random src * feat: implement skip links on apps page * Apply suggestions from code review German translations * Apply suggestions from code review missing german translations * feat: implement skip links on results pages --------- Co-authored-by: Deborah Köpfer <[email protected]>
virtualidentityag · Sep 20, 2024 · 257f5ab · 257f5ab
1 parent 54a5305
commit 257f5ab
Show file tree

Hide file tree

Showing 22 changed files with 181 additions and 25 deletions.
diff --git a/src/layouts/base.twig b/src/layouts/base.twig
@@ -31,7 +31,11 @@
     <script type='module' src='/src/js/scripts.js' defer></script>
   </head>
   <body class='min-vh-100 d-flex flex-column'>
-    {% include 'partials::base/b_header.twig' %}
+    {%
+      include 'partials::base/b_header.twig' with {
+      skip_links: skip_links
+      }
+    %}
 
     <main class='container flex-grow-1'>
       {% block content %}{% endblock %}

diff --git a/src/pages/apps.twig b/src/pages/apps.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/pages/blog-overview.twig b/src/pages/blog-overview.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/pages/blog.twig b/src/pages/blog.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/pages/enquiry-all-states.twig b/src/pages/enquiry-all-states.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [
@@ -40,7 +46,14 @@
     </div>
   </section>
 
-  <section class='row mb-4 mb-md-5'>
+  <section class='position-relative row mb-4 mb-md-5'>
+    {%
+      include 'partials::content-layout/cl_skip-links.twig' with {
+      links: [
+      { href: "#results", text: "Formular überspringen"}
+      ]
+      }
+    %}
     <div class='col-12'>
       <form class='row pb-3'>
         <div class='col-12 col-md-6 mb-4'>
@@ -120,7 +133,7 @@
     }
   %}
 
-  <section class='row mb-3 mb-md-4'>
+  <section id='results' class='row mb-3 mb-md-4'>
     <div class='col-12'>
       <div class='d-flex justify-content-between align-items-center mb-4'>
         <h2 class='display-6 m-0'>Öffentliche Datenanfragen</h2>

diff --git a/src/pages/enquiry-validated.twig b/src/pages/enquiry-validated.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [
@@ -40,7 +46,14 @@
     </div>
   </section>
 
-  <section class='row mb-4 mb-md-5'>
+  <section class='position-relative row mb-4 mb-md-5'>
+    {%
+      include 'partials::content-layout/cl_skip-links.twig' with {
+      links: [
+      { href: "#results", text: "Formular überspringen"}
+      ]
+      }
+    %}
     <div class='col-12'>
       <form class='row pb-3'>
         <div class='col-12 col-md-6 mb-4'>
@@ -128,7 +141,7 @@
     }
   %}
 
-  <section class='row mb-3 mb-md-4'>
+  <section id='results' class='row mb-3 mb-md-4'>
     <div class='col-12'>
       <div class='d-flex justify-content-between align-items-center mb-4'>
         <h2 class='display-6 m-0'>Öffentliche Datenanfragen</h2>

diff --git a/src/pages/enquiry.twig b/src/pages/enquiry.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [
@@ -40,7 +46,14 @@
     </div>
   </section>
 
-  <section class='row mb-4 mb-md-5'>
+  <section class='position-relative row mb-4 mb-md-5'>
+    {%
+      include 'partials::content-layout/cl_skip-links.twig' with {
+      links: [
+      { href: "#results", text: "Formular überspringen"}
+      ]
+      }
+    %}
     <div class='col-12'>
       <form class='row pb-3'>
         <div class='col-12 col-md-6 mb-4'>
@@ -120,7 +133,7 @@
     }
   %}
 
-  <section class='row mb-3 mb-md-4'>
+  <section id='results' class='row mb-3 mb-md-4'>
     <div class='col-12'>
       <div class='d-flex justify-content-between align-items-center mb-4'>
         <h2 class='display-6 m-0'>Öffentliche Datenanfragen</h2>

diff --git a/src/pages/homepage.twig b/src/pages/homepage.twig
@@ -1,12 +1,17 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
-  <section class='row pb-3 pb-lg-5'>
+  <section id='homepage-search' class='row pb-3 pb-lg-5'>
     <div class='col-12'>
       {%
         include 'partials::base/b_hero.twig' with {
-        src: 'https://static.ksta.de/__images/2023/08/25/063fe724-7865-4843-86d8-83e429101402.jpeg?q=75&q=70&w=2000&h=4484&fm=jpeg&s=1c2a6b096dbbc95dd3a9d637962b6d14',
+        src: 'https://picsum.photos/960/540',
         type: 'background'
         }
       %}
@@ -36,7 +41,7 @@
     </div>
   </section>
 
-  <section class='row pb-5'>
+  <section id='content' class='row pb-5'>
     <div class='col-12'>
       <div class='p-3 bg-body'>
         <h2 class='p-3 m-0'>

diff --git a/src/pages/overview-empty.twig b/src/pages/overview-empty.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/pages/overview.twig b/src/pages/overview.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/pages/publisher-datasets-empty.twig b/src/pages/publisher-datasets-empty.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/pages/publisher-datasets.twig b/src/pages/publisher-datasets.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/pages/publisher-overview.twig b/src/pages/publisher-overview.twig
@@ -1,7 +1,13 @@
 {% extends 'layouts::base.twig' %}
 {% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
 
 {% block content %}
+  <div id='content'></div>
   {%
     include 'partials::base/b_breadcrumbs.twig' with {
     links: [

diff --git a/src/partials/base/b_header.twig b/src/partials/base/b_header.twig
@@ -1,4 +1,4 @@
-<header class='header border-bottom'>
+<header class='header position-relative border-bottom'>
   <nav class='navbar navbar-expand-xl p-3 container d-flex justify-content-between'>
     <a
       href='./'
@@ -10,6 +10,15 @@
       <img class='logo dark-mode-only' src='./assets/odk-logo-dark.svg' alt='Offene Daten Köln'>
     </a>
 
+    {%
+      include 'partials::content-layout/cl_skip-links.twig' with {
+      links: [
+      { href: '#header-nav', text: 'Zur Navigation' },
+      { href: '#header-search', text: 'Zur Suche' },
+      ]|merge(skip_links|default([]))
+      }
+    %}
+
     <div class='d-flex align-items-center gap-4'>
       <div
         id='header-nav'
@@ -19,7 +28,7 @@
         aria-label='Hauptnavigation'
       >
         <div class='offcanvas-header d-flex gap-4 d-xl-none justify-content-end'>
-          <a href='./overview' class='text-decoration-none fs-3' aria-label='Datensätze suchen'
+          <a href='./overview' class='link text-decoration-none fs-3' aria-label='Datensätze suchen'
             ><i class='bi bi-search'></i
           ></a>
           <button type='button' class='btn btn-outline-light' data-bs-dismiss='offcanvas' aria-label='Schließen'>
@@ -48,6 +57,7 @@
 
       <form action='./overview' class='d-none d-lg-flex gap-2'>
         <input
+          id='header-search'
           class='form-control mr-sm-2'
           type='search'
           placeholder='Datensätze suchen'

diff --git a/src/partials/content-layout/cl_results-empty-state.twig b/src/partials/content-layout/cl_results-empty-state.twig
@@ -1,5 +1,12 @@
 <div class='row pt-3 pt-md-4'>
-  <div class='col-0 col-lg-3'>
+  <div class='position-relative col-0 col-lg-3'>
+    {%
+      include 'partials::content-layout/cl_skip-links.twig' with {
+      links: [
+      { href: "#results", text: "Filter überspringen"}
+      ]
+      }
+    %}
     {%
       include 'partials::content-layout/cl_filters.twig' with {
       showDesktop: true,
@@ -107,7 +114,7 @@
       </button>
     </div>
     <div class='visually-hidden' role='region' aria-live='polite'>0 Ergebnisse</div>
-    <div class='mt-3'>
+    <div id='results' class='mt-3'>
       <div class='ratio ratio-21x9 rounded border'>
         <div class='d-flex flex-column justify-content-center align-items-center p-2'>
           <i class='bi bi-search display-2 text-gray mb-2'></i>

diff --git a/src/partials/content-layout/cl_results.twig b/src/partials/content-layout/cl_results.twig
@@ -1,5 +1,12 @@
 <div class='row pt-3 pt-md-4'>
-  <div class='col-0 col-lg-3'>
+  <div class='position-relative col-0 col-lg-3'>
+    {%
+      include 'partials::content-layout/cl_skip-links.twig' with {
+      links: [
+      { href: "#results", text: "Filter überspringen"}
+      ]
+      }
+    %}
     {%
       include 'partials::content-layout/cl_filters.twig' with {
       showDesktop: true,
@@ -107,7 +114,7 @@
       </button>
     </div>
     <div class='visually-hidden' role='region' aria-live='polite'>5 Ergebnisse</div>
-    <div class='mt-3'>
+    <div id='results' class='mt-3'>
       <div class='pb-3'>
         {%
           include 'partials::content-layout/cl_result-card.twig' with {

diff --git a/src/partials/content-layout/cl_skip-links.twig b/src/partials/content-layout/cl_skip-links.twig
@@ -0,0 +1,14 @@
+<nav class='skip-links position-absolute w-auto'>
+  <ul class='list-group'>
+    {% for link in links %}
+      <li class='list-group-item'>
+        {%
+          include 'partials::base/b_link.twig' with {
+          href: link.href,
+          text: link.text
+          }
+        %}
+      </li>
+    {% endfor %}
+  </ul>
+</nav>
diff --git a/src/partials/icon-link.twig b/src/partials/icon-link.twig