Merge pull request #21 from virtualidentityag/fix/lighthouse-and-a11y…

…-minor-issues fix: lighthouse a11y issues
virtualidentityag · Sep 25, 2024 · 946bf10 · 946bf10
2 parents 257f5ab + e7befab
commit 946bf10
Show file tree

Hide file tree

Showing 21 changed files with 136 additions and 76 deletions.
diff --git a/public/assets/favicon/site.webmanifest b/public/assets/favicon/site.webmanifest
@@ -3,12 +3,12 @@
   "short_name": "Offene Daten Köln",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "./android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "./android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

diff --git a/src/pages/homepage.twig b/src/pages/homepage.twig
@@ -25,7 +25,7 @@
               </h1>
               <form class='form-inline d-flex gap-2' action='overview'>
                 <input
-                  class='form-control fs-5 mr-sm-2'
+                  class='form-control form-control-lg fs-5 mr-sm-2'
                   type='search'
                   placeholder='Datensätze suchen'
                   aria-label='Datensätze suchen'
@@ -63,7 +63,7 @@
       }
     %}
 
-    <div class='col-6 mb-3'>
+    <div class='col-lg-6 mb-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -77,7 +77,7 @@
         }
       %}
     </div>
-    <div class='col-6 mb-3'>
+    <div class='col-lg-6 mb-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -91,7 +91,7 @@
         }
       %}
     </div>
-    <div class='col-6 my-3'>
+    <div class='col-lg-6 my-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -105,7 +105,7 @@
         }
       %}
     </div>
-    <div class='col-6 my-3'>
+    <div class='col-lg-6 my-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -119,7 +119,7 @@
         }
       %}
     </div>
-    <div class='col-6 mt-3'>
+    <div class='col-lg-6 mt-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -133,7 +133,7 @@
         }
       %}
     </div>
-    <div class='col-6 mt-3'>
+    <div class='col-lg-6 mt-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {

diff --git a/src/pages/index.twig b/src/pages/index.twig
@@ -58,10 +58,10 @@
       <div>
         <h1>{{ template.name }}</h1>
         <div class='bg-body-secondary rounded p-4'>
-          <div class='row'>
+          <div class='row gap-4 gap-md-0'>
             {% for variant in template.variants %}
-              <div class='col-3'>
-                <a href='{{ variant.href }}' class='card text-decoration-none'>
+              <div class='col-md-4 col-lg-3'>
+                <a href='{{ variant.href }}' class='card overflow-hidden text-decoration-none'>
                   <div class='ratio ratio-3x4'>
                     <img class='object-position-top bg-body-tertiary' src='./assets/previews/{{ variant.thumbnail }}'>
                     {% if variant.thumbnail_dark %}

diff --git a/src/pages/overview-empty.twig b/src/pages/overview-empty.twig
@@ -47,7 +47,7 @@
 
   <section class='row'>
     <div class='col-12'>
-      <h2 class='h2 m-0 pb-3 pb-md-4' role='region' aria-live='polite'>Ihre Suche nach "Lorem" ergab 0 Datensätze.</h2>
+      <p class='h2 m-0 pb-3 pb-md-4' role='region' aria-live='polite'>Ihre Suche nach "Lorem" ergab 0 Datensätze.</p>
 
       {% include 'partials::content-layout/cl_results-empty-state.twig' %}
     </div>

diff --git a/src/pages/overview.twig b/src/pages/overview.twig
@@ -46,9 +46,7 @@
 
   <section class='row'>
     <div class='col-12'>
-      <h2 class='h2 m-0 pb-3 pb-md-4' role='region' aria-live='polite'>
-        Ihre Suche nach "Struktur" ergab 387 Treffer.
-      </h2>
+      <p class='h2 m-0 pb-3 pb-md-4' role='region' aria-live='polite'>Ihre Suche nach "Struktur" ergab 387 Treffer.</p>
 
       {% include 'partials::content-layout/cl_results.twig' %}
     </div>

diff --git a/src/pages/publisher-overview.twig b/src/pages/publisher-overview.twig
@@ -30,7 +30,7 @@
     <div class='col-12 col-md-6 col-lg-4 mb-5'>
       {%
         include 'partials::content-layout/cl_publisher.twig' with {
-        href: './publisher',
+        href: './publisher-datasets',
         title: 'Meinung für Köln',
         description: 'Auf dem Beteiligungsportal der Stadt Köln "Meinung für Köln", werden Impulse für das Stadtentwicklungskonzept gesammelt.',
         datasets: 21
@@ -40,7 +40,7 @@
     <div class='col-12 col-md-6 col-lg-4 mb-5'>
       {%
         include 'partials::content-layout/cl_publisher.twig' with {
-        href: './publisher',
+        href: './publisher-datasets',
         title: 'Landesdatenbank NRW',
         description: 'Daten zu den Kreisen und Gemeinden des Landes Nordrhein-Westfalen.',
         datasets: 113
@@ -50,7 +50,7 @@
     <div class='col-12 col-md-6 col-lg-4 mb-5'>
       {%
         include 'partials::content-layout/cl_publisher.twig' with {
-        href: './publisher',
+        href: './publisher-datasets',
         title: 'Touristischer Data Hub NRW',
         description: 'Der Data Hub NRW bündelt touristische Daten aus ganz Nordrhein-Westfalen, um Gästen touristische Informationen einfach und schnell bereitzustellen.',
         datasets: 1
@@ -60,7 +60,7 @@
     <div class='col-12 col-md-6 col-lg-4 mb-5'>
       {%
         include 'partials::content-layout/cl_publisher.twig' with {
-        href: './publisher',
+        href: './publisher-datasets',
         title: 'GrowSmarter',
         description: 'transforming cities for a smart, sustainable Europe.',
         datasets: 1
@@ -70,7 +70,7 @@
     <div class='col-12 col-md-6 col-lg-4 mb-5'>
       {%
         include 'partials::content-layout/cl_publisher.twig' with {
-        href: './publisher',
+        href: './publisher-datasets',
         title: 'Kölner Zoo',
         description: 'Aktiengesellschaft Zoologischer Garten Köln.',
         datasets: 3
@@ -80,7 +80,7 @@
     <div class='col-12 col-md-6 col-lg-4 mb-5'>
       {%
         include 'partials::content-layout/cl_publisher.twig' with {
-        href: './publisher',
+        href: './publisher-datasets',
         title: 'KölnBäder GmbH',
         description: 'KölnBäder GmbH',
         datasets: 1
@@ -90,7 +90,7 @@
     <div class='col-12 col-md-6 col-lg-4 mb-5'>
       {%
         include 'partials::content-layout/cl_publisher.twig' with {
-        href: './publisher',
+        href: './publisher-datasets',
         title: 'VHS Koeln',
         description: 'Die Volkshochschule Köln - Weiterbildungseinrichtung',
         datasets: 1

diff --git a/src/partials/base/b_card.twig b/src/partials/base/b_card.twig
@@ -14,7 +14,7 @@
     <h3 class='card-title h5 d-flex gap-2 align-items-center mb-0'>
       <strong>{{ title }}</strong>
       {% if tag %}
-        <span class='badge badge-small text-primary fw-normal text-uppercase'>{{ tag }}</span>
+        <span class='badge badge-small text-primary fw-normal'>{{ tag }}</span>
       {% endif %}
     </h3>
     <p class='card-subtitle m0 text-muted'>{{ subtitle }}</p>
@@ -25,7 +25,7 @@
     {% if formats %}
       <div>
         {% for format in formats %}
-          <span class='badge badge-small text-bg-primary rounded-pill text-uppercase'>{{ format | upper }} </span>
+          <span class='badge badge-small text-bg-primary rounded-pill'>{{ format | upper }} </span>
         {% endfor %}
       </div>
     {% endif %}

diff --git a/src/partials/base/b_header.twig b/src/partials/base/b_header.twig
@@ -44,7 +44,7 @@
             </li>
             <li><a href='./overview' class='nav-link'>Daten</a></li>
             <li><a href='#' class='nav-link'>News</a></li>
-            <li><a href='#' class='nav-link'>Herausgeber</a></li>
+            <li><a href='./publisher-overview' class='nav-link'>Herausgeber</a></li>
             <li><a href='./apps' class='nav-link'>Apps</a></li>
             <li><a href='#' class='nav-link'>Anfragen</a></li>
           </ul>

diff --git a/src/partials/base/b_hero.twig b/src/partials/base/b_hero.twig
@@ -1,6 +1,8 @@
 {% set type = type is defined ? type : 'default' %}
 <div class='hero hero-{{ type }}'>
   <div class='hero-inner'>
-    <img src='{{ src }}' alt>
+    <div class='hero-inner-ratio'>
+      <img src='{{ src }}' alt>
+    </div>
   </div>
 </div>
diff --git a/src/partials/base/b_tile.twig b/src/partials/base/b_tile.twig
@@ -1,4 +1,5 @@
-<a href='{{ href }}' class='tile ratio ratio-1x1'>
+<a href='{{ href }}' class='tile'>
+  <div class='tile-ratio'></div>
   <div class='d-flex flex-column justify-content-center align-items-center'>
     <i class='bi bi-{{ icon }} fs-1'></i>
     <p>{{ name }}</p>

diff --git a/src/partials/content-layout/cl_app.twig b/src/partials/content-layout/cl_app.twig
@@ -5,7 +5,7 @@
 
   <div class='card-body pt-4'>
     {% if href is not defined %}
-      <span class='badge badge-small border border-2 border-body text-body text-uppercase mb-2'>Nicht Verfügbar</span>
+      <span class='badge badge-small border border-2 border-body text-body mb-2'>Nicht Verfügbar</span>
     {% endif %}
     <h3 class='h5 fw-semibold'>{{ title }}</h3>
     {% if description is defined %}
@@ -18,7 +18,7 @@
       <div class='d-flex justify-content-end'>
         {%
           include 'partials::base/b_link.twig' with {
-          text: 'Zur Anwendung',
+          text: 'zur Anwendung',
           icon: 'arrow-return-right',
           href: href
           }

diff --git a/src/partials/content-layout/cl_filters.twig b/src/partials/content-layout/cl_filters.twig
@@ -22,13 +22,13 @@
     </button>
   </div>
   <div class='offcanvas-body'>
-    <h3 class='h5 mb-3'><strong>Filtern nach</strong></h3>
+    <h2 class='h5 mb-3'><strong>Filtern nach</strong></h2>
     <div class='d-flex flex-column gap-4' role='region' aria-live='polite'>
       {% for category in data %}
         <div class='mb-3'>
-          <h4 class='h6'>
+          <h3 class='h6'>
             <strong>{{ category.title }}</strong>
-          </h4>
+          </h3>
           <div class='d-flex flex-column gap-2 align-items-start'>
             {% for filter in category.filters %}
               {% set id = 'filter-' ~ loop.parent.loop.index ~ loop.index %}

diff --git a/src/partials/content-layout/cl_results-empty-state.twig b/src/partials/content-layout/cl_results-empty-state.twig
@@ -86,7 +86,7 @@
       <p class='m-0'><strong>Sortieren nach</strong></p>
       <div class='dropdown'>
         <button
-          class='btn btn-light dropdown-toggle shadow-sm'
+          class='btn btn-light dropdown-toggle shadow-sm fw-normal fs-6'
           type='button'
           data-bs-toggle='dropdown'
           aria-expanded='false'

diff --git a/src/partials/content-layout/cl_results.twig b/src/partials/content-layout/cl_results.twig
@@ -86,7 +86,7 @@
       <p class='m-0'><strong>Sortieren nach</strong></p>
       <div class='dropdown'>
         <button
-          class='btn btn-light dropdown-toggle shadow-sm'
+          class='btn btn-light dropdown-toggle shadow-sm fw-normal fs-6'
           type='button'
           data-bs-toggle='dropdown'
           aria-expanded='false'
@@ -114,8 +114,8 @@
       </button>
     </div>
     <div class='visually-hidden' role='region' aria-live='polite'>5 Ergebnisse</div>
-    <div id='results' class='mt-3'>
-      <div class='pb-3'>
+    <div id='results' class='mt-3 d-flex flex-column gap-5'>
+      <div>
         {%
           include 'partials::content-layout/cl_result-card.twig' with {
           href: './dataset',
@@ -126,7 +126,7 @@
           }
         %}
       </div>
-      <div class='py-3'>
+      <div>
         {%
           include 'partials::content-layout/cl_result-card.twig' with {
           href: './dataset',
@@ -138,7 +138,7 @@
           }
         %}
       </div>
-      <div class='py-3'>
+      <div>
         {%
           include 'partials::content-layout/cl_result-card.twig' with {
           seen: true,
@@ -151,7 +151,7 @@
           }
         %}
       </div>
-      <div class='py-3'>
+      <div>
         {%
           include 'partials::content-layout/cl_result-card.twig' with {
           seen: true,
@@ -162,7 +162,7 @@
           }
         %}
       </div>
-      <div class='py-3'>
+      <div>
         {%
           include 'partials::content-layout/cl_result-card.twig' with {
           seen: true,
@@ -173,7 +173,7 @@
           }
         %}
       </div>
-      <div class='pt-3'>
+      <div>
         {% include 'partials::base/b_pagination.twig' %}
       </div>
     </div>

diff --git a/src/styles/base/_theme.scss b/src/styles/base/_theme.scss
@@ -1,8 +1,9 @@
 .text-bg-primary {
-  color: var(--color-on-primary) !important;
-  background-color: var(--primary) !important;
   --focus-ring-color: var(--color-on-primary);
 
+  background-color: var(--primary) !important;
+  color: var(--color-on-primary) !important;
+
   .btn-primary {
     --btn-bg: var(--color-on-primary);
     --btn-color: var(--primary);
@@ -16,6 +17,18 @@
     --btn-hover-color: var(--primary);
     --btn-hover-bg: var(--color-on-primary);
   }
+
+  [data-bs-theme='dark'] & {
+    --body-bg: var(--primary);
+
+    input {
+      color: var(--black);
+
+      &::placeholder {
+        color: var(--gray);
+      }
+    }
+  }
 }
 
 .dark-mode-only {

diff --git a/src/styles/components/_accordion.scss b/src/styles/components/_accordion.scss
@@ -5,10 +5,14 @@
     var(--focus-ring-color);
 
   &-button::after {
-    &,
-    [data-bs-theme='dark'] & {
+    & {
       --accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a01e28'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
       --accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a01e28'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
     }
+
+    [data-bs-theme='dark'] & {
+      --accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
+      --accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
+    }
   }
 }
diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss
@@ -1,8 +1,8 @@
 .footer {
   --footer-color: var(--light);
   --footer-background: var(--dark);
-  --footer-link-color: var(--light);
-  --footer-link-hover-color: var(--primary);
+  --footer-link-color: var(--light-gray);
+  --footer-link-hover-color: var(--light);
 
   color: var(--footer-color);
   background-color: var(--footer-background);
@@ -17,7 +17,8 @@
   }
 
   a {
-    color: var(---footer-link-color);
+    --focus-ring-color: var(--footer-link-color);
+    color: var(--footer-link-color);
 
     &:hover {
       color: var(--footer-link-hover-color);