copyright

gfi-ihk-2024/stories/_global/styles/main.scss

@@ -140,3 +140,15 @@ img {
   display: none;
 }
 
+// Only for Screenreaders
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js

@@ -13,7 +13,9 @@ export const createElectionResultListItem =
     topBox.href = '#';
     const imageBox = createElement('div', ['image-box'], null, topBox);
     createImage(image, 310, 310, '', [], imageBox);
-    createElement('span', ['copyright'], name, imageBox);
+    const copy = createElement('span', ['copyright'], name, imageBox);
+    copy.setAttribute("aria-hidden", "true");
+    createElement('span', ['sr-only'], name, imageBox);
     createElement('h3', [], name, topBox);
 
     const textBox = createElement('div', ['text-box'], null, electionResultListItem);

gfi-ihk-2024/stories/components/gallery/gallery.js

@@ -71,7 +71,8 @@ class IHKGallery {
     const a = $('<a href="' + first.data('full') + '" />').attr('data-index', 0).appendTo(first);
     const img = $('<img alt="' + first.attr("alt") + '" />').appendTo(a);
     if (first.data('copyright')) {
-      $('<span class="copyright">' + first.data('copyright') + '</span>').appendTo(a);
+      $('<span class="copyright" aria-hidden="true">' + first.data('copyright') + '</span>').appendTo(a);
+      $('<span class="sr-only">' + first.data('copyright') + '</span>').appendTo(a);
     }
 
     first.find('.image-description').appendTo(this.wrapper);

gfi-ihk-2024/stories/components/teaser/TeaserComponent.js

@@ -55,7 +55,9 @@ export const createTeaser = ({
     createImage(src, imageWidth, imageHeight, 'Teaser-Bild', [], imageBox);
 
     if (copyright && copyright.length > 0) {
-      createElement('span', ['copyright'], copyright, imageBox);
+      const copy = createElement('span', ['copyright'], copyright, imageBox);
+      copy.setAttribute("aria-hidden", "true");
+      createElement('span', ['sr-only'], copyright, imageBox);
     }
   }
   else if ((type === 'chart' && chartTitle && chartTitle.length > 0) || ((!imageSrc || imageSrc.length === 0) && type !== 'text' && chartTitle && chartTitle.length > 0)) {

gfi-ihk-2024/stories/components/video/VideoComponent.js

@@ -17,7 +17,9 @@ export const createVideo = ({
   }
 
   if (copyright && copyright.length > 0) {
-    createElement('span', ['copyright'], copyright, videoBox);
+    const copy = createElement('span', ['copyright'], copyright, videoBox);
+    copy.setAttribute("aria-hidden", "true");
+    createElement('span', ['sr-only'], copyright, videoBox);
   }
   if (caption && caption.length > 0) {
     createElement('figcaption', [], caption, figure);

gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js

@@ -46,7 +46,9 @@ export const createElectionDetail =
 
     const imageContainer = createElement('div', ['election-detail--image-container'], null, text);
     createImage(image, 545, 526, '', [], imageContainer);
-    createElement('span', ['copyright'], name, imageContainer);
+      const copyright = createElement('span', ['copyright'], name, imageContainer);
+      copyright.setAttribute("aria-hidden", "true");
+      createElement('span', ['sr-only'], name, imageContainer);
     const textbox = createElement('div', ['text-box'], null, text);
     createElement('h1', [], name, textbox);
     createElement('p', ['subheadline'], subheadline, textbox);

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -108,7 +108,9 @@ export const createMarketingHeader =
       if (slideData.imageSrc && slideData.imageSrc.length > 0) {
         const imageBox = createElement('div', ['image-box'], null, outer);
         createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
-        createElement('span', ['copyright'], 'Copyright-Angabe', imageBox);
+        const copyright = createElement('span', ['copyright'], 'Copyright-Angabe', imageBox);
+        copyright.setAttribute("aria-hidden", "true");
+        createElement('span', ['sr-only'], 'Copyright-Angabe', imageBox);
         if (contextBoxContentImg) {
           const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
           createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -24,6 +24,14 @@ section.marketingheader{
           height:auto;
         }
       }
+      .copyright {
+        @media(max-width: 900px) {
+          left: calc(100% - 30px);
+        }
+        @media(max-width: 767px) {
+          left: calc(100% - 20px);
+        }
+      }
     }
   }
   .text-box{
@@ -516,7 +524,7 @@ section.marketingheader{
     }
     .rotation {
       padding:0;
-      @media screen and (max-width: 1000px) {
+      @media screen and (max-width: 999px) {
         .slide:not(.text-only) .text-box {
           padding: 16px 0;
         }
@@ -840,14 +848,14 @@ section.marketingheader{
         min-width: 324px;
       }
     }
-    @media (min-width: 1001px) {
+    @media (min-width: 1000px) {
       .slider .text-box:not(:first-child)::before {
         border-top-right-radius: 16% 50% !important;
         border-bottom-right-radius: 16% 50% !important;
         margin: -15% -8% -15% 20px;
       }
     }
-    @media (max-width:1000px){
+    @media (max-width:999px){
       .slider{
         background-color: white;
         

gfi-ihk-2024/stories/sections/slider/SliderComponent.js

@@ -23,7 +23,9 @@ export const createSlider =
         const imageBox = createElement('div', ['image-box'], null, outer);
         createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
         if (slideData.copyright && slideData.copyright.length > 0) {
-          createElement('span', ['copyright'], slideData.copyright, imageBox);
+          const copy = createElement('span', ['copyright'], slideData.copyright, imageBox);
+          copy.setAttribute("aria-hidden", "true");
+          createElement('span', ['sr-only'], slideData.copyright, imageBox);
         }
         if (contextBoxContentImg) {
           const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);

gfi-ihk-2024/stories/sections/slider/slider.js

@@ -428,7 +428,8 @@ class IHKSlider {
         nextItem.append(loadedImage.clone());
         // Copyright für Next-Wrapper
         if (ib.attr('data-copyright')) {
-          $('<span class="copyright">').html(ib.attr('data-copyright')).appendTo(nextItem);
+          $('<span class="copyright" aria-hidden="true">').html(ib.attr('data-copyright')).appendTo(nextItem);
+          $('<span class="sr-only">').html(ib.attr('data-copyright')).appendTo(nextItem);
         }
         const prevItem = t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box');
         prevItem.append(loadedImage.clone());

gfi-ihk-2024/stories/sections/timeline/TimelineComponent.js

@@ -56,7 +56,9 @@ export const createTimeline = ({
               createElement('span', [], item.image.caption, caption);
             }
             if (item.image.copyright) {
-              createElement('span', ['copyright'], item.image.copyright, caption);
+              const copyright = createElement('span', ['copyright'], item.image.copyright, caption);
+              copyright.setAttribute("aria-hidden", "true");
+              createElement('span', ['sr-only'], item.image.copyright, caption);
             }
           }
         }