virtualidentityag · paulovareiro29 · Sep 20, 2024 · Sep 20, 2024 · Sep 20, 2024 · Sep 20, 2024
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: 'Content' },
+  ]
+%}
 
 {% 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: 'Content' },
+  ]
+%}
 
 {% 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: 'Content' },
+  ]
+%}
 
 {% 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: 'Content' },
+  ]
+%}
 
 {% 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: "Skip formulary"}
+      ]
+      }
+    %}
     <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: 'Content' },
+  ]
+%}
 
 {% 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: "Skip formulary"}
+      ]
+      }
+    %}
     <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: 'Content' },
+  ]
+%}
 
 {% 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: "Skip formulary"}
+      ]
+      }
+    %}
     <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: 'Content' },
+  ]
+%}
 
 {% 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/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: 'Navigation' },
+      { href: '#header-search', text: 'Search' },
+      ]|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_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
diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss
@@ -2,7 +2,6 @@
   --header-background: var(--body-bg);
   --header-link-color: var(--body-color);
   --header-link-hover-color: var(--primary);
-  --link-color-rgb: var(--light-rgb);
 
   background-color: var(--header-background);
   border-bottom-color: var(--header-border-color, #e9ecef) !important;
@@ -50,6 +49,16 @@
       --header-link-hover-color: var(--primary);
       --focus-ring-color: var(--primary);
     }
+
+    .link {
+      border: 0;
+      padding: 0;
+      --link-color-rgb: var(--light-rgb);
+
+      &:hover {
+        --link-color-rgb: var(--primary-rgb);
+      }
+    }
   }
 
   .navbar-toggler {
@@ -66,9 +75,5 @@
   .link {
     border: 0;
     padding: 0;
-
-    &:hover {
-      --link-hover-color-rgb: var(--light-rgb);
-    }
   }
 }
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
@@ -9,3 +9,4 @@
 @import 'link';
 @import 'pagination';
 @import 'tile';
+@import 'skip-links';
diff --git a/src/styles/components/_skip-links.scss b/src/styles/components/_skip-links.scss
@@ -0,0 +1,19 @@
+.skip-links {
+  --link-color-rgb: var(--body-color);
+
+  top: 16px;
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+
+  &:focus-visible,
+  &:focus-within {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  .link {
+    padding: 0;
+    border: 0;
+  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -52,6 +52,7 @@ $aspect-ratios: (
 @import 'bootstrap/scss/nav';
 @import 'bootstrap/scss/navbar';
 @import 'bootstrap/scss/card';
+@import 'bootstrap/scss/list-group';
 @import 'bootstrap/scss/breadcrumb';
 @import 'bootstrap/scss/accordion';
 @import 'bootstrap/scss/pagination';