diff --git a/gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js b/gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js index 3dbd43b..c709bed 100644 --- a/gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js +++ b/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; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss b/gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss index e7ae1da..6794129 100644 --- a/gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss +++ b/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; + } } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js b/gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js index cdc2a9c..8d8f448 100644 --- a/gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js +++ b/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; diff --git a/gfi-ihk-2024/stories/components/document-list/document-list.scss b/gfi-ihk-2024/stories/components/document-list/document-list.scss index 22ee421..9857a07 100644 --- a/gfi-ihk-2024/stories/components/document-list/document-list.scss +++ b/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; + } } diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js index 2afd5f0..1e95680 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js +++ b/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; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss index 3a41bb7..9f45144 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss +++ b/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; + } } diff --git a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js b/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js index f27e168..9272694 100644 --- a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js +++ b/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; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss b/gfi-ihk-2024/stories/components/howto-list/howto-list.scss index ce51e12..3c3cdaf 100644 --- a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss +++ b/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; diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js index 4f4a9ff..b21e7e9 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js +++ b/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; } } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss index 6fce5d7..8549472 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss +++ b/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; + } }