A11Y-Improvements (#394)

- standardized focus-indicators
- reworked expander-arrow so that it won't read out by screenreaders
- hide `<br>` for screenreader
- hide `<hr>` for screenreader
- updated aria-label for search-input
- updated aria-label for updateDate
- add aria-label for related countries
- add lang-tag for footer-love

Author: therobrob

assets/sass/_variables.scss

@@ -32,15 +32,16 @@ html {
   --border-radius-s: 0.4rem;
   --border-radius-m: 0.8rem;
   --border-radius-l: 1.6rem;
-  --pagefind-ui-border-radius: var(--border-radius-l);
-  --pagefind-ui-border: #000;
+  --pagefind-ui-border-radius: var(--border-radius-l) !important;
+  --pagefind-ui-border: #000 !important;
   --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
   --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
   --highlight-color-tip: #c4f2ff;
   --highlight-color-inofficial: #f0f3f5;
   --highlight-color-important: #ffe3d9;
   --border: 0.1rem solid transparent;
   --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif;
+  --outline-focus-indicator: #257fa8;
 }
 
 html[data-theme="dark"] {
@@ -64,4 +65,5 @@ html[data-theme="dark"] {
   --highlight-color-inofficial: #2a2d30;
   --highlight-color-important: #4a2a1a;
   --border: 0.1rem solid #3d444d;
+  --outline-focus-indicator: #2e9acb;
 }

assets/sass/anchorlink.scss

@@ -53,14 +53,18 @@
   color: var(--link-default);
   border: none;
   background-color: transparent;
-  transition: all 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    opacity 0.3s ease;
 
   &:hover,
   &:focus {
     background-color: var(--bg-neutral);
     opacity: 1;
   }
 
+  @include focus-indicator(0.2rem);
+
   @media print {
     display: none;
   }

assets/sass/button.scss

@@ -3,7 +3,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  border: 2px solid var(--link-default);
+  border: 0.2rem solid var(--link-default);
   border-radius: var(--border-radius-m);
   font-size: 1.5rem;
   cursor: pointer;
@@ -18,4 +18,6 @@
   &:focus {
     background: rgba($link-hovered, 0.15);
   }
+
+  @include focus-indicator(0.2rem);
 }

assets/sass/contentNavigation.scss

@@ -23,6 +23,10 @@
       margin-bottom: 0;
     }
   }
+
+  li {
+    margin-bottom: 0.3rem;
+  }
 }
 
 .o-aside__header {
@@ -34,6 +38,9 @@
   display: flex;
   align-items: flex-start;
   gap: 0.4rem;
+  width: fit-content;
+
+  @include focus-indicator(0.1rem);
 }
 
 .o-aside__backlink-text {

assets/sass/dropdown.scss

@@ -16,7 +16,7 @@
   &:hover,
   &:focus {
     color: var(--link-hovered);
-    transition: all 0.3s ease;
+    transition: color 0.3s ease;
 
     & > :not(.material-symbols-rounded) {
       text-decoration: underline;

assets/sass/expander.scss

@@ -8,6 +8,8 @@
   gap: 0.5rem;
   align-items: center;
   transition: background 0.3s ease;
+  justify-content: space-between;
+  border-radius: var(--border-radius-m);
 
   &:not(.o-expander__summary--booking) {
     font-weight: 700;
@@ -19,10 +21,11 @@
       text-decoration: underline;
     }
 
-    border-radius: var(--border-radius-m);
     background: rgba($link-hovered, 0.15);
   }
 
+  @include focus-indicator(0.2rem);
+
   &--booking {
     &:hover,
     &:focus {
@@ -53,7 +56,6 @@ details {
   background-color: var(--bg-neutral);
   border-radius: var(--border-radius-m);
   margin-bottom: 1.2rem;
-  border: var(--border);
 
   table {
     width: 100%;
@@ -65,10 +67,6 @@ details > summary {
   list-style-type: none;
 }
 
-.details-screen > .o-expander__summary {
-  padding-right: 3.2rem;
-}
-
 details > div {
   overflow-x: auto;
 }
@@ -77,19 +75,18 @@ details > summary::-webkit-details-marker {
   display: none;
 }
 
-.details-screen > .o-expander__summary::before {
-  content: "keyboard_arrow_down";
-  position: absolute;
-  right: 1.2rem;
-  font-size: 2.4rem;
-  align-self: center;
-  @extend .material-symbols-rounded;
+.o-expander__summary > span {
+  transition: transform 0.2s;
+}
+
+.o-expander__summary > div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.details-screen[open] > .o-expander__summary::before {
-  content: "keyboard_arrow_up";
-  font-size: 2.4rem;
-  @extend .material-symbols-rounded;
+.details-screen[open] > .o-expander__summary > span {
+  transform: rotate(180deg);
 }
 
 details[open] > .o-expander__summary:not(.o-expander__summary--booking) {

assets/sass/form.scss

@@ -28,6 +28,8 @@
     @media (min-width: #{$breakpoint-md}) {
       width: 50%;
     }
+
+    @include focus-indicator(0.2rem);
   }
 }
 

assets/sass/interactiveMap.scss

@@ -67,11 +67,14 @@
     align-items: center;
     justify-content: center;
     font-size: 3rem;
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: var(--link-hovered);
     }
+
+    @include focus-indicator(0.2rem);
   }
 
   &__legend {

assets/sass/navigation.scss

@@ -194,6 +194,7 @@ menu > li > menu {
   align-items: center;
   white-space: nowrap;
   line-height: 1;
+  border-radius: var(--border-radius-m);
 
   &:hover,
   &:focus {

assets/sass/search.scss

@@ -16,10 +16,7 @@
     border: var(--border);
     box-shadow: var(--box-shadow);
 
-    &:focus {
-      outline: 0.2rem solid orange;
-      outline-offset: 0.1rem;
-    }
+    @include focus-indicator(0.2rem);
 
     &::placeholder {
       opacity: 0.7;
@@ -48,22 +45,17 @@
     padding: 0 1rem 1rem 1rem;
     overscroll-behavior: contain;
     height: 35rem;
+    top: 0.4rem;
     overflow-y: scroll;
     position: relative;
-    top: -0.7rem;
-    border-left: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
-    border-right: var(--pagefind-ui-border-width) solid
-      var(--pagefind-ui-border);
-    border-bottom: var(--pagefind-ui-border-width) solid
-      var(--pagefind-ui-border);
-    border-bottom-left-radius: var(--pagefind-ui-border-radius);
-    border-bottom-right-radius: var(--pagefind-ui-border-radius);
+    border-radius: var(--pagefind-ui-border-radius);
     z-index: 3;
   }
 
   .pagefind-ui__result-link {
     color: var(--link-default);
     text-decoration: underline;
+    border-radius: var(--border-radius-s);
 
     &:hover,
     &:focus {
@@ -76,10 +68,8 @@
     color: var(--link-hovered);
   }
 
-  .pagefind-ui__result-link:focus {
-    outline: 0.2rem solid orange;
-    outline-offset: 0.1rem;
-    border-radius: var(--border-radius-s);
+  .pagefind-ui__result-link {
+    @include focus-indicator(0.2rem);
   }
 
   .pagefind-ui__result-link::before {
@@ -92,11 +82,14 @@
   }
 
   .pagefind-ui__button {
-    background-color: var(--bg-accent);
+    border: 0.2rem solid var(--link-default);
+    border-radius: var(--border-radius-m);
+    background: transparent;
+    color: var(--body-color);
 
     &:hover,
     &:focus {
-      background-color: var(--bg-accent2);
+      background: rgba($link-hovered, 0.15);
     }
   }
 }