@blateral/b.kit 2.8.4 → 3.0.1

package/esm/sections.news.js

@@ -1,32 +1,32 @@
-import { a as __makeTemplateObject, _ as __assign, e as __spreadArray, ac as Filter } from './Filter-19220970.js';
-import React__default, { forwardRef, useMemo, useState, useRef, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import { S as Section, m as mapToBgMode } from './Section-bd61eb2f.js';
-import { W as Wrapper } from './Wrapper-95108115.js';
-import { C as Copy, H as Heading, c as copyStyle } from './Copy-fd9e25c0.js';
-import { g as getColors, s as spacings, m as mq, c as getGlobals, a as getFonts } from './styles-1f1841ef.js';
-import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
-import { I as Image } from './Image-c67870d4.js';
-import { T as Tag } from './Tag-217cd89b.js';
+import { a as __makeTemplateObject, _ as __assign, e as __spreadArray, af as Filter } from './ButtonLeft-a9a132f5.js';
+import React__default, { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { S as Section, m as mapToBgMode } from './Section-ca6daed2.js';
+import { W as Wrapper } from './Wrapper-06db8e79.js';
+import { C as Copy, H as Heading, c as copyStyle } from './Copy-5a18e01f.js';
+import { g as getColors, s as spacings, m as mq, a as getFonts, c as getGlobals } from './styles-f3ba5bae.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-48cad3e8.js';
+import { G as Grid } from './Grid-cbd5e68c.js';
+import { I as Image } from './Image-e2018d39.js';
+import { T as Tag } from './Tag-f3f23d9b.js';
 import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
-import { L as Link } from './Link-6067a27f.js';
+import { L as Link } from './Link-d4a291af.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
-import { u as useMediaQuery } from './useMediaQuery-4c1b1fa6.js';
-import { u as useEqualSheetHeight } from './useEqualSheetHeight-60ff9de7.js';
-import { G as Grid } from './Grid-7b33e271.js';
+import { c as concat } from './concat-b6d6d978.js';
+import { u as useEqualSheetHeight } from './useEqualSheetHeight-80704864.js';
+import { u as useMediaQuery } from './useMediaQuery-c9fa1339.js';
 import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
 import { u as useScrollTo } from './useScrollTo-70af34bf.js';
-import { P as Pointer } from './Pointer-3e965d7b.js';
-import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
+import { P as Pointer } from './Pointer-41c10bba.js';
+import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-e7114d3e.js';
 import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
 import { u as useMounted } from './useMounted-1e4cc87b.js';
-import { T as Title, a as TableBlock } from './TableBlock-a65315ca.js';
-import { V as VideoCard } from './VideoCard-aa60fbe5.js';
-import './concat-ab3c66f2.js';
+import { T as Title$1, a as TableBlock } from './TableBlock-5aad5dd2.js';
+import { V as VideoCard } from './VideoCard-dc103fce.js';
 import './clamp-12d37b65.js';
 import 'react-dom/server';
-import './useCookieConsent-6661d419.js';
-import './ButtonGhost-fc9e7a75.js';
+import './useCookieConsent-4b667d40.js';
+import './ButtonGhost-476c3826.js';
 import './hexRgbConverter-edb91624.js';
 
 var Seperator = styled.div.withConfig({
@@ -61,6 +61,8 @@ var StyledCopy = styled(Copy).withConfig({
 })(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    text-transform: uppercase;\n    margin-bottom: ", "px;\n"], ["\n    text-transform: uppercase;\n    margin-bottom: ", "px;\n"])), spacings.nudge * 3);
 
 var NewsAuthorCard = function (_a) {
+  var _b;
+
   var label = _a.label,
       author = _a.author,
       avatar = _a.avatar,
@@ -80,7 +82,7 @@ var NewsAuthorCard = function (_a) {
     isInverted: isInverted
   }), React__default.createElement(AuthorContainer, null, avatar && React__default.createElement(Avatar, {
     src: avatar.src,
-    alt: avatar.alt
+    alt: (_b = avatar.alt) !== null && _b !== void 0 ? _b : ''
   }), React__default.createElement(Author, null, author && React__default.createElement(StyledCopy, {
     isInverted: isInverted,
     type: "copy-b"
@@ -94,61 +96,77 @@ var NewsAuthorCard = function (_a) {
 var NewsAuthorCard$1 = withLibTheme(NewsAuthorCard);
 var templateObject_1$7, templateObject_2$5, templateObject_3$3, templateObject_4$3, templateObject_5$3;
 
-var View = styled.div.withConfig({
+var View = styled.article.withConfig({
   displayName: "NewsCard__View",
   componentId: "sc-ahox9b-0"
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    position: relative;\n    text-decoration: none;\n    margin: 0;\n    padding: 0;\n"], ["\n    position: relative;\n    text-decoration: none;\n    margin: 0;\n    padding: 0;\n"])));
-var ImageLink = styled(Link).withConfig({
-  displayName: "NewsCard__ImageLink",
-  componentId: "sc-ahox9b-1"
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    display: block;\n    width: 100%;\n"], ["\n    display: block;\n    width: 100%;\n"])));
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    position: relative;\n    text-decoration: none;\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: ", "px;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            & > * {\n                color: ", ";\n            }\n        }\n    }\n"], ["\n    position: relative;\n    text-decoration: none;\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: ", "px;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            & > * {\n                color: ", ";\n            }\n        }\n    }\n"])), spacings.nudge * 3, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme).link.colorHoverInverted : getFonts(theme).link.colorHover;
+});
 var StyledImage$1 = styled(Image).withConfig({
   displayName: "NewsCard__StyledImage",
-  componentId: "sc-ahox9b-2"
-})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    overflow: hidden;\n    border-radius: ", ";\n"], ["\n    overflow: hidden;\n    border-radius: ", ";\n"])), function (_a) {
+  componentId: "sc-ahox9b-1"
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    overflow: hidden;\n    border-radius: ", ";\n    cursor: ", ";\n"], ["\n    overflow: hidden;\n    border-radius: ", ";\n    cursor: ", ";\n"])), function (_a) {
   var theme = _a.theme;
   return getGlobals(theme).sections.edgeRadius;
+}, function (_a) {
+  var onClick = _a.onClick;
+  return onClick && 'pointer';
 });
 var BorderPlaceholder = styled.div.withConfig({
   displayName: "NewsCard__BorderPlaceholder",
-  componentId: "sc-ahox9b-3"
-})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    border-top: 1px solid\n        ", ";\n"], ["\n    border-top: 1px solid\n        ", ";\n"])), function (_a) {
+  componentId: "sc-ahox9b-2"
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    border-top: 1px solid\n        ", ";\n"], ["\n    border-top: 1px solid\n        ", ";\n"])), function (_a) {
   var theme = _a.theme,
       hasBg = _a.hasBg;
   return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
 });
 var TitleLink = styled(Link).withConfig({
   displayName: "NewsCard__TitleLink",
+  componentId: "sc-ahox9b-3"
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n\n    * {\n        padding: 0;\n        margin: 0;\n        ", "\n    }\n"], ["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n\n    * {\n        padding: 0;\n        margin: 0;\n        ", "\n    }\n"])), copyStyle('copy-b', 'big'), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme)['copy-b'].big.colorInverted : getFonts(theme)['copy-b'].big.color;
+}, copyStyle('copy-b', 'big'));
+var Title = styled.div.withConfig({
+  displayName: "NewsCard__Title",
   componentId: "sc-ahox9b-4"
-})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n"], ["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n"])), copyStyle('copy-b', 'big'), function (_a) {
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            ", ";\n        }\n    }\n\n    * {\n        padding: 0;\n        margin: 0;\n        ", "\n    }\n"], ["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            ", ";\n        }\n    }\n\n    * {\n        padding: 0;\n        margin: 0;\n        ", "\n    }\n"])), copyStyle('copy-b', 'big'), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getFonts(theme)['copy-b'].big.colorInverted : getFonts(theme)['copy-b'].big.color;
-});
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      onClick = _a.onClick;
+  return onClick && css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n                    color: ", ";\n                    cursor: pointer;\n                "], ["\n                    color: ", ";\n                    cursor: pointer;\n                "])), isInverted ? getFonts(theme).link.colorHoverInverted : getFonts(theme).link.colorHover);
+}, copyStyle('copy-b', 'big'));
 var Head = styled.div.withConfig({
   displayName: "NewsCard__Head",
   componentId: "sc-ahox9b-5"
-})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    display: flex;\n\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 3, spacings.nudge * 3, spacings.nudge * 3);
-var Tags$1 = styled.div.withConfig({
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    order: 0;\n    display: flex;\n\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    margin-left: -4px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    order: 0;\n    display: flex;\n\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    margin-left: -4px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 3);
+var Tags$1 = styled.ul.withConfig({
   displayName: "NewsCard__Tags",
   componentId: "sc-ahox9b-6"
-})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    display: flex;\n    overflow: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    overflow: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    gap: ", "px;\n    padding: 4px;\n    overflow: scroll;\n    scrollbar-width: none;\n\n    z-index: 1;\n\n    &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n    }\n"], ["\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    gap: ", "px;\n    padding: 4px;\n    overflow: scroll;\n    scrollbar-width: none;\n\n    z-index: 1;\n\n    &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n    }\n"])), spacings.nudge);
 var PublishDate = styled(Copy).withConfig({
   displayName: "NewsCard__PublishDate",
   componentId: "sc-ahox9b-7"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    &:only-child {\n        margin-left: auto;\n    }\n"], ["\n    &:only-child {\n        margin-left: auto;\n    }\n"])));
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    &:only-child {\n        margin-left: auto;\n    }\n"], ["\n    &:only-child {\n        margin-left: auto;\n    }\n"])));
 var Main = styled.div.withConfig({
   displayName: "NewsCard__Main",
   componentId: "sc-ahox9b-8"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    max-width: 95%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 95%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    order: 1;\n    max-width: 95%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    order: 1;\n    max-width: 95%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
 var Text = styled(Copy).withConfig({
   displayName: "NewsCard__Text",
   componentId: "sc-ahox9b-9"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 6; /* number of lines to show */\n    line-clamp: 6;\n    -webkit-box-orient: vertical;\n\n    & > * {\n        margin: 0 !important;\n    }\n\n    & > p:not(:first-of-type) {\n        display: none;\n    }\n\n    & > ul,\n    & > ol,\n    & > table {\n        display: none;\n    }\n"], ["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 6; /* number of lines to show */\n    line-clamp: 6;\n    -webkit-box-orient: vertical;\n\n    & > * {\n        margin: 0 !important;\n    }\n\n    & > p:not(:first-of-type) {\n        display: none;\n    }\n\n    & > ul,\n    & > ol,\n    & > table {\n        display: none;\n    }\n"])));
-var Action = styled.div.withConfig({
-  displayName: "NewsCard__Action",
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 6; /* number of lines to show */\n    line-clamp: 6;\n    -webkit-box-orient: vertical;\n\n    & > * {\n        margin: 0 !important;\n    }\n\n    & > p:not(:first-of-type) {\n        display: none;\n    }\n\n    & > ul,\n    & > ol,\n    & > table {\n        display: none;\n    }\n"], ["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 6; /* number of lines to show */\n    line-clamp: 6;\n    -webkit-box-orient: vertical;\n\n    & > * {\n        margin: 0 !important;\n    }\n\n    & > p:not(:first-of-type) {\n        display: none;\n    }\n\n    & > ul,\n    & > ol,\n    & > table {\n        display: none;\n    }\n"])));
+var CardFooter = styled.div.withConfig({
+  displayName: "NewsCard__CardFooter",
   componentId: "sc-ahox9b-10"
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.nudge * 3);
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    order: 2;\n"], ["\n    order: 2;\n"])));
 var NewsCard = forwardRef(function (_a, ref) {
   var tags = _a.tags,
       onTagClick = _a.onTagClick,
@@ -158,11 +176,13 @@ var NewsCard = forwardRef(function (_a, ref) {
       image = _a.image,
       link = _a.link,
       isInverted = _a.isInverted,
-      action = _a.action,
       customTag = _a.customTag,
+      tagListAriaLabel = _a.tagListAriaLabel,
       className = _a.className,
-      hasBg = _a.hasBg;
+      hasBg = _a.hasBg,
+      action = _a.action;
   var globals = useLibTheme().globals;
+  var uniqueId = useId();
   var publishedAt = '';
 
   if (publishDate) {
@@ -172,9 +192,23 @@ var NewsCard = forwardRef(function (_a, ref) {
 
   var handleTagClick = function (tag) {
     return onTagClick ? function (ev) {
+      ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
       ev === null || ev === void 0 ? void 0 : ev.preventDefault();
       onTagClick(tag);
-    } : undefined;
+    } : function (ev) {
+      ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+      ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+    };
+  };
+
+  var handleClick = function () {
+    if (!(link === null || link === void 0 ? void 0 : link.href)) return;
+
+    if (link.isExternal) {
+      window.open(link.href, '_blank', 'noopener');
+    } else {
+      window.location.href = link.href;
+    }
   };
 
   var filteredTags = useMemo(function () {
@@ -184,17 +218,44 @@ var NewsCard = forwardRef(function (_a, ref) {
   }, [tags]);
   return React__default.createElement(View, {
     ref: ref,
-    className: className
-  }, (image === null || image === void 0 ? void 0 : image.small) ? React__default.createElement(ImageLink, __assign({}, link, {
-    ariaLabel: title
-  }), React__default.createElement(StyledImage$1, __assign({}, image, {
-    coverSpace: true,
+    className: className,
+    "aria-labelledby": uniqueId,
     isInverted: isInverted
-  }))) : React__default.createElement(BorderPlaceholder, {
+  }, (image === null || image === void 0 ? void 0 : image.small) ? React__default.createElement(StyledImage$1, __assign({}, image, {
+    coverSpace: true,
+    isInverted: isInverted,
+    onClick: (link === null || link === void 0 ? void 0 : link.href) ? handleClick : undefined
+  })) : React__default.createElement(BorderPlaceholder, {
     hasBg: hasBg
-  }), React__default.createElement(Head, {
+  }), React__default.createElement(Main, null, title && React__default.createElement(React__default.Fragment, null, action ? React__default.createElement(Title, {
+    isInverted: isInverted,
+    "data-sheet": "title",
+    "aria-label": title,
+    onClick: (link === null || link === void 0 ? void 0 : link.href) ? handleClick : undefined
+  }, React__default.createElement("h3", {
+    id: uniqueId
+  }, title)) : React__default.createElement(TitleLink, __assign({}, link, {
+    isInverted: isInverted,
+    ariaLabel: title,
+    dataSheet: "title"
+  }), React__default.createElement("h3", {
+    id: uniqueId
+  }, title))), text && React__default.createElement(Text, {
+    isInverted: isInverted,
+    type: "copy",
+    innerHTML: text,
+    "data-sheet": "text",
+    size: "medium"
+  })), action && React__default.createElement(CardFooter, null, action({
+    isInverted: isInverted,
+    link: link,
+    title: concat(['Read article', title], ': '),
+    clickHandler: handleClick
+  })), React__default.createElement(Head, {
     "data-sheet": "head"
-  }, isValidArray(filteredTags, false) && React__default.createElement(Tags$1, null, filteredTags.map(function (tag, i) {
+  }, isValidArray(filteredTags, false) && React__default.createElement(Tags$1, {
+    "aria-label": tagListAriaLabel || 'News categories'
+  }, filteredTags.map(function (tag, i) {
     if (customTag) {
       return customTag({
         key: i,
@@ -205,32 +266,23 @@ var NewsCard = forwardRef(function (_a, ref) {
         clickHandler: handleTagClick(tag)
       });
     } else {
-      return React__default.createElement(Tag, {
-        key: i,
+      return React__default.createElement("li", {
+        key: i
+      }, React__default.createElement(Tag, {
         isInverted: isInverted,
         name: tag.name,
         link: tag.link,
         onClick: handleTagClick(tag)
-      });
+      }));
     }
   })), publishedAt && React__default.createElement(PublishDate, {
     size: "small",
     renderAs: "div",
     isInverted: isInverted
-  }, publishedAt)), React__default.createElement(Main, null, title && React__default.createElement(TitleLink, __assign({}, link, {
-    ariaLabel: title,
-    isInverted: isInverted,
-    dataSheet: "title"
-  }), title), text && React__default.createElement(Text, {
-    isInverted: isInverted,
-    type: "copy",
-    innerHTML: text,
-    "data-sheet": "text",
-    size: "medium"
-  })), action && React__default.createElement(Action, null, action(isInverted)));
+  }, publishedAt)));
 });
 NewsCard.displayName = 'NewsCard';
-var templateObject_1$6, templateObject_2$4, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1$6, templateObject_2$4, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
 
 var TagContainer = styled.div.withConfig({
   displayName: "NewsOverview__TagContainer",
@@ -542,7 +594,9 @@ var NewsOverview = function (_a) {
       },
       isActive: selectedTags.indexOf(tag) !== -1
     }, tag));
-  })), React__default.createElement(News$1, null, visibleNews.map(function (item, i) {
+  })), React__default.createElement(News$1, {
+    "aria-label": "Neuigkeiten-\u00DCbersicht"
+  }, visibleNews.map(function (item, i) {
     var _a;
 
     return React__default.createElement(NewsItem$1, {
@@ -657,7 +711,10 @@ var NewsFooter = function (_a) {
   }, React__default.createElement(Wrapper, {
     addWhitespace: true,
     clampWidth: "small"
-  }, React__default.createElement(Grid.Row, null, news === null || news === void 0 ? void 0 : news.filter(function (_, i) {
+  }, React__default.createElement(Grid.Row, {
+    asList: true,
+    ariaLabel: "Weitere News"
+  }, news === null || news === void 0 ? void 0 : news.filter(function (_, i) {
     return i < visibleRows * itemsPerRow;
   }).map(function (item, i) {
     var _a;
@@ -666,7 +723,8 @@ var NewsFooter = function (_a) {
       medium: {
         span: 6 / 12
       },
-      key: "".concat(i, "_news_").concat(item.title)
+      key: "".concat(i, "_news_").concat(item.title),
+      ariaLabel: item.title
     }, React__default.createElement(NewsCard, __assign({
       key: i,
       ref: cardRefs[i]
@@ -722,12 +780,15 @@ var NewsImages = function (_a) {
   }, React__default.createElement(Grid.Row, null, (_b = images === null || images === void 0 ? void 0 : images.filter(function (img) {
     return img.small;
   })) === null || _b === void 0 ? void 0 : _b.map(function (img, i) {
+    var _a;
+
     return React__default.createElement(Grid.Col, {
       key: i,
       semilarge: {
         span: img.isFull ? 12 / 12 : 6 / 12
       }
     }, React__default.createElement(StyledImage, __assign({}, img, {
+      alt: (_a = img.alt) !== null && _a !== void 0 ? _a : '',
       coverSpace: true,
       isInverted: isInverted
     })));
@@ -756,7 +817,7 @@ var MetaBlock = styled.div.withConfig({
   displayName: "NewsIntro__MetaBlock",
   componentId: "sc-zz6rn6-4"
 })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    flex: 1 0 auto;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    align-items: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    flex: 1 0 auto;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    align-items: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 3);
-var StyledTitle = styled(Title).withConfig({
+var StyledTitle = styled(Title$1).withConfig({
   displayName: "NewsIntro__StyledTitle",
   componentId: "sc-zz6rn6-5"
 })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    max-width: ", ";\n"], ["\n    max-width: ", ";\n"])), function (_a) {
@@ -775,6 +836,8 @@ var ContentBlock$1 = styled(Copy).withConfig({
 }, spacings.spacer);
 
 var NewsIntro = function (_a) {
+  var _b;
+
   var anchorId = _a.anchorId,
       tags = _a.tags,
       meta = _a.meta,
@@ -784,10 +847,10 @@ var NewsIntro = function (_a) {
       bgMode = _a.bgMode,
       customTag = _a.customTag;
 
-  var _b = useLibTheme(),
-      globals = _b.globals,
-      colors = _b.colors,
-      theme = _b.theme;
+  var _c = useLibTheme(),
+      globals = _c.globals,
+      colors = _c.colors,
+      theme = _c.theme;
 
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
@@ -839,6 +902,7 @@ var NewsIntro = function (_a) {
     type: "copy-b",
     innerHTML: text
   })), (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(Image, __assign({}, image, {
+    alt: (_b = image.alt) !== null && _b !== void 0 ? _b : '',
     coverSpace: true,
     allowEdgeRadius: true,
     isInverted: isInverted
@@ -892,7 +956,9 @@ var NewsList = function (_a) {
     bgMode: mapToBgMode(bgMode, true)
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(News, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }, React__default.createElement(News, {
+    "aria-label": "News-Liste"
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     var _a;
 
     return React__default.createElement(NewsItem, {
@@ -937,7 +1003,9 @@ var TableWrapper = styled(Wrapper).withConfig({
 var NewsTable = function (_a) {
   var anchorId = _a.anchorId,
       bgMode = _a.bgMode,
-      tableItems = _a.tableItems;
+      tableItems = _a.tableItems,
+      ariaControlLeft = _a.ariaControlLeft,
+      ariaControlRight = _a.ariaControlRight;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full' || isInverted;
@@ -952,7 +1020,9 @@ var NewsTable = function (_a) {
     return React__default.createElement(TableBlock, __assign({}, item, {
       key: i,
       hasBack: hasBg,
-      isInverted: isInverted
+      isInverted: isInverted,
+      ariaControlLeft: ariaControlLeft,
+      ariaControlRight: ariaControlRight
     }));
   })));
 };
@@ -999,7 +1069,10 @@ var NewsVideo = function (_a) {
       bgImage = _a.bgImage,
       embedId = _a.embedId,
       playIcon = _a.playIcon,
-      consentText = _a.consentText,
+      _b = _a.consentText,
+      consentText = _b === void 0 ? 'Für die Wiedergabe von Videos muss der Nutzung von Cookies & Daten zugestimmt werden.' : _b,
+      _c = _a.playBtnAriaLabel,
+      playBtnAriaLabel = _c === void 0 ? 'Play video' : _c,
       consentAction = _a.consentAction,
       onPlayClick = _a.onPlayClick,
       bgMode = _a.bgMode;
@@ -1017,6 +1090,7 @@ var NewsVideo = function (_a) {
   }, embedId && bgImage && React__default.createElement(VideoCard, {
     bgImage: bgImage,
     embedId: embedId,
+    playBtnAriaLabel: playBtnAriaLabel,
     playIcon: playIcon,
     consentText: consentText,
     consentAction: consentAction,