Merge pull request #766 from City-of-Helsinki/UHF-8530_remove_heading…

…s_from_links

UHF-8530 remove headings from links

src/scss/02_mixins/_typography_mixins.scss

@@ -28,3 +28,9 @@
     }
   }
 }
+
+// Adds heading related hyphens settings, useful when you want to fake certaing heading style
+@mixin heading-hyphens() {
+  hyphens: auto;
+  overflow-wrap: break-word;
+}

src/scss/04_elements/_typography.scss

@@ -14,8 +14,7 @@ h3,
 h4,
 h5,
 h6 {
-  hyphens: auto;
-  overflow-wrap: break-word;
+  @include heading-hyphens;
 }
 
 h1 {

src/scss/06_components/pages/_service.scss

@@ -21,6 +21,7 @@ $teaser-icon-size-desktop: 48px;
   }
 
   .service__title {
+    @include heading-hyphens;
     @include font('h4');
     margin: 0;
   }

src/scss/06_components/paragraphs/_content-cards.scss

@@ -46,7 +46,9 @@ $-card-spacing: $spacing-and-half;
 }
 
 .content-card__title {
+  @include heading-hyphens;
   @include font('h4');
+  display: block;
   margin-top: $spacing;
 }
 

src/scss/06_components/paragraphs/_list-of-links.scss

@@ -150,6 +150,7 @@ $-item-spacing: $spacing-triple;
   }
 
   .list-of-links__item__title {
+    @include heading-hyphens;
     @include font('h4');
     margin-block: 0;
     margin-inline-start: (100px + $spacing);

src/scss/06_components/paragraphs/_target-group-links.scss

@@ -45,6 +45,7 @@ $-title-spacing: calc(0.5 * (var(--icon-size) - var(--title-line-height))); // T
 }
 
 .target-group-link__title {
+  @include heading-hyphens;
   @include font('h4');
   grid-area: title;
   margin: 0;

templates/content/node--teaser.html.twig

@@ -72,19 +72,15 @@
 {%
   set classes = [
     'content-card',
-    'content-card--' ~ node.bundle|clean_class,
-    node.isPromoted() ? 'content-card--promoted',
-    node.isSticky() ? 'content-card--sticky',
     not node.isPublished() ? 'content-card--unpublished',
-    view_mode ? 'content-card--design-' ~ view_mode|clean_class,
   ]
 %}
 
 {% set link_title %}
   {{ title_prefix }}
-  <h3 class="content-card__title">
+  <span class="content-card__title">
     {{ label }}
-  </h3>
+  </span>
   {{ title_suffix }}
 {% endset %}
 
@@ -95,7 +91,8 @@
   'rel': 'bookmark',
 } %}
 
-<article{{ attributes.addClass(classes) }}>
+{# Role is removed from below to avoid populating UI with role="article" elements for accessibility #}
+<div{{ attributes.removeAttribute('role').addClass(classes) }}>
 
   <div class="content-card__image">
     {% if image.0 %}
@@ -107,4 +104,4 @@
 
   {{ link(link_title, node_url, link_attributes) }}
 
-</article>
+</div>

templates/module/helfi-news-item/news-teaser-generic.twig

@@ -7,7 +7,8 @@
   %}
 {% endif %}
 
-<div{{ attributes.addClass('news-listing__content', default_classes, class) }}">
+{# Role is removed from below to avoid populating UI with role="article" elements for accessibility #}
+<div{{ attributes.removeAttribute('role').addClass('news-listing__content', default_classes, class) }}">
   {# Short title or Title #}
   <{{ heading_level }} class="news-listing__title">
     {% set link_attributes = {

templates/module/helfi_tpr/tpr-service-channel-group.html.twig

@@ -1,8 +1,8 @@
 {%  set service_channel_group_heading_level = service_channel_group_heading_level|default('h3') %}
 
-<article class="service-channel service-channel--{{ type }}">
+<div class="service-channel service-channel--{{ type }}">
   <{{ service_channel_group_heading_level }} class="service-channel__type">
     {{ label }}
   </{{ service_channel_group_heading_level }}>
   {{ content }}
-</article>
+</div>

templates/module/helfi_tpr/tpr-service.html.twig

@@ -49,7 +49,7 @@
 
   <div{{ wrapper_attributes.addClass(service_classes) }}>
     <a href="{{ url('entity.tpr_service.canonical', { 'tpr_service': entity.id() }) }}" class="service__link">
-      <span class="service__title hyphenate">
+      <span class="service__title">
         {{ entity.label }}
       </span>
       {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %}

templates/paragraphs/paragraph--list-of-links-item.html.twig

@@ -49,7 +49,6 @@
 {% set text = content.field_list_of_links_link.0['#title'] %}
 {% set image = content.field_list_of_links_image %}
 {% set desc = content.field_list_of_links_desc.0 %}
-{% set list_of_links_paragraph_has_title = paragraph.hasTitle() %}
 {% set list_of_links_design = paragraph.getDesign() %}
 
 {% block paragraph %}
@@ -74,8 +73,7 @@
         ],
         'target': target_new ? '_blank' : null,
       } %}
-      {% set titleHeading = list_of_links_paragraph_has_title ? 'h3' : 'h2' %}
-      <{{titleHeading}} class="list-of-links__item__title">{{ link(link_title, url, link_attributes) }}</{{titleHeading}}>
+      <div class="list-of-links__item__title">{{ link(link_title, url, link_attributes) }}</div>
       {% if list_of_links_design == 'without-image' %}
         {% if desc %}
           <div class="list-of-links__item__desc">{{ desc }}</div>

templates/paragraphs/paragraph--target-group-link-item.html.twig

@@ -4,13 +4,13 @@
 
       <div class="target-group-link__icon">{{ content.field_icon }}</div>
 
-      <h3 class="target-group-link__title">{{
+      <div class="target-group-link__title">{{
           link(
             content.field_target_group_item_link.0['#title'],
             content.field_target_group_item_link.0['#url'],
             {'class': 'target-group-link__link'}
           )
-      }}</h3>
+      }}</div>
 
       {% if content.field_target_group_item_subtitle|render %}
         <div class="target-group-link__subtitle">