link refactoring

gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js

@@ -6,7 +6,7 @@ export const createEventTeaser = ({
   event = EventTeaserData,
   isExtended = false,
 }) => {
-  const a = createElement('a', ['event-teaser']);
+  const a = createElement('div', ['event-teaser']);
   const dateBox = createElement('div', ['date-box'], null, a);
   const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
 
@@ -36,7 +36,9 @@ export const createEventTeaser = ({
     }
   }
 
-  a.href = event.link;
+  const teaserLink = createElement('a', ['teaser--link'], '', a);
+  teaserLink.href = event.link;
+  teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
 
   return a;
 }

gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss

@@ -1,13 +1,14 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
 
-.event-teaser, .events-list a:not(.btn) {
+.event-teaser {
   background-color: white;
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   transition: 0.3s ease;
   text-decoration: none;
+  position: relative;
   @include focus-visible;
 
   &:hover {
@@ -154,4 +155,13 @@
       }
     }
   }
+
+  .teaser--link {
+     position: absolute;
+     left: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+     z-index: 10;
+   }
 }

gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js

@@ -7,8 +7,8 @@ export const createDocumentList = ({
 }) => {
   const section = createElement('section', ['document-list']);
   docs.map((doc) => {
-    const a = createElement('a', ['document-list-item', doc.icon], null, section);
-    a.href = doc.link;
+    const a = createElement('div', ['document-list-item', doc.icon], null, section);
+    // a.href = doc.link;
 
     if (doc.imageSrc && doc.imageSrc.length > 0) {
       const imageBox = createElement('div', ['image-box'], null, a);
@@ -28,6 +28,9 @@ export const createDocumentList = ({
     if (doc.details && doc.details.length > 0) {
       createElement('p', ['details'], doc.details, textBox);
     }
+    const teaserLink = createElement('a', ['teaser--link'], '', a);
+    teaserLink.href = doc.link;
+    teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
   })
 
   return section;

gfi-ihk-2024/stories/components/document-list/document-list.scss

@@ -141,4 +141,12 @@
   .kicker {
     margin-top: -4px;
   }
+  .teaser--link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+  }
 }

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js

@@ -11,7 +11,7 @@ export const createEventTeaserLarge = ({
     target: '_self',
   },
 }) => {
-  const a = createElement('a', ['event-teaser-large']);
+  const a = createElement('div', ['event-teaser-large']);
   if (widemode) {
     a.classList.add('widemode');
   }
@@ -46,7 +46,9 @@ export const createEventTeaserLarge = ({
     blueBox.classList.add('background-image');
   }
 
-  a.href = event.link;
+  const teaserLink = createElement('a', ['teaser--link'], '', a);
+  teaserLink.href = event.link;
+  teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
 
   return a;
 }

gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -1,7 +1,7 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
 
-.event-teaser-large, .events-list-large a:not(.btn) {
+.event-teaser-large {
   background-color: white;
   border-radius: 16px;
   overflow: hidden;
@@ -11,6 +11,7 @@
   text-decoration: none;
   min-height:400px;
   flex-wrap: wrap;
+  position: relative;
   &:not(.widemode){
     flex-wrap: wrap;
     align-content: baseline;
@@ -270,4 +271,13 @@
       }
     }
   }
+
+  .teaser--link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+  }
 }

gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js

@@ -15,15 +15,16 @@ export const createHowToList =
     const ul = createElement('ul', [], null, div);
     listItems.map((item) => {
       const li = createElement('li', [], null, ul);
-      const a = createElement('a', [], null, li);
-      createElement('div', ['icon-box', item.icon], null, a);
-      createElement('h3', [], item.headline, a);
-      createElement('p', [], item.text, a);
-      createElement('span', [], item.more, a);
-      a.href = item.link;
+      createElement('div', ['icon-box', item.icon], null, li);
+      createElement('h3', [], item.headline, li);
+      createElement('p', [], item.text, li);
+      createElement('span', [], item.more, li);
       if (item.copy && item.copy.length > 0) {
         createElement('p', [], item.copy, li);
       }
+      const teaserLink = createElement('a', ['teaser--link'], '', li);
+      teaserLink.href = item.link;
+      teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
     })
     return div;
   }

gfi-ihk-2024/stories/components/howto-list/howto-list.scss

@@ -44,9 +44,13 @@
       padding: 0 0 32px 0;
       position: relative;
     }
-    a {
-      display: block;
-      text-decoration: none;
+    .teaser--link {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
     }
     h3 {
       margin-top: 0;

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js

@@ -10,17 +10,20 @@ export const createMiniTeaser = ({
   buttonlabel = 'IHK-Newsletter sichern',
   backgroundImage = null,
 }) => {
-  
+
   if (type === 'standard') {
-    const tile = createElement('a', ['tile',  'mini-teaser', type], null);
-    tile.href = link;
+    const tile = createElement('div', ['tile',  'mini-teaser', type], null);
+    // tile.href = link;
     const textBox = createElement('div', ['text-box'], null, tile);
     createElement('div', ['category','like-h5'], category, textBox);
     createElement('div', ['title','like-h4'], title, textBox);
+    const teaserLink = createElement('a', ['teaser--link'], '', tile);
+    teaserLink.href = link;
+    teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
     return tile;
-  }else{
-    const tile = createElement('a', ['tile',  'mini-teaser', type], null);
-    tile.href = link;
+  } else {
+    const tile = createElement('div', ['tile',  'mini-teaser', type], null);
+    // tile.href = link;
     if (backgroundImage && backgroundImage.length > 0) {
       tile.style = 'background-image: url(' + backgroundImage + ');';
       tile.classList.add('background-image');
@@ -30,11 +33,14 @@ export const createMiniTeaser = ({
       createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
       createElement('div', ['title','like-h4'], title, textBox);
       textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel,iconPosition: 'icon-right', icon: null, preventClick: false}))
-    }else{
+    } else {
       createElement('div', ['title', 'noicon', 'like-h4'], title, textBox);
       textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null, preventClick: false}))
     }
-    
+    const teaserLink = createElement('a', ['teaser--link'], '', tile);
+    teaserLink.href = link;
+    teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
+
     return tile;
   }
 }

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -154,6 +154,14 @@
     padding:0;
     margin:0;
   }
+  .teaser--link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+  }
 }