Merge pull request #1088 from City-of-Helsinki/UHF-9998_link_size

UHF-9998 link size

src/scss/01_variables/_constraint_variables.scss

@@ -23,3 +23,6 @@ $image-content-width-max: 996px;
 $content-width-max: 860px;
 
 $footer-koro-height: 50px;
+
+$wcag-touch-target-size-aa: 24px; // The minimum requirement for hel.fi is 24px, https://www.wcag.com/developers/2-5-8-target-size-minimum-level-aa
+$wcag-touch-target-size-aaa: 44px; // This is the recommended size for touch targets for AAA accessibility level.

src/scss/05_objects/_link.scss

@@ -27,26 +27,3 @@ a:hover .link__type {
 
   --external-icon-move: scaleX(var(--lang-direction, 1)) rotate(15deg);
 }
-
-.link__style--highlight {
-  @include font('special.large_link');
-  margin-bottom: $spacing;
-  padding-inline-start: calc(var(--line-height) * 1em + $spacing-half);
-
-  &::before {
-    @include pseudo-icon('arrow-right', calc(var(--line-height) * 1em), currentColor, inline-block);
-    margin-inline-end: $spacing-half;
-    margin-inline-start: calc(var(--line-height) * -1em - $spacing-half);
-    transform: scaleX(var(--lang-direction, 1));
-  }
-
-  [dir='rtl'] & {
-    padding-left: 0;
-    padding-right: calc(var(--line-height) * 1em + $spacing-half);
-
-    &::before {
-      margin-left: $spacing-half;
-      margin-right: calc(var(--line-height) * -1em - $spacing-half);
-    }
-  }
-}

src/scss/06_components/_logo.scss

@@ -31,14 +31,17 @@ $-logo-sv-aspect-ratio: math.div(78, 28); // sv and ru logo size from svg file
 }
 
 .logo--footer {
-  margin-top: $spacing-half;
+  $logo-size: 40px;
+  $padding-size: 0.5 * ($wcag-touch-target-size-aaa - $logo-size);
+  margin-top: calc($spacing-half - #{$padding-size});
+  padding-block: $padding-size;
 
   @include breakpoint($breakpoint-m) {
     margin-right: $spacing;
     margin-top: 0;
   }
 
   .logo__icon {
-    --height: 40px;
+    --height: #{$logo-size};
   }
 }

src/scss/06_components/layout/_footer.scss

@@ -46,6 +46,7 @@
     &.footer-top__content__title {
       margin-top: $spacing-double;
 
+      /* stylelint-disable-next-line max-nesting-depth */
       @include breakpoint($breakpoint-m) {
         margin-top: 0;
       }
@@ -64,21 +65,18 @@
 
   .menu {
     @include font('body');
-    margin: $spacing 0 $spacing-double 0;
+    margin: $spacing-half 0 $spacing-double 0;
 
     @include breakpoint($breakpoint-m) {
       margin-bottom:0;
-      margin-top: $spacing-and-half;
+      margin-top: $spacing;
     }
   }
+}
 
-  .menu__item {
-    margin-top: $spacing;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
+footer.footer .menu__link {
+  display: inline-block;
+  padding-block: max(calc((#{$wcag-touch-target-size-aaa} - var(--line-height) * 1em) / 2) , #{$spacing-half});
 }
 
 .footer-top__content {
@@ -164,9 +162,9 @@
   align-items: center;
   align-self: flex-end;
   display: flex;
-  height: 40px; // Match footer logo height
   margin-left: auto; // Keeps link on the right side
   margin-right: $spacing-half;
+  min-height: $wcag-touch-target-size-aaa; // Match footer logo height
   text-decoration: none;
 
   @include breakpoint($breakpoint-m) {

src/scss/06_components/navigation/_breadcrumb.scss

@@ -4,14 +4,14 @@
   display: flex;
   list-style: none;
   margin: 0;
-  padding: $spacing-half $spacing;
+  padding-inline: $spacing;
 
   @include breakpoint($breakpoint-m) {
-    padding: $spacing $spacing-and-half;
+    padding-inline: $spacing-and-half;
   }
 
   @include breakpoint($breakpoint-l) {
-    padding: $spacing $spacing-double;
+    padding-inline: $spacing-double;
   }
 
   .hel-icon {
@@ -27,10 +27,12 @@
 
 .breadcrumb__link {
   display: none;
+  padding-block: $spacing-half;
   text-decoration: underline;
 
   @include breakpoint($breakpoint-m) {
     display: block;
+    padding-block: $spacing;
   }
 
   &:hover {

src/scss/06_components/navigation/_full-pagination.scss

@@ -1,3 +1,5 @@
+$-button-height: 2px + $spacing + get-font-size('button', $unremify: true) * 1.15 + $spacing + 2px; // border + padding + font-size * hds-button line-height + padding + border
+
 .hds-pagination-container {
   margin-top: $spacing-double;
   text-align: center;
@@ -9,7 +11,7 @@
 
 .hds-pagination {
   --active-page-background-color: var(--color-black);
-  --link-height: 40px;
+  --link-height: #{$wcag-touch-target-size-aaa};
 
   @include font('body');
   display: inline-block; // Allows centering.
@@ -22,11 +24,12 @@
   &::before {
     @include font('button');
     speak: never; // Removes this pseudo-element from screen readers where supported.
+    /* stylelint-disable-next-line order/properties-alphabetical-order */
     content: attr(data-next); // Trick to keep floating element same size as btn--next.
     content: attr(data-next) / ''; // Removes this pseudo-element from screen readers where supported.
     display: block;
     float: right; // Floated pseudo-element wraps the inline ul around it.
-    line-height: 60px;
+    line-height: $-button-height;
     padding-left: 34px; // 8px gap + 2px button border + 8px button padding + 16px span padding
     padding-right: 46px; // 4px gap + 24px icon + 8px icon margin + 8px button padding + 2px button border
     transform: scaleY(-1); // Helps debugging text position
@@ -72,19 +75,20 @@
   justify-content: center; // Center the li-elements.
   list-style: none;
   margin-bottom: 0;
-  margin-top: 10px;
+  margin-top: 0;
   padding: 0;
+  padding-bottom: 5px;
   transform: scaleY(-1); // Flip the element back from upside down.
 }
 
 .hds-pagination__item-link {
   align-items: center;
-  border-radius: 21px;
+  border-radius: calc(var(--link-height) / 2);
   color: var(--color-black-90);
   display: flex;
   height: var(--link-height);
   justify-content: center;
-  min-width: 40px; // This is different from hds-core since we are using border-box sizing and not content-box.
+  min-width: var(--link-height); // This is different from hds-core since we are using border-box sizing and not content-box.
   padding-left: var(--spacing-3-xs);
   padding-right: var(--spacing-3-xs);
   text-decoration: none;

src/scss/06_components/navigation/_header-bottom-navigation.scss

@@ -1,6 +1,11 @@
 $-main-nav-spacing: 20px;
 $-main-nav-dropdown-padding: $-main-nav-spacing;
 
+// Site name padding math
+$-site-name-original-padding-top: $spacing-and-half; // This was the original design padding.
+$-site-name-padding-top: $wcag-touch-target-size-aaa - get-line-height('special.site_name', $unremify: true); // Line-height and padding should sum up to the touch target size.
+$-site-name-container-padding-top: $-site-name-original-padding-top - $-site-name-padding-top; // The remaining original padding should be added to the container.
+
 .header-bottom {
   background-color: $color-white;
 
@@ -31,7 +36,7 @@ $-main-nav-dropdown-padding: $-main-nav-spacing;
 
   .site-name__container {
     display: none;
-    padding-top: $spacing-and-half;
+    padding-top: $-site-name-container-padding-top;
 
     @include breakpoint($breakpoint-l) {
       display: flex;
@@ -40,6 +45,7 @@ $-main-nav-dropdown-padding: $-main-nav-spacing;
 
   .site-name__link {
     @include font('special.site_name');
+    padding-top: $-site-name-padding-top;
     text-decoration: none;
 
     &:hover,

src/scss/06_components/navigation/_header-top-navigation.scss

@@ -20,7 +20,7 @@ $-header-top-height: calc(#{2 * $-header-top-padding} + #{$-header-top-line-heig
     background-color: $color-black-5;
     display: flex;
     justify-content: flex-end;
-    padding: $-header-top-padding $spacing-double;
+    padding: 0 $spacing-double;
   }
 
   .menu {
@@ -31,7 +31,17 @@ $-header-top-height: calc(#{2 * $-header-top-padding} + #{$-header-top-line-heig
   }
 
   .menu__item + .menu__item {
-    margin-inline-start: $spacing;
+    margin-inline-start: $spacing-quarter; // Visual space between menu items is still $spacing, but we want a little of the space to be inside the padding. 6px + $spacing-quarter + 6px = 16px
+  }
+
+  .menu__link {
+    display: inline-block;
+    padding-block: $-header-top-padding; // This sets the link clickable area to be big enough for a11y.
+    padding-inline: 6px; // Visual space between menu items is still $spacing, but we want a little of the space to be inside the padding. 6px + $spacing-quarter + 6px = 16px
+  }
+
+  .menu__item:last-child .menu__link {
+    padding-inline-end: 0;
   }
 
   .link-to-site-frontpage {

src/scss/06_components/navigation/_language-switcher.scss

@@ -1,18 +1,34 @@
+$-language-link-font: 'small';
+$-padding-size: ($wcag-touch-target-size-aaa - get-line-height($-language-link-font, $unremify: true) ) * 0.5; // Lets calculate the padding size for the language link based on the line-height of the chosen font.
+$-current-border-size: 3px;
+
 .language-link {
   @include navigation_link_defaults;
-  @include font('small');
+  @include font($-language-link-font);
   color: $color-black-90;
+  display: inline-block;
   margin-left: $spacing-half;
   margin-right: $spacing-half;
+  padding-block: $-padding-size;
 
   &:first-child {
     margin-left: 0;
   }
 
   &[aria-current='true'] {
-    border-bottom: 3px solid $color-black-90;
     cursor: default;
+    position: relative;
     text-decoration: none;
+
+    &::before {
+      border-bottom: $-current-border-size solid $color-black-90;
+      bottom: $-padding-size - $-current-border-size;
+      content: '';
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
   }
 
   &.is-disabled {

src/scss/06_components/navigation/_sidebar-menu.scss

@@ -1,5 +1,8 @@
-$inner-item-spacing: 5px;
+$-inner-item-spacing: 5px;
 $-outline-width: 3px;
+$-menu-item-font: 'body';
+$-menu-item-padding: 0.5 * ($wcag-touch-target-size-aaa - get-line-height($-menu-item-font, $unremify: true)); // Adjust padding to fit the touch target size
+$-menu-item-margin: (2 * $-inner-item-spacing - $-menu-item-padding); // Adjust margin from original $-inner-item-spacing to compensate for larger padding
 
 .layout-sidebar-first {
   display: none;
@@ -52,6 +55,7 @@ $-outline-width: 3px;
     &.sidebar-navigation__title-link--unpublished {
       color: var(--color-error);
 
+      /* stylelint-disable-next-line max-nesting-depth */
       &::before {
         background-color: var(--color-error);
       }
@@ -120,7 +124,7 @@ $-outline-width: 3px;
   }
 
   .menu__item {
-    @include font('body');
+    @include font($-menu-item-font);
 
     &.menu__item--active-trail {
       display: flex;
@@ -153,8 +157,8 @@ $-outline-width: 3px;
 
   .menu__item--nolink,
   .menu__link {
-    margin-block: $inner-item-spacing;
-    padding: $inner-item-spacing $spacing-quarter;
+    margin-block: $-menu-item-margin;
+    padding: $-menu-item-padding $spacing-quarter;
     position: relative;
     width: 100%;
 
@@ -185,11 +189,11 @@ $-outline-width: 3px;
     .menu__link[aria-current='page']::before {
       background-color: $color-black;
       content: '';
-      height: calc(100% + (2 * #{$inner-item-spacing}));
+      height: calc(100% + (2 * #{$-menu-item-margin}));
       inset: 0;
       left: calc(-1 * #{$spacing} - 1px);
       position: absolute;
-      top: -$inner-item-spacing;
+      top: -$-menu-item-margin;
       width: $-outline-width;
     }
   }

src/scss/06_components/navigation/toggle/_nav-toggle.scss

@@ -58,22 +58,24 @@ $label-font: 'special.navigation.icon_label';
     grid-area: label;
   }
 
+  span[aria-hidden="true"]{
+    min-width: $wcag-touch-target-size-aaa; // We were already quite close to the minimum touch target size, so we just need to make sure it's at least this big
+  }
+
   &:hover,
   &:active,
   .nav-toggle__button:hover &,
   .nav-toggle__button:active & {
     text-decoration: underline;
   }
 
-  // stylelint-disable no-descending-specificity
   &:focus,
   &:active,
   .nav-toggle__button:focus &,
   .nav-toggle__button:active & {
     outline: 3px solid $color-black;
     outline-offset: -3px;
   }
-  // stylelint-enable no-descending-specificity
 
   &::before {
     // @include pseudo-icon('menu-hamburger', 32px, currentColor, block);
@@ -87,7 +89,6 @@ $label-font: 'special.navigation.icon_label';
   grid-area: link;
 }
 
-// stylelint-disable-next-line no-descending-specificity
 .nav-toggle .nav-toggle__label--close {
   visibility: hidden;
 }

src/scss/06_components/paragraphs/_accordion.scss

@@ -131,13 +131,16 @@
 }
 
 .js-accordion__button--toggle-all {
-  @include font('button');
+  $-button-font: 'button';
+  $-button-padding-block: 0.5 * ($wcag-touch-target-size-aaa - get-line-height($-button-font, $unremify: true)); // Adjust padding to fit the touch target size
+
+  @include font($-button-font);
   align-items: center;
   display: flex;
   inset-inline-end: -1px; // To adjust the positioning so that the element lines up nicely.
   margin-block-start: $spacing-half;
   margin-inline-start: auto;
-  padding: $spacing-half;
+  padding: $-button-padding-block $spacing-half;
 
   &:focus {
     outline: 3px solid $color-black;