@blateral/b.kit 2.8.4 → 3.0.1

package/esm/sections.js

@@ -1,41 +1,41 @@
-import { a as __makeTemplateObject, e as __spreadArray, a6 as Minus, a5 as Plus, R as Info, _ as __assign, y as ArrowLeftRight, z as External, t as ArrowDown, G as Instagram, K as Play, L as LocationPin, v as ArrowRightGhost, x as ArrowLeftGhost, P as Phone, M as Mail } from './Filter-19220970.js';
-import { S as Section, m as mapToBgMode } from './Section-bd61eb2f.js';
-import { W as Wrapper, w as wrapperWhitespace } from './Wrapper-95108115.js';
-import { C as Copy, c as copyStyle, H as Heading } from './Copy-fd9e25c0.js';
+import { a as __makeTemplateObject, e as __spreadArray, a9 as Minus, a8 as Plus, $ as Info, _ as __assign, F as ArrowLeftRight, G as External, v as ArrowDown, J as Instagram, O as Play, L as LocationPin, x as ArrowRightGhost, z as ArrowLeftGhost, P as Phone, M as Mail } from './ButtonLeft-a9a132f5.js';
+import { S as Section, m as mapToBgMode } from './Section-ca6daed2.js';
+import { W as Wrapper, w as wrapperWhitespace } from './Wrapper-06db8e79.js';
+import { C as Copy, c as copyStyle, H as Heading } from './Copy-5a18e01f.js';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, forwardRef, useMemo, useContext, createRef } from 'react';
+import React__default, { useState, useRef, useEffect, forwardRef, useId, useMemo, useContext, createRef } from 'react';
 import styled, { css, ThemeContext } from 'styled-components';
-import { s as spacings, c as getGlobals, g as getColors, m as mq, w as withRange, a as getFonts, f as getSVGDataImg } from './styles-1f1841ef.js';
-import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
-import { a as generateFAQ, b as generateLocalBusiness } from './structuredData-abf610d8.js';
-import { g as gridSettings, G as Grid, a as getGridWidth } from './Grid-7b33e271.js';
-import { L as Link } from './Link-6067a27f.js';
+import { s as spacings, c as getGlobals, g as getColors, m as mq, w as withRange, a as getFonts, f as getSVGDataImg } from './styles-f3ba5bae.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-48cad3e8.js';
+import { a as generateFAQ, b as generatePriceList, c as generateLocalBusiness } from './structuredData-73bcbf07.js';
+import { g as gridSettings, G as Grid, a as getGridWidth } from './Grid-cbd5e68c.js';
+import { L as Link } from './Link-d4a291af.js';
 import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
-import { u as useEqualSheetHeight } from './useEqualSheetHeight-60ff9de7.js';
-import { T as Title$5, a as TableBlock } from './TableBlock-a65315ca.js';
-import { A as Actions } from './Actions-e29b5e75.js';
-import { I as IntroBlock, V as VideoBlock } from './VideoBlock-3f150172.js';
-import { I as Image } from './Image-c67870d4.js';
+import { u as useEqualSheetHeight } from './useEqualSheetHeight-80704864.js';
+import { T as Title$6, a as TableBlock } from './TableBlock-5aad5dd2.js';
+import { A as Actions } from './Actions-6859c932.js';
+import { I as IntroBlock, V as VideoBlock } from './VideoBlock-3c99c5fc.js';
+import { I as Image } from './Image-e2018d39.js';
+import { c as concat } from './concat-b6d6d978.js';
 import { u as useIE } from './useIE-a9c56989.js';
 import ReactDOMServer from 'react-dom/server';
-import { P as Pointer } from './Pointer-3e965d7b.js';
+import { P as Pointer } from './Pointer-41c10bba.js';
 import { u as useScrollTo } from './useScrollTo-70af34bf.js';
-import { e as getNavbarState, a as getFullNavbarHeights } from './Navigation-6581bcdf.js';
-import { a as useMediaQueries } from './useMediaQuery-4c1b1fa6.js';
-import { C as Callout } from './Callout-46f0bef0.js';
+import { e as getNavbarState, a as getFullNavbarHeights } from './Navigation-d7e14d09.js';
+import { a as useMediaQueries } from './useMediaQuery-c9fa1339.js';
+import { C as Callout } from './Callout-6436d270.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
 import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
 import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
-import { V as VideoCard } from './VideoCard-aa60fbe5.js';
-import { C as Control$1 } from './Control-56ec7872.js';
-import { u as useLeafletMap } from './useLeafletMap-fa0ab7d4.js';
-import './concat-ab3c66f2.js';
+import { V as VideoCard } from './VideoCard-dc103fce.js';
+import { C as Control$1 } from './Control-84268468.js';
+import { u as useLeafletMap } from './useLeafletMap-f9050715.js';
 import './clamp-12d37b65.js';
 import 'react-schemaorg';
-import './navigation-5216dbad.js';
-import './LanguageSwitcher-c9aa594a.js';
-import './useCookieConsent-6661d419.js';
-import './ButtonGhost-fc9e7a75.js';
+import './navigation-d3d2bf2e.js';
+import './LanguageSwitcher-19482399.js';
+import './useCookieConsent-4b667d40.js';
+import './ButtonGhost-476c3826.js';
 import './hexRgbConverter-edb91624.js';
 
 var AccordionContainer = styled.div.withConfig({
@@ -145,9 +145,7 @@ var Accordion = function (_a) {
     addWhitespace: true
   }, React__default.createElement(Grid.Row, {
     gutter: 0
-  }, React__default.createElement(Grid.Col, null, React__default.createElement(AccordionContainer, {
-    "aria-label": "Accordion Control Group Buttons"
-  }, items === null || items === void 0 ? void 0 : items.map(function (_a, i) {
+  }, React__default.createElement(Grid.Col, null, React__default.createElement(AccordionContainer, null, items === null || items === void 0 ? void 0 : items.map(function (_a, i) {
     var label = _a.label,
         text = _a.text,
         aside = _a.aside;
@@ -185,7 +183,7 @@ var templateObject_1$w, templateObject_2$s, templateObject_3$n, templateObject_4
 var View$8 = styled.div.withConfig({
   displayName: "Alert__View",
   componentId: "sc-1d5c0fb-0"
-})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    text-decoration: none;\n\n    position: relative;\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    text-decoration: none;\n\n    position: relative;\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"])), function (_a) {
+})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    position: relative;\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    text-decoration: none;\n\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:has(a):hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"], ["\n    position: relative;\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    text-decoration: none;\n\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:has(a):hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"])), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
@@ -217,17 +215,17 @@ var Content$5 = styled.div.withConfig({
   displayName: "Alert__Content",
   componentId: "sc-1d5c0fb-3"
 })(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    margin-top: ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge);
-var Title$4 = styled(Copy).withConfig({
+var Title$5 = styled(Copy).withConfig({
   displayName: "Alert__Title",
   componentId: "sc-1d5c0fb-4"
 })(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n    display: inline-block;\n"], ["\n    display: inline-block;\n"])));
-var ViewLink = styled(Link).withConfig({
-  displayName: "Alert__ViewLink",
+var TitleLink$3 = styled(Link).withConfig({
+  displayName: "Alert__TitleLink",
   componentId: "sc-1d5c0fb-5"
-})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    && {\n        margin: 0;\n    }\n\n    &:focus-within {\n        outline: dotted 2px\n            ", ";\n        outline-offset: 4px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    && {\n        margin: 0;\n    }\n\n    &:focus-within {\n        outline: dotted 2px\n            ", ";\n        outline-offset: 4px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"])), function (_a) {
+})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n    color: inherit;\n    cursor: pointer;\n    outline: none;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    && {\n        margin: 0;\n    }\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n    }\n"], ["\n    color: inherit;\n    cursor: pointer;\n    outline: none;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    && {\n        margin: 0;\n    }\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n    }\n"])), function (_a) {
   var isInverted = _a.isInverted,
       theme = _a.theme;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
 });
 
 var Alert = function (_a) {
@@ -251,7 +249,15 @@ var Alert = function (_a) {
     className: className
   }, React__default.createElement(Icon$4, null, customIcon ? customIcon({
     isInverted: isInverted
-  }) : React__default.createElement(Info, null)), React__default.createElement(MainLabel$1, null, title && React__default.createElement(Title$4, {
+  }) : React__default.createElement(Info, null)), React__default.createElement(MainLabel$1, null, title && (link === null || link === void 0 ? void 0 : link.href) ? React__default.createElement(TitleLink$3, __assign({}, link, {
+    ariaLabel: (link === null || link === void 0 ? void 0 : link.href) ? title : undefined,
+    isInverted: isInverted
+  }), React__default.createElement(Title$5, {
+    textColor: "inherit",
+    size: "medium",
+    type: "copy-b",
+    renderAs: "span"
+  }, title)) : React__default.createElement(Title$5, {
     textColor: "inherit",
     size: "medium",
     type: "copy-b"
@@ -262,9 +268,7 @@ var Alert = function (_a) {
   }), date && React__default.createElement(Copy, {
     size: "small",
     isInverted: isInverted
-  }, formattedDate)), link && React__default.createElement(ViewLink, __assign({}, link, {
-    ariaLabel: (link === null || link === void 0 ? void 0 : link.href) ? title : undefined
-  })));
+  }, formattedDate)));
 };
 var templateObject_1$v, templateObject_2$r, templateObject_3$m, templateObject_4$j, templateObject_5$h, templateObject_6$d;
 
@@ -284,7 +288,9 @@ var AlertList = function (_a) {
   var anchorId = _a.anchorId,
       items = _a.items,
       bgMode = _a.bgMode,
-      customIcon = _a.customIcon;
+      customIcon = _a.customIcon,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of card items with important news/informations' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
@@ -308,7 +314,9 @@ var AlertList = function (_a) {
     bgMode: mapToBgMode(bgMode, true)
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(List$3, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }, React__default.createElement(List$3, {
+    "aria-label": listAriaLabel
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     return React__default.createElement(ListItem$2, {
       key: i,
       itemsPerRow: itemsPerRow,
@@ -322,7 +330,7 @@ var AlertList = function (_a) {
 var AlertList$1 = withLibTheme(AlertList);
 var templateObject_1$u, templateObject_2$q;
 
-var StyledTitle$1 = styled(Title$5).withConfig({
+var StyledTitle$1 = styled(Title$6).withConfig({
   displayName: "Article__StyledTitle",
   componentId: "sc-1lrfo1r-0"
 })(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 880px;\n    }\n"], ["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 880px;\n    }\n"])), spacings.spacer, mq.semilarge);
@@ -399,7 +407,7 @@ var Article = function (_a) {
 var Article$1 = withLibTheme(Article);
 var templateObject_1$t, templateObject_2$p, templateObject_3$l;
 
-var ContactView = styled.div.withConfig({
+var ContactView = styled.figure.withConfig({
   displayName: "CallToAction__ContactView",
   componentId: "sc-1wdvzex-0"
 })(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 0 auto;\n    width: 100%;\n\n    text-align: left;\n    hyphens: auto;\n    overflow-wrap: break-word;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 0 auto;\n    width: 100%;\n\n    text-align: left;\n    hyphens: auto;\n    overflow-wrap: break-word;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.spacer, mq.semilarge, gridSettings.gutter);
@@ -417,6 +425,8 @@ var Description$3 = styled(Copy).withConfig({
 })(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n    text-align: center;\n\n    .icon-label {\n        flex-direction: column;\n    }\n\n    .icon-label > * + * {\n        margin-left: 0;\n        margin-top: ", "px;\n    }\n\n    & > * {\n        justify-content: center;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            justify-content: left;\n        }\n\n        .icon-label {\n            flex-direction: row;\n        }\n\n        .icon-label > * + * {\n            margin-left: ", "px;\n            margin-top: 0;\n        }\n    }\n"], ["\n    text-align: center;\n\n    .icon-label {\n        flex-direction: column;\n    }\n\n    .icon-label > * + * {\n        margin-left: 0;\n        margin-top: ", "px;\n    }\n\n    & > * {\n        justify-content: center;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            justify-content: left;\n        }\n\n        .icon-label {\n            flex-direction: row;\n        }\n\n        .icon-label > * + * {\n            margin-left: ", "px;\n            margin-top: 0;\n        }\n    }\n"])), spacings.nudge * 2, mq.semilarge, spacings.nudge * 2);
 
 var ContactBox = function (_a) {
+  var _b;
+
   var isInverted = _a.isInverted,
       description = _a.description,
       avatar = _a.avatar,
@@ -425,9 +435,10 @@ var ContactBox = function (_a) {
     className: className
   }, React__default.createElement(Avatar, {
     src: avatar === null || avatar === void 0 ? void 0 : avatar.src,
-    alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt,
+    alt: (_b = avatar === null || avatar === void 0 ? void 0 : avatar.alt) !== null && _b !== void 0 ? _b : '',
     isInverted: isInverted
   }), description && React__default.createElement(Description$3, {
+    renderAs: "figcaption",
     type: "copy",
     isInverted: isInverted,
     innerHTML: description
@@ -456,11 +467,11 @@ var StyledActions$4 = styled(Actions).withConfig({
 var NewsletterWrapper = styled.div.withConfig({
   displayName: "CallToAction__NewsletterWrapper",
   componentId: "sc-1wdvzex-6"
-})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: 400px;\n    }\n"], ["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: 400px;\n    }\n"])), spacings.spacer, mq.semilarge);
+})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: 400px;\n    }\n"], ["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: 400px;\n    }\n"])), spacings.spacer, mq.semilarge);
 var Badge = styled.div.withConfig({
   displayName: "CallToAction__Badge",
   componentId: "sc-1wdvzex-7"
-})(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n    display: none;\n    position: relative;\n    height: 241px;\n    width: 241px;\n    margin-left: auto;\n    margin-bottom: -135px;\n    z-index: 3;\n\n    @media ", " {\n        display: block;\n        margin-right: ", ";\n    }\n"], ["\n    display: none;\n    position: relative;\n    height: 241px;\n    width: 241px;\n    margin-left: auto;\n    margin-bottom: -135px;\n    z-index: 3;\n\n    @media ", " {\n        display: block;\n        margin-right: ", ";\n    }\n"])), mq.xlarge, 1440 * (1 / 28) + 'px');
+})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n    display: none;\n    position: relative;\n    height: 241px;\n    width: 241px;\n    margin-left: auto;\n    margin-bottom: -135px;\n    z-index: 3;\n\n    @media ", " {\n        display: block;\n        margin-right: ", ";\n    }\n"], ["\n    display: none;\n    position: relative;\n    height: 241px;\n    width: 241px;\n    margin-left: auto;\n    margin-bottom: -135px;\n    z-index: 3;\n\n    @media ", " {\n        display: block;\n        margin-right: ", ";\n    }\n"])), mq.xlarge, 1440 * (1 / 28) + 'px');
 var CallToAction = function (_a) {
   var anchorId = _a.anchorId,
       title = _a.title,
@@ -499,7 +510,9 @@ var CallToAction = function (_a) {
     isInverted: isInverted,
     description: contact.description,
     avatar: contact.avatar
-  }), newsFormMain && hasNewsletter && React__default.createElement(NewsletterWrapper, null, newsFormMain(isInverted)), (primaryAction || secondaryAction) && React__default.createElement(StyledActions$4, {
+  }), newsFormMain && hasNewsletter && React__default.createElement(NewsletterWrapper, null, newsFormMain({
+    isInverted: isInverted
+  })), (primaryAction || secondaryAction) && React__default.createElement(StyledActions$4, {
     primary: primaryAction && primaryAction({
       isInverted: isInverted,
       isTextCentered: true
@@ -511,36 +524,41 @@ var CallToAction = function (_a) {
   })));
 };
 var CallToAction$1 = withLibTheme(CallToAction);
-var templateObject_1$s, templateObject_2$o, templateObject_3$k, templateObject_4$i, templateObject_5$g, templateObject_6$c, templateObject_7$9, templateObject_8$3;
+var templateObject_1$s, templateObject_2$o, templateObject_3$k, templateObject_4$i, templateObject_5$g, templateObject_6$c, templateObject_7$a, templateObject_8$6;
 
 var View$7 = styled.div.withConfig({
   displayName: "CardList__View",
   componentId: "sc-179ugoh-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    position: relative;\n    color: ", ";\n    border-radius: ", ";\n    min-height: 110px;\n\n    overflow: hidden;\n\n    @media ", " {\n        display: block;\n        padding-top: 85%;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    position: relative;\n    color: ", ";\n    border-radius: ", ";\n    min-height: 110px;\n\n    overflow: hidden;\n\n    @media ", " {\n        display: block;\n        padding-top: 85%;\n    }\n"])), function (_a) {
+})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    position: relative;\n    color: ", ";\n    border-radius: ", ";\n    min-height: 110px;\n\n    overflow: hidden;\n\n    ", "\n\n    @media ", " {\n        display: block;\n        padding-top: 85%;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    position: relative;\n    color: ", ";\n    border-radius: ", ";\n    min-height: 110px;\n\n    overflow: hidden;\n\n    ", "\n\n    @media ", " {\n        display: block;\n        padding-top: 85%;\n    }\n"])), function (_a) {
   var theme = _a.theme;
   return getColors(theme).text.inverted;
 }, function (_a) {
   var theme = _a.theme;
   return getGlobals(theme).sections.edgeRadius;
+}, function (_a) {
+  var hasLink = _a.hasLink,
+      isInverted = _a.isInverted,
+      theme = _a.theme;
+  return hasLink && css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n            &:has(:focus-visible) {\n                outline: 2px solid\n                    ", ";\n\n                outline-offset: 2px;\n            }\n        "], ["\n            &:has(:focus-visible) {\n                outline: 2px solid\n                    ", ";\n\n                outline-offset: 2px;\n            }\n        "])), isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
 }, mq.medium);
 var SolidView = styled(View$7).withConfig({
   displayName: "CardList__SolidView",
   componentId: "sc-179ugoh-1"
-})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n\n    ", "\n"], ["\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n\n    ", "\n"])), function (_a) {
+})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n\n    ", "\n"], ["\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n\n    ", "\n"])), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted,
       cardColor = _a.cardColor;
   return cardColor ? cardColor : isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
 }, function (_a) {
   var hasLink = _a.hasLink;
-  return hasLink && css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n        "], ["\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n        "])));
+  return hasLink && css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n\n            @media (hover: none) {\n                &:has(:active:not(:focus-visible)) {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n                    -webkit-tap-highlight-color: transparent;\n                }\n            }\n        "], ["\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n\n            @media (hover: none) {\n                &:has(:active:not(:focus-visible)) {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n                    -webkit-tap-highlight-color: transparent;\n                }\n            }\n        "])));
 });
 var ImageView = styled(View$7).withConfig({
   displayName: "CardList__ImageView",
   componentId: "sc-179ugoh-2"
-})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    transition: box-shadow 0.2s ease-in-out;\n\n    ", "\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    @media ", " {\n        padding-top: 0;\n    }\n"], ["\n    transition: box-shadow 0.2s ease-in-out;\n\n    ", "\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    @media ", " {\n        padding-top: 0;\n    }\n"])), function (_a) {
+})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n    transition: box-shadow 0.2s ease-in-out;\n\n    ", "\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    @media ", " {\n        padding-top: 0;\n    }\n"], ["\n    transition: box-shadow 0.2s ease-in-out;\n\n    ", "\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    @media ", " {\n        padding-top: 0;\n    }\n"])), function (_a) {
   var hasLink = _a.hasLink;
-  return hasLink && css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n            @media (hover: hover) and (pointer: fine) {\n                cursor: pointer;\n\n                img {\n                    -webkit-backface-visibility: hidden;\n                    -ms-transform: translateZ(0); /* IE 9 */\n                    -webkit-transform: translateZ(\n                        0\n                    ); /* Chrome, Safari, Opera */\n                    transform: translateZ(0);\n                    transform-origin: center;\n                    transition: transform 0.2s ease-in-out;\n                }\n\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    img {\n                        transform: scale(1.03);\n                    }\n                }\n            }\n        "], ["\n            @media (hover: hover) and (pointer: fine) {\n                cursor: pointer;\n\n                img {\n                    -webkit-backface-visibility: hidden;\n                    -ms-transform: translateZ(0); /* IE 9 */\n                    -webkit-transform: translateZ(\n                        0\n                    ); /* Chrome, Safari, Opera */\n                    transform: translateZ(0);\n                    transform-origin: center;\n                    transition: transform 0.2s ease-in-out;\n                }\n\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    img {\n                        transform: scale(1.03);\n                    }\n                }\n            }\n        "])));
+  return hasLink && css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n            @media (hover: hover) and (pointer: fine) {\n                cursor: pointer;\n\n                img {\n                    -webkit-backface-visibility: hidden;\n                    -ms-transform: translateZ(0); /* IE 9 */\n                    -webkit-transform: translateZ(\n                        0\n                    ); /* Chrome, Safari, Opera */\n                    transform: translateZ(0);\n                    transform-origin: center;\n                    transition: transform 0.2s ease-in-out;\n                }\n\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    img {\n                        transform: scale(1.03);\n                    }\n                }\n            }\n\n            @media (hover: none) {\n                &:active:not(:focus-visible) {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n                    -webkit-tap-highlight-color: transparent;\n\n                    img {\n                        transition-timing-function: cubic-bezier(\n                            0.4,\n                            0,\n                            0.2,\n                            1\n                        );\n                        -webkit-tap-highlight-color: transparent;\n                    }\n                }\n            }\n        "], ["\n            @media (hover: hover) and (pointer: fine) {\n                cursor: pointer;\n\n                img {\n                    -webkit-backface-visibility: hidden;\n                    -ms-transform: translateZ(0); /* IE 9 */\n                    -webkit-transform: translateZ(\n                        0\n                    ); /* Chrome, Safari, Opera */\n                    transform: translateZ(0);\n                    transform-origin: center;\n                    transition: transform 0.2s ease-in-out;\n                }\n\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    img {\n                        transform: scale(1.03);\n                    }\n                }\n            }\n\n            @media (hover: none) {\n                &:active:not(:focus-visible) {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n                    -webkit-tap-highlight-color: transparent;\n\n                    img {\n                        transition-timing-function: cubic-bezier(\n                            0.4,\n                            0,\n                            0.2,\n                            1\n                        );\n                        -webkit-tap-highlight-color: transparent;\n                    }\n                }\n            }\n        "])));
 }, function (_a) {
   var theme = _a.theme;
   return getGlobals(theme).sections.imageTextGradient;
@@ -548,11 +566,11 @@ var ImageView = styled(View$7).withConfig({
 var StyledImage$9 = styled(Image).withConfig({
   displayName: "CardList__StyledImage",
   componentId: "sc-179ugoh-3"
-})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    @media ", " {\n        position: relative;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    @media ", " {\n        position: relative;\n    }\n"])), mq.medium);
+})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    @media ", " {\n        position: relative;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    @media ", " {\n        position: relative;\n    }\n"])), mq.medium);
 var Content$4 = styled.div.withConfig({
   displayName: "CardList__Content",
   componentId: "sc-179ugoh-4"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    z-index: 1;\n\n    padding: ", "px;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: ", ";\n        justify-content: space-between;\n        align-items: ", ";\n\n        & > * + * {\n            margin-left: 0;\n        }\n    }\n"], ["\n    z-index: 1;\n\n    padding: ", "px;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: ", ";\n        justify-content: space-between;\n        align-items: ", ";\n\n        & > * + * {\n            margin-left: 0;\n        }\n    }\n"])), spacings.nudge * 3, spacings.spacer, mq.medium, function (_a) {
+})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n    z-index: 1;\n\n    padding: ", "px;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: ", ";\n        justify-content: space-between;\n        align-items: ", ";\n\n        & > * + * {\n            margin-left: 0;\n        }\n    }\n"], ["\n    z-index: 1;\n\n    padding: ", "px;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: ", ";\n        justify-content: space-between;\n        align-items: ", ";\n\n        & > * + * {\n            margin-left: 0;\n        }\n    }\n"])), spacings.nudge * 3, spacings.spacer, mq.medium, function (_a) {
   var hasIcon = _a.hasIcon;
   return hasIcon ? 'column' : 'row';
 }, function (_a) {
@@ -562,39 +580,31 @@ var Content$4 = styled.div.withConfig({
 var TextContainer$1 = styled.div.withConfig({
   displayName: "CardList__TextContainer",
   componentId: "sc-179ugoh-5"
-})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n    width: 100%;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    width: 100%;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge / 2);
-var Title$3 = styled(Copy).withConfig({
+})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n    width: 100%;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    width: 100%;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge / 2);
+var Title$4 = styled(Copy).withConfig({
   displayName: "CardList__Title",
   componentId: "sc-179ugoh-6"
-})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n    display: inline-block;\n    max-width: 100%;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"], ["\n    display: inline-block;\n    max-width: 100%;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n    display: inline-block;\n    max-width: 100%;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"], ["\n    display: inline-block;\n    max-width: 100%;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
 var Footer = styled.div.withConfig({
   displayName: "CardList__Footer",
   componentId: "sc-179ugoh-7"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
+})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
 var SubLabel = styled(Copy).withConfig({
   displayName: "CardList__SubLabel",
   componentId: "sc-179ugoh-8"
-})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n    display: inline-block;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"], ["\n    display: inline-block;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"])));
+})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n    display: inline-block;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"], ["\n    display: inline-block;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"])));
 var Icon$3 = styled.div.withConfig({
   displayName: "CardList__Icon",
   componentId: "sc-179ugoh-9"
-})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n    height: 100%;\n    max-height: 60px;\n    min-height: 40px;\n    min-width: 40px;\n\n    * {\n        height: 100%;\n    }\n\n    svg,\n    img {\n        width: 100%;\n    }\n\n    @media ", " {\n        svg,\n        img {\n            width: auto;\n        }\n    }\n"], ["\n    height: 100%;\n    max-height: 60px;\n    min-height: 40px;\n    min-width: 40px;\n\n    * {\n        height: 100%;\n    }\n\n    svg,\n    img {\n        width: 100%;\n    }\n\n    @media ", " {\n        svg,\n        img {\n            width: auto;\n        }\n    }\n"])), mq.medium);
+})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n    height: 100%;\n    max-height: 60px;\n    min-height: 40px;\n    min-width: 40px;\n\n    * {\n        height: 100%;\n    }\n\n    svg,\n    img {\n        width: 100%;\n    }\n\n    @media ", " {\n        svg,\n        img {\n            width: auto;\n        }\n    }\n"], ["\n    height: 100%;\n    max-height: 60px;\n    min-height: 40px;\n    min-width: 40px;\n\n    * {\n        height: 100%;\n    }\n\n    svg,\n    img {\n        width: 100%;\n    }\n\n    @media ", " {\n        svg,\n        img {\n            width: auto;\n        }\n    }\n"])), mq.medium);
 var CardLink = styled(Link).withConfig({
   displayName: "CardList__CardLink",
   componentId: "sc-179ugoh-10"
-})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n    z-index: 1;\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    outline-color: ", ";\n\n    &:focus {\n        border: 2px dotted ", ";\n        outline-offset: 4px;\n\n        color: ", ";\n    }\n"], ["\n    z-index: 1;\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    outline-color: ", ";\n\n    &:focus {\n        border: 2px dotted ", ";\n        outline-offset: 4px;\n\n        color: ", ";\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
-}, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.invertedHover;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
-});
+})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n    outline: none;\n    text-decoration: none;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n    }\n"], ["\n    outline: none;\n    text-decoration: none;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n    }\n"])));
 
 var Card$2 = function (_a) {
+  var _b;
+
   var isInverted = _a.isInverted,
       title = _a.title,
       subLabel = _a.subLabel,
@@ -611,6 +621,7 @@ var Card$2 = function (_a) {
     cardColor: cardColor || defaultCardColor,
     hasLink: !!(link === null || link === void 0 ? void 0 : link.href)
   }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(StyledImage$9, __assign({}, image, {
+    alt: (_b = image.alt) !== null && _b !== void 0 ? _b : '',
     coverSpace: true,
     isInverted: isInverted,
     ratios: {
@@ -625,31 +636,36 @@ var Card$2 = function (_a) {
     }
   })), React__default.createElement(Content$4, {
     hasIcon: !!customIcon
-  }, customIcon ? React__default.createElement(Icon$3, null, customIcon({})) : '', React__default.createElement(TextContainer$1, null, title && React__default.createElement(Title$3, {
+  }, customIcon ? React__default.createElement(Icon$3, null, customIcon({})) : '', React__default.createElement(TextContainer$1, null, (link === null || link === void 0 ? void 0 : link.href) ? React__default.createElement(CardLink, __assign({
+    isInverted: isInverted
+  }, link, {
+    ariaLabel: concat([title, subLabel], ' - ')
+  }), title && React__default.createElement(Title$4, {
+    size: "big",
+    type: "copy",
+    isInverted: true,
+    renderAs: "span"
+  }, title)) : title ? React__default.createElement(Title$4, {
     size: "big",
     type: "copy",
     isInverted: true
-  }, title), subLabel && React__default.createElement(Footer, null, React__default.createElement(SubLabel, {
+  }, title) : null, subLabel && React__default.createElement(Footer, null, React__default.createElement(SubLabel, {
     type: "copy-b",
     size: "big",
     isInverted: true
   }, subLabel), decorator ? decorator({
     isInverted: isInverted
-  }) : undefined))), (link === null || link === void 0 ? void 0 : link.href) && React__default.createElement(CardLink, __assign({
-    isInverted: isInverted
-  }, link, {
-    ariaLabel: title || undefined
-  })));
+  }) : undefined))));
 };
 
 var List$2 = styled.ul.withConfig({
   displayName: "CardList__List",
   componentId: "sc-179ugoh-11"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n    padding: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"], ["\n    padding: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer);
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    padding: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"], ["\n    padding: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer);
 var CardItem = styled.li.withConfig({
   displayName: "CardList__CardItem",
   componentId: "sc-179ugoh-12"
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    width: 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 370px;\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n    }\n\n    @media (min-width: 75em) {\n        flex: ", ";\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    width: 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 370px;\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n    }\n\n    @media (min-width: 75em) {\n        flex: ", ";\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer, mq.semilarge, function (_a) {
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    width: 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 370px;\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n    }\n\n    @media (min-width: 75em) {\n        flex: ", ";\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    width: 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 370px;\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n    }\n\n    @media (min-width: 75em) {\n        flex: ", ";\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer, mq.semilarge, function (_a) {
   var isEqual = _a.isEqual,
       threeCols = _a.threeCols;
   return threeCols ? '0 0 33.33%' : isEqual && '0 0 25%';
@@ -660,7 +676,9 @@ var CardList$1 = function (_a) {
       items = _a.items,
       bgMode = _a.bgMode,
       decorator = _a.decorator,
-      maxThreeCols = _a.maxThreeCols;
+      maxThreeCols = _a.maxThreeCols,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of card items with image/text and link' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   return React__default.createElement(Section, {
@@ -670,7 +688,9 @@ var CardList$1 = function (_a) {
     addSeperation: true
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(List$2, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }, React__default.createElement(List$2, {
+    "aria-label": listAriaLabel
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     return React__default.createElement(CardItem, {
       key: i,
       isEqual: items.length % 2 === 0,
@@ -682,7 +702,7 @@ var CardList$1 = function (_a) {
   }))));
 };
 var CardList$2 = withLibTheme(CardList$1);
-var templateObject_1$r, templateObject_2$n, templateObject_3$j, templateObject_4$h, templateObject_5$f, templateObject_6$b, templateObject_7$8, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$1, templateObject_14$1, templateObject_15;
+var templateObject_1$r, templateObject_2$n, templateObject_3$j, templateObject_4$h, templateObject_5$f, templateObject_6$b, templateObject_7$9, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16;
 
 var clamp = function (num, min, max) {
   return Math.min(Math.max(num, min), max);
@@ -721,18 +741,18 @@ var ForegroundOverlay = styled.div.withConfig({
 var ImageLabel = styled(Copy).withConfig({
   displayName: "ComparisonSlider__ImageLabel",
   componentId: "sc-4f3ic1-5"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n    height: ", "px;\n    padding: ", "px ", "px ", "px\n        ", "px;\n    background: ", ";\n"], ["\n    height: ", "px;\n    padding: ", "px ", "px ", "px\n        ", "px;\n    background: ", ";\n"])), spacings.spacer, spacings.nudge, spacings.spacer, spacings.spacer, spacings.spacer, function (_a) {
+})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    height: ", "px;\n    padding: ", "px ", "px ", "px\n        ", "px;\n    background: ", ";\n"], ["\n    height: ", "px;\n    padding: ", "px ", "px ", "px\n        ", "px;\n    background: ", ";\n"])), spacings.spacer, spacings.nudge, spacings.spacer, spacings.spacer, spacings.spacer, function (_a) {
   var bgColor = _a.bgColor;
   return bgColor && bgColor;
 });
 var ForegroundLabel = styled(ImageLabel).withConfig({
   displayName: "ComparisonSlider__ForegroundLabel",
   componentId: "sc-4f3ic1-6"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", "px;\n    left: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"], ["\n    position: absolute;\n    bottom: ", "px;\n    left: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"])), spacings.spacer, spacings.spacer);
+})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", "px;\n    left: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"], ["\n    position: absolute;\n    bottom: ", "px;\n    left: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"])), spacings.spacer, spacings.spacer);
 var BackgroundLabel = styled(ImageLabel).withConfig({
   displayName: "ComparisonSlider__BackgroundLabel",
   componentId: "sc-4f3ic1-7"
-})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"], ["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"])), spacings.spacer, spacings.spacer);
+})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"], ["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"])), spacings.spacer, spacings.spacer);
 var ControlContainer = styled.div.withConfig({
   displayName: "ComparisonSlider__ControlContainer",
   componentId: "sc-4f3ic1-8"
@@ -747,12 +767,15 @@ var ControlContainer = styled.div.withConfig({
 var Control = styled.div.withConfig({
   displayName: "ComparisonSlider__Control",
   componentId: "sc-4f3ic1-9"
-})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 54px;\n    width: 54px;\n    border: solid 2px ", ";\n    border-radius: 50%;\n    background-color: ", ";\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 54px;\n    width: 54px;\n    border: solid 2px ", ";\n    border-radius: 50%;\n    background-color: ", ";\n"])), function (_a) {
+})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 54px;\n    width: 54px;\n    border: solid 2px ", ";\n    border-radius: 50%;\n    background-color: ", ";\n\n    &:focus-visible {\n        outline: solid 2px ", ";\n        outline-offset: 2px;\n    }\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 54px;\n    width: 54px;\n    border: solid 2px ", ";\n    border-radius: 50%;\n    background-color: ", ";\n\n    &:focus-visible {\n        outline: solid 2px ", ";\n        outline-offset: 2px;\n    }\n"])), function (_a) {
   var theme = _a.theme;
   return getColors(theme).elementBg.light;
 }, function (_a) {
   var theme = _a.theme;
   return getColors(theme).elementBg.medium;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
 });
 
 var ComparisonSlider = function (_a) {
@@ -870,6 +893,18 @@ var ComparisonSlider = function (_a) {
   };
 
   var isInverted = bgMode === 'inverted';
+
+  var handleControlKeydown = function (ev) {
+    if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
+      ev.preventDefault();
+      setInteracted(true);
+      setSlideValue(function (prev) {
+        var delta = ev.key === 'ArrowLeft' ? -0.05 : 0.05;
+        return clamp(prev + delta, 0, 1);
+      });
+    }
+  };
+
   return React__default.createElement(Section, {
     addSeperation: true,
     anchorId: anchorId,
@@ -920,17 +955,25 @@ var ComparisonSlider = function (_a) {
     style: {
       left: slideValue * 100 + '%'
     }
-  }, dragControl ? dragControl : React__default.createElement(Control, null, React__default.createElement(ArrowLeftRight, {
+  }, dragControl ? dragControl : React__default.createElement(Control, {
+    role: "slider",
+    tabIndex: 0,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": Math.round(slideValue * 100),
+    "aria-label": "Image comparison slider",
+    onKeyDown: handleControlKeydown
+  }, React__default.createElement(ArrowLeftRight, {
     iconColor: colors.elementBg.light
   }))))));
 };
 var ComparisonSlider$1 = withLibTheme(ComparisonSlider);
-var templateObject_1$q, templateObject_2$m, templateObject_3$i, templateObject_4$g, templateObject_5$e, templateObject_6$a, templateObject_7$7, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1;
+var templateObject_1$q, templateObject_2$m, templateObject_3$i, templateObject_4$g, templateObject_5$e, templateObject_6$a, templateObject_7$8, templateObject_8$4, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1;
 
 var View$6 = styled(Link).withConfig({
   displayName: "PromotionCard__View",
   componentId: "sc-1p1egy3-0"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n    outline: none;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n    outline: none;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    ", "\n"])), function (_a) {
+})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n    outline: none;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    ", "\n"], ["\n    display: flex;\n    position: relative;\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n    outline: none;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    ", "\n"])), function (_a) {
   var theme = _a.theme;
   return getGlobals(theme).sections.edgeRadius;
 }, function (_a) {
@@ -940,7 +983,7 @@ var View$6 = styled(Link).withConfig({
   var clickable = _a.clickable,
       theme = _a.theme,
       isInverted = _a.isInverted;
-  return clickable && css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n            transition: box-shadow 0.2s ease-in-out;\n            cursor: pointer;\n\n            &:hover {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n            }\n\n            &:focus {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                outline: solid 2px\n                    ", ";\n                outline-offset: 4px;\n\n                color: ", ";\n            }\n\n            &:focus:not(:focus-visible) {\n                outline: none;\n                box-shadow: none;\n            }\n        "], ["\n            transition: box-shadow 0.2s ease-in-out;\n            cursor: pointer;\n\n            &:hover {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n            }\n\n            &:focus {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                outline: solid 2px\n                    ", ";\n                outline-offset: 4px;\n\n                color: ", ";\n            }\n\n            &:focus:not(:focus-visible) {\n                outline: none;\n                box-shadow: none;\n            }\n        "])), isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default, isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover);
+  return clickable && css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n            transition: box-shadow 0.2s ease-in-out;\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n\n            &:focus-visible,\n            &:has(:focus-visible) {\n                outline: solid 2px\n                    ", ";\n                outline-offset: 4px;\n\n                color: ", ";\n            }\n        "], ["\n            transition: box-shadow 0.2s ease-in-out;\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n\n            &:focus-visible,\n            &:has(:focus-visible) {\n                outline: solid 2px\n                    ", ";\n                outline-offset: 4px;\n\n                color: ", ";\n            }\n        "])), isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default, isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover);
 });
 var StyledImage$8 = styled(Image).withConfig({
   displayName: "PromotionCard__StyledImage",
@@ -950,25 +993,30 @@ var IntroContainer = styled.div.withConfig({
   displayName: "PromotionCard__IntroContainer",
   componentId: "sc-1p1egy3-2"
 })(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: auto;\n    z-index: 1;\n\n    padding: ", "px ", "px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    /* required to align items at flex-end in ie11 */\n    &:before {\n        content: '';\n        display: block;\n        flex: 1 0 0px;\n    }\n\n    @media ", " {\n        padding: ", "px ", "px;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: auto;\n    z-index: 1;\n\n    padding: ", "px ", "px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    /* required to align items at flex-end in ie11 */\n    &:before {\n        content: '';\n        display: block;\n        flex: 1 0 0px;\n    }\n\n    @media ", " {\n        padding: ", "px ", "px;\n    }\n"])), spacings.spacer, spacings.nudge * 3, mq.medium, spacings.nudge * 5, spacings.spacer);
-var StyledTitle = styled(Title$5).withConfig({
+var StyledTitle = styled(Title$6).withConfig({
   displayName: "PromotionCard__StyledTitle",
   componentId: "sc-1p1egy3-3"
-})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n    max-width: ", ";\n"], ["\n    max-width: ", ";\n"])), function (_a) {
+})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n    max-width: ", ";\n\n    ", "\n"], ["\n    max-width: ", ";\n\n    ", "\n"])), function (_a) {
   var clampTitle = _a.clampTitle;
   return clampTitle && 13 / 28 * spacings.wrapper + 'px';
+}, function (_a) {
+  var titleLink = _a.titleLink;
+  return (titleLink === null || titleLink === void 0 ? void 0 : titleLink.href) && css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n            * {\n                outline: none !important;\n            }\n\n            a:before {\n                content: '';\n                position: absolute;\n                inset: 0;\n                z-index: 1;\n            }\n        "], ["\n            * {\n                outline: none !important;\n            }\n\n            a:before {\n                content: '';\n                position: absolute;\n                inset: 0;\n                z-index: 1;\n            }\n        "])));
 });
 var ExternalIconHolder = styled.span.withConfig({
   displayName: "PromotionCard__ExternalIconHolder",
   componentId: "sc-1p1egy3-4"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n    margin-left: ", "px;\n\n    & > * {\n        display: inline-block;\n    }\n"], ["\n    margin-left: ", "px;\n\n    & > * {\n        display: inline-block;\n    }\n"])), spacings.nudge * 2);
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n    margin-left: ", "px;\n\n    & > * {\n        display: inline-block;\n    }\n"], ["\n    margin-left: ", "px;\n\n    & > * {\n        display: inline-block;\n    }\n"])), spacings.nudge * 2);
 var Icon$2 = styled.div.withConfig({
   displayName: "PromotionCard__Icon",
   componentId: "sc-1p1egy3-5"
-})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n    ", ";\n    ", ";\n\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    & > * {\n        ", ";\n        ", ";\n    }\n\n    color: ", ";\n"], ["\n    ", ";\n    ", ";\n\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    & > * {\n        ", ";\n        ", ";\n    }\n\n    color: ", ";\n"])), withRange([60, 100], 'height'), withRange([60, 100], 'width'), spacings.nudge * 3, spacings.nudge * 3, withRange([60, 100], 'height'), withRange([60, 100], 'width'), function (_a) {
+})(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n    ", ";\n    ", ";\n\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    & > * {\n        ", ";\n        ", ";\n    }\n\n    color: ", ";\n"], ["\n    ", ";\n    ", ";\n\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    & > * {\n        ", ";\n        ", ";\n    }\n\n    color: ", ";\n"])), withRange([60, 100], 'height'), withRange([60, 100], 'width'), spacings.nudge * 3, spacings.nudge * 3, withRange([60, 100], 'height'), withRange([60, 100], 'width'), function (_a) {
   var theme = _a.theme;
   return getColors(theme).text.inverted;
 });
 var PromotionCard = forwardRef(function (_a, ref) {
+  var _b;
+
   var isInverted = _a.isInverted,
       image = _a.image,
       title = _a.title,
@@ -979,7 +1027,8 @@ var PromotionCard = forwardRef(function (_a, ref) {
       link = _a.link,
       externalLinkIcon = _a.externalLinkIcon,
       icon = _a.icon,
-      className = _a.className; // fallback for older versions
+      className = _a.className;
+  var id = useId(); // fallback for older versions
 
   var linkObj = link;
 
@@ -993,10 +1042,13 @@ var PromotionCard = forwardRef(function (_a, ref) {
   var externalIconString = ReactDOMServer.renderToString(React__default.createElement(ExternalIconHolder, null, externalLinkIcon || React__default.createElement(External, null)));
   return React__default.createElement(View$6, __assign({
     ref: ref,
-    clickable: !!href || !!link
-  }, linkObj, {
+    as: (linkObj === null || linkObj === void 0 ? void 0 : linkObj.href) && !title ? 'a' : 'div'
+  }, (linkObj === null || linkObj === void 0 ? void 0 : linkObj.href) && !title ? linkObj : {}, {
+    clickable: !!(linkObj === null || linkObj === void 0 ? void 0 : linkObj.href),
+    "aria-labelledby": title ? id : undefined,
     className: className
   }), React__default.createElement(StyledImage$8, __assign({}, image, {
+    alt: (_b = image.alt) !== null && _b !== void 0 ? _b : '',
     isInverted: isInverted,
     coverSpace: true
   })), icon && React__default.createElement(Icon$2, null, icon({
@@ -1005,13 +1057,15 @@ var PromotionCard = forwardRef(function (_a, ref) {
     colorMode: "onImage",
     superTitle: superTitle,
     superTitleAs: superTitleAs,
+    titleId: id,
     title: (linkObj === null || linkObj === void 0 ? void 0 : linkObj.isExternal) ? title + externalIconString : title,
-    titleAs: titleAs || 'div',
+    titleAs: titleAs || 'h3',
+    titleLink: linkObj,
     clampTitle: true
   })));
 });
 PromotionCard.displayName = 'PromotionCard';
-var templateObject_1$p, templateObject_2$l, templateObject_3$h, templateObject_4$f, templateObject_5$d, templateObject_6$9, templateObject_7$6;
+var templateObject_1$p, templateObject_2$l, templateObject_3$h, templateObject_4$f, templateObject_5$d, templateObject_6$9, templateObject_7$7, templateObject_8$3;
 
 var Card$1 = styled(PromotionCard).withConfig({
   displayName: "CrossPromotion__Card",
@@ -1027,7 +1081,9 @@ var CrossPromotion = function (_a) {
       aside = _a.aside,
       bgMode = _a.bgMode,
       isMirrored = _a.isMirrored,
-      externalLinkIcon = _a.externalLinkIcon;
+      externalLinkIcon = _a.externalLinkIcon,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of cross promotion cards with image and text' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   return React.createElement(Section, {
@@ -1038,7 +1094,10 @@ var CrossPromotion = function (_a) {
   }, React.createElement(Wrapper, {
     clampWidth: "normal",
     addWhitespace: true
-  }, aside ? isMirrored ? React.createElement(Grid.Row, null, React.createElement(Grid.Col, {
+  }, aside ? isMirrored ? React.createElement(Grid.Row, {
+    asList: true,
+    ariaLabel: listAriaLabel
+  }, React.createElement(Grid.Col, {
     semilarge: {
       span: 6 / 12
     }
@@ -1126,7 +1185,7 @@ var Content$3 = styled.div.withConfig({
   var isCentered = _a.isCentered;
   return isCentered && 'center';
 }, spacings.nudge * 3);
-var Title$2 = styled(Copy).withConfig({
+var Title$3 = styled(Copy).withConfig({
   displayName: "Fact__Title",
   componentId: "sc-elpxk2-4"
 })(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""])));
@@ -1137,7 +1196,7 @@ var SubTitle = styled(Copy).withConfig({
 var Text$3 = styled(Copy).withConfig({
   displayName: "Fact__Text",
   componentId: "sc-elpxk2-6"
-})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n    ", " + & {\n        margin-top: ", "px;\n    }\n"], ["\n    ", " + & {\n        margin-top: ", "px;\n    }\n"])), SubTitle, spacings.nudge);
+})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n    ", " + & {\n        margin-top: ", "px;\n    }\n"], ["\n    ", " + & {\n        margin-top: ", "px;\n    }\n"])), SubTitle, spacings.nudge);
 var Fact = forwardRef(function (_a, ref) {
   var _b = _a.isInverted,
       isInverted = _b === void 0 ? false : _b,
@@ -1166,7 +1225,7 @@ var Fact = forwardRef(function (_a, ref) {
     showPlaceholder: image.showPlaceholder
   })), React__default.createElement(Content$3, {
     isCentered: isCentered
-  }, title && React__default.createElement(Title$2, {
+  }, title && React__default.createElement(Title$3, {
     type: "copy-b",
     size: "big",
     isInverted: isInverted,
@@ -1183,7 +1242,7 @@ var Fact = forwardRef(function (_a, ref) {
   })));
 });
 Fact.displayName = 'Fact';
-var templateObject_1$n, templateObject_2$k, templateObject_3$g, templateObject_4$e, templateObject_5$c, templateObject_6$8, templateObject_7$5;
+var templateObject_1$n, templateObject_2$k, templateObject_3$g, templateObject_4$e, templateObject_5$c, templateObject_6$8, templateObject_7$6;
 
 var FactFill = styled.div.withConfig({
   displayName: "FactGrid__FactFill",
@@ -1196,7 +1255,9 @@ var FactGrid = function (_a) {
       columns = _b === void 0 ? 3 : _b,
       facts = _a.facts,
       bgMode = _a.bgMode,
-      isCentered = _a.isCentered;
+      isCentered = _a.isCentered,
+      _c = _a.listAriaLabel,
+      listAriaLabel = _c === void 0 ? 'List of items with facts and other informations' : _c;
   var colors = useLibTheme().colors;
   var factCount = (facts === null || facts === void 0 ? void 0 : facts.length) || 0;
   var isInverted = bgMode === 'inverted';
@@ -1219,7 +1280,10 @@ var FactGrid = function (_a) {
   }, React__default.createElement(Wrapper, {
     clampWidth: "normal",
     addWhitespace: true
-  }, React__default.createElement(Grid.Row, null, facts && facts.map(function (fact, i) {
+  }, React__default.createElement(Grid.Row, {
+    asList: true,
+    ariaLabel: listAriaLabel
+  }, facts && facts.map(function (fact, i) {
     if ((fact === null || fact === void 0 ? void 0 : fact.title) || (fact === null || fact === void 0 ? void 0 : fact.subTitle) || (fact === null || fact === void 0 ? void 0 : fact.image) || (fact === null || fact === void 0 ? void 0 : fact.text)) {
       return React__default.createElement(Grid.Col, {
         key: i,
@@ -1269,8 +1333,8 @@ var FactsContainer = styled.ul.withConfig({
   displayName: "FactList__FactsContainer",
   componentId: "sc-elh0vj-0"
 })(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n\n    list-style-type: none;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n\n    list-style-type: none;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
-var FactItem = styled.li.withConfig({
-  displayName: "FactList__FactItem",
+var FactItemView = styled.li.withConfig({
+  displayName: "FactList__FactItemView",
   componentId: "sc-elh0vj-1"
 })(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n    padding: ", "px;\n\n    background: ", ";\n\n    display: flex;\n    flex-direction: row;\n    align-items: ", ";\n\n    @media ", " {\n        padding: ", "px;\n    }\n"], ["\n    padding: ", "px;\n\n    background: ", ";\n\n    display: flex;\n    flex-direction: row;\n    align-items: ", ";\n\n    @media ", " {\n        padding: ", "px;\n    }\n"])), spacings.nudge * 2, function (_a) {
   var theme = _a.theme,
@@ -1293,11 +1357,41 @@ var Description$2 = styled(Copy).withConfig({
   componentId: "sc-elh0vj-4"
 })(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n    max-width: 880px;\n"], ["\n    max-width: 880px;\n"])));
 
+var FactItem = function (_a) {
+  var label = _a.label,
+      text = _a.text,
+      hasBg = _a.hasBg,
+      icon = _a.icon;
+  var id = useId();
+  var titleId = "fact-item-title-".concat(id);
+  var descriptionId = "fact-item-description-".concat(id);
+  return React__default.createElement(FactItemView, {
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    hasText: !!text,
+    hasBack: hasBg,
+    "aria-label": label
+  }, icon && React__default.createElement(Icon$1, {
+    src: icon.src,
+    alt: icon.alt || '',
+    "aria-hidden": true
+  }), React__default.createElement(ContentBlock, null, label && React__default.createElement(Copy, {
+    id: titleId,
+    type: "copy-b"
+  }, label), text && React__default.createElement(Description$2, {
+    id: descriptionId,
+    type: "copy",
+    innerHTML: text
+  })));
+};
+
 var FactList = function (_a) {
   var anchorId = _a.anchorId,
       facts = _a.facts,
       icon = _a.icon,
-      bgMode = _a.bgMode;
+      bgMode = _a.bgMode,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of items with facts and other informations' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   var hasBack = isInverted || bgMode === 'full';
@@ -1309,38 +1403,34 @@ var FactList = function (_a) {
   }, React__default.createElement(Wrapper, {
     clampWidth: "normal",
     addWhitespace: true
-  }, facts && React__default.createElement(FactsContainer, null, facts.map(function (_a, i) {
+  }, facts && React__default.createElement(FactsContainer, {
+    "aria-label": listAriaLabel
+  }, facts.map(function (_a, i) {
     var label = _a.label,
         text = _a.text;
     return React__default.createElement(FactItem, {
       key: i,
-      hasText: !!text,
-      hasBack: hasBack
-    }, icon && React__default.createElement(Icon$1, {
-      src: icon.src,
-      alt: icon.alt || ''
-    }), React__default.createElement(ContentBlock, null, label && React__default.createElement(Copy, {
-      type: "copy-b"
-    }, label), text && React__default.createElement(Description$2, {
-      type: "copy",
-      innerHTML: text
-    })));
+      label: label,
+      text: text,
+      hasBg: hasBack,
+      icon: icon
+    });
   }))));
 };
 var FactList$1 = withLibTheme(FactList);
 var templateObject_1$l, templateObject_2$j, templateObject_3$f, templateObject_4$d, templateObject_5$b;
 
-var View$4 = styled.div.withConfig({
+var View$4 = styled.article.withConfig({
   displayName: "Feature__View",
   componentId: "sc-d7vugh-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    min-width: 270px;\n    padding-bottom: ", "px;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    min-width: 270px;\n    padding-bottom: ", "px;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge, function (_a) {
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    position: relative;\n    min-width: 270px;\n    padding-bottom: ", "px;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    position: relative;\n    min-width: 270px;\n    padding-bottom: ", "px;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge, function (_a) {
   var isCentered = _a.isCentered;
   return isCentered && 'center';
 }, spacings.spacer);
-var TitleLink = styled(Link).withConfig({
+var TitleLink$2 = styled(Link).withConfig({
   displayName: "Feature__TitleLink",
   componentId: "sc-d7vugh-1"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n\n    ", "\n"], ["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n\n    ", "\n"])), copyStyle('copy-b', 'big'), function (_a) {
+})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n\n    ", "\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\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;
@@ -1349,25 +1439,41 @@ var TitleLink = styled(Link).withConfig({
       isInverted = _a.isInverted,
       theme = _a.theme;
   return !href && css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n            &:hover {\n                color: ", ";\n            }\n        "], ["\n            &:hover {\n                color: ", ";\n            }\n        "])), isInverted ? getFonts(theme)['copy-b'].big.colorInverted : getFonts(theme)['copy-b'].big.color);
-});
-var ImageContainer$1 = styled(Link).withConfig({
-  displayName: "Feature__ImageContainer",
+}, copyStyle('copy-b', 'big'));
+var Title$2 = styled.div.withConfig({
+  displayName: "Feature__Title",
   componentId: "sc-d7vugh-2"
-})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n"], ["\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n"])), function (_a) {
+})(templateObject_5$a || (templateObject_5$a = __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_4$c || (templateObject_4$c = __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 ImageContainer$1 = styled.div.withConfig({
+  displayName: "Feature__ImageContainer",
+  componentId: "sc-d7vugh-3"
+})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n"], ["\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n"])), function (_a) {
   var isCentered = _a.isCentered;
   return isCentered ? 'center' : 'flex-start';
 });
 var StyledImage$6 = styled(Image).withConfig({
   displayName: "Feature__StyledImage",
-  componentId: "sc-d7vugh-3"
-})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n    overflow: hidden;\n    border-radius: ", ";\n"], ["\n    overflow: hidden;\n    border-radius: ", ";\n"])), function (_a) {
+  componentId: "sc-d7vugh-4"
+})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n    overflow: hidden;\n    border-radius: ", ";\n\n    cursor: ", ";\n"], ["\n    overflow: hidden;\n    border-radius: ", ";\n\n    cursor: ", ";\n"])), function (_a) {
   var theme = _a.theme;
   return getGlobals(theme).sections.edgeRadius;
+}, function (_a) {
+  var onClick = _a.onClick;
+  return onClick && 'pointer';
 });
 var ArticleContent = styled.div.withConfig({
   displayName: "Feature__ArticleContent",
-  componentId: "sc-d7vugh-4"
-})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 95%;\n            margin-right: ", ";\n            margin-left: ", ";\n        }\n    }\n"], ["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 95%;\n            margin-right: ", ";\n            margin-left: ", ";\n        }\n    }\n"])), function (_a) {
+  componentId: "sc-d7vugh-5"
+})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 95%;\n            margin-right: ", ";\n            margin-left: ", ";\n        }\n    }\n"], ["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 95%;\n            margin-right: ", ";\n            margin-left: ", ";\n        }\n    }\n"])), function (_a) {
   var isCentered = _a.isCentered;
   return isCentered && 'center';
 }, spacings.nudge * 2, mq.medium, function (_a) {
@@ -1377,10 +1483,10 @@ var ArticleContent = styled.div.withConfig({
   var isCentered = _a.isCentered;
   return isCentered && 'auto';
 });
-var Action = styled.div.withConfig({
-  displayName: "Feature__Action",
-  componentId: "sc-d7vugh-5"
-})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n    max-width: 100%;\n"], ["\n    max-width: 100%;\n"])));
+var CardFooter = styled.div.withConfig({
+  displayName: "Feature__CardFooter",
+  componentId: "sc-d7vugh-6"
+})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n    max-width: 100%;\n"], ["\n    max-width: 100%;\n"])));
 var Feature = forwardRef(function (_a, ref) {
   var title = _a.title,
       description = _a.description,
@@ -1394,13 +1500,26 @@ var Feature = forwardRef(function (_a, ref) {
       isCentered = _c === void 0 ? false : _c,
       action = _a.action,
       className = _a.className;
+  var uniqueId = useId();
+
+  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;
+    }
+  };
+
   return React__default.createElement(View$4, {
     ref: ref,
     isCentered: isCentered,
+    "aria-labelledby": uniqueId,
     className: className
-  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(ImageContainer$1, __assign({}, link, {
+  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(ImageContainer$1, {
     isCentered: isCentered
-  }), React__default.createElement(StyledImage$6, {
+  }, React__default.createElement(StyledImage$6, {
     small: image.small,
     medium: image.medium,
     semilarge: image.semilarge,
@@ -1409,12 +1528,22 @@ var Feature = forwardRef(function (_a, ref) {
     alt: image.alt,
     ratios: image.ratios,
     coverSpace: image.coverSpace === undefined ? true : image.coverSpace,
-    isInverted: isInverted
-  })), React__default.createElement(TitleLink, __assign({}, link, {
+    isInverted: isInverted,
+    onClick: (link === null || link === void 0 ? void 0 : link.href) ? handleClick : undefined
+  })), title && React__default.createElement(React__default.Fragment, null, action ? React__default.createElement(Title$2, {
+    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$2, __assign({}, link, {
     isInverted: isInverted,
     ariaLabel: title,
     dataSheet: "title"
-  }), title), React__default.createElement(Copy, {
+  }), React__default.createElement("h3", {
+    id: uniqueId
+  }, title))), React__default.createElement(Copy, {
     size: "small",
     isInverted: isInverted,
     "data-sheet": "desc",
@@ -1432,13 +1561,16 @@ var Feature = forwardRef(function (_a, ref) {
     isInverted: isInverted,
     innerHTML: text,
     "data-sheet": "text"
-  })), action && React__default.createElement(Action, null, action({
+  })), action && React__default.createElement(CardFooter, null, action({
     isInverted: isInverted,
-    isTextCentered: isCentered
+    isTextCentered: isCentered,
+    title: title,
+    link: link,
+    clickHandler: handleClick
   })));
 });
 Feature.displayName = 'Feature';
-var templateObject_1$k, templateObject_2$i, templateObject_3$e, templateObject_4$c, templateObject_5$a, templateObject_6$7, templateObject_7$4;
+var templateObject_1$k, templateObject_2$i, templateObject_3$e, templateObject_4$c, templateObject_5$a, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$1;
 
 var FeatureList = function (_a) {
   var anchorId = _a.anchorId,
@@ -1446,7 +1578,9 @@ var FeatureList = function (_a) {
       bgMode = _a.bgMode,
       _b = _a.isCentered,
       isCentered = _b === void 0 ? false : _b,
-      columns = _a.columns;
+      columns = _a.columns,
+      _c = _a.listAriaLabel,
+      listAriaLabel = _c === void 0 ? 'List of features/articles with text and images' : _c;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   var featureCount = (features === null || features === void 0 ? void 0 : features.length) || 0;
@@ -1478,7 +1612,9 @@ var FeatureList = function (_a) {
     addWhitespace: true,
     clampWidth: "normal"
   }, React__default.createElement(Grid.Row, {
-    halign: isHalf || featureCount <= 2 ? 'center' : 'left'
+    halign: isHalf || featureCount <= 2 ? 'center' : 'left',
+    asList: true,
+    ariaLabel: listAriaLabel
   }, features === null || features === void 0 ? void 0 : features.map(function (feature, i) {
     return React__default.createElement(Grid.Col, {
       semilarge: {
@@ -1509,7 +1645,9 @@ var StyledImage$5 = styled(Image).withConfig({
 var Gallery = function (_a) {
   var anchorId = _a.anchorId,
       bgMode = _a.bgMode,
-      images = _a.images;
+      images = _a.images,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'Image Gallery' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   return React__default.createElement(Section, {
@@ -1519,13 +1657,20 @@ var Gallery = function (_a) {
     bgMode: mapToBgMode(bgMode)
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(Grid.Row, null, images === null || images === void 0 ? void 0 : images.map(function (img, i) {
+  }, React__default.createElement(Grid.Row, {
+    asList: images && images.length > 1,
+    ariaLabel: listAriaLabel
+  }, images === null || images === void 0 ? void 0 : images.map(function (img, i) {
+    var _a;
+
     return React__default.createElement(Grid.Col, {
       key: i,
       semilarge: {
         span: img.isFull ? 12 / 12 : 6 / 12
-      }
+      },
+      ariaLabel: img.alt ? img.alt : "Galerie Bild ".concat(i + 1)
     }, React__default.createElement(StyledImage$5, __assign({}, img, {
+      alt: (_a = img.alt) !== null && _a !== void 0 ? _a : '',
       coverSpace: true,
       isInverted: isInverted
     })));
@@ -1604,7 +1749,7 @@ var ShowMore = styled.div.withConfig({
 var StyledActions$3 = styled(Actions).withConfig({
   displayName: "IconList__StyledActions",
   componentId: "sc-10wpi8n-6"
-})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"], ["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"])), spacings.spacer, mq.medium, function (_a) {
+})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"], ["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"])), spacings.spacer, mq.medium, function (_a) {
   var isCentered = _a.isCentered;
   return isCentered && 'center';
 });
@@ -1622,13 +1767,18 @@ var IconList = function (_a) {
       _d = _a.showMoreText,
       showMoreText = _d === void 0 ? 'show more' : _d,
       enableToggle = _a.enableToggle,
-      bgMode = _a.bgMode;
+      bgMode = _a.bgMode,
+      _e = _a.listAriaLabel,
+      listAriaLabel = _e === void 0 ? 'List of linked icons/logos' : _e;
   var colors = useLibTheme().colors;
+  var id = useId();
   var isInverted = bgMode === 'inverted';
 
-  var _e = useState(!enableToggle),
-      showMore = _e[0],
-      setShowMore = _e[1];
+  var _f = useState(!enableToggle),
+      showMore = _f[0],
+      setShowMore = _f[1];
+
+  var listId = "icon-list-".concat(id);
 
   var handleToggleClick = function () {
     setShowMore(function (prev) {
@@ -1648,8 +1798,10 @@ var IconList = function (_a) {
   }, React__default.createElement(ItemContainer, {
     isCentered: isCentered
   }, React__default.createElement(Items$1, {
+    id: listId,
     isVisible: !showMore ? true : showMore === true,
-    isCentered: isCentered
+    isCentered: isCentered,
+    "aria-label": listAriaLabel
   }, items === null || items === void 0 ? void 0 : items.map(function (_a, i) {
     var src = _a.src,
         link = _a.link,
@@ -1661,13 +1813,12 @@ var IconList = function (_a) {
       index: i,
       key: i
     }, React__default.createElement(ItemLink, __assign({}, link, {
-      isInverted: isInverted,
-      ariaLabel: alt
+      isInverted: isInverted
     }), React__default.createElement(Image, {
       "data-img-loaded": false,
       isInverted: isInverted,
       small: src,
-      alt: alt,
+      alt: alt !== null && alt !== void 0 ? alt : '',
       ratios: ratio ? {
         small: ratio
       } : undefined,
@@ -1689,6 +1840,7 @@ var IconList = function (_a) {
     as: "button",
     isInverted: isInverted,
     "aria-pressed": showMore,
+    "aria-controls": listId,
     onClick: function () {
       return handleToggleClick();
     }
@@ -1699,7 +1851,7 @@ var IconList = function (_a) {
   })));
 };
 var IconList$1 = withLibTheme(IconList);
-var templateObject_1$i, templateObject_2$h, templateObject_3$d, templateObject_4$b, templateObject_5$9, templateObject_6$6, templateObject_7$3;
+var templateObject_1$i, templateObject_2$h, templateObject_3$d, templateObject_4$b, templateObject_5$9, templateObject_6$6, templateObject_7$4;
 
 var List$1 = styled.ul.withConfig({
   displayName: "IndexList__List",
@@ -1742,18 +1894,20 @@ var IndexList = function (_a) {
       items = _a.items,
       bgMode = _a.bgMode,
       customIcon = _a.customIcon,
-      scrollToOffset = _a.scrollToOffset;
+      scrollToOffset = _a.scrollToOffset,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'Link list to anchors on page' : _b;
 
-  var _b = useLibTheme(),
-      colors = _b.colors,
-      theme = _b.theme;
+  var _c = useLibTheme(),
+      colors = _c.colors,
+      theme = _c.theme;
 
   var setTargetPos = useScrollTo(500);
   var semilarge = useMediaQueries().semilarge;
 
-  var _c = useState(0),
-      topOffset = _c[0],
-      setTopOffset = _c[1];
+  var _d = useState(0),
+      topOffset = _d[0],
+      setTopOffset = _d[1];
 
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
@@ -1799,7 +1953,8 @@ var IndexList = function (_a) {
     addWhitespace: true
   }, React__default.createElement(List$1, {
     hasBg: hasBg,
-    isInverted: isInverted
+    isInverted: isInverted,
+    "aria-label": listAriaLabel
   }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     return React__default.createElement(ListItem$1, {
       key: i
@@ -1873,10 +2028,10 @@ var Intro$1 = function (_a) {
 };
 var Intro$2 = withLibTheme(Intro$1);
 
-var View$3 = styled(Link).withConfig({
+var View$3 = styled.div.withConfig({
   displayName: "NavBlock__View",
   componentId: "sc-7v33be-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: ", ";\n    grid-template-columns: ", ";\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    cursor: pointer;\n    text-decoration: none;\n    color: ", ";\n\n    outline-color: ", ";\n\n    transition: all ease-in-out 0.2s;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: ", ";\n    grid-template-columns: ", ";\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    cursor: pointer;\n    text-decoration: none;\n    color: ", ";\n\n    outline-color: ", ";\n\n    transition: all ease-in-out 0.2s;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n"])), function (_a) {
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n    position: relative;\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: ", ";\n    grid-template-columns: ", ";\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    color: ", ";\n\n    outline-color: ", ";\n\n    transition: color ease-in-out 0.2s, outline-color ease-in-out 0.2s;\n\n    &:has(:focus-visible) {\n        outline: 2px solid\n            ", ";\n\n        outline-offset: 2px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n"], ["\n    position: relative;\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: ", ";\n    grid-template-columns: ", ";\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    color: ", ";\n\n    outline-color: ", ";\n\n    transition: color ease-in-out 0.2s, outline-color ease-in-out 0.2s;\n\n    &:has(:focus-visible) {\n        outline: 2px solid\n            ", ";\n\n        outline-offset: 2px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n"])), function (_a) {
   var hasIcon = _a.hasIcon;
   return hasIcon ? 'min-content 1fr' : '1fr';
 }, function (_a) {
@@ -1890,6 +2045,10 @@ var View$3 = styled(Link).withConfig({
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
 }, function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
@@ -1916,14 +2075,26 @@ var Icon = styled.div.withConfig({
   displayName: "NavBlock__Icon",
   componentId: "sc-7v33be-3"
 })(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"])));
+var TitleLink$1 = styled(Link).withConfig({
+  displayName: "NavBlock__TitleLink",
+  componentId: "sc-7v33be-4"
+})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n    outline: none;\n\n    &:focus-visible {\n        outline: none;\n    }\n"], ["\n    outline: none;\n\n    &:focus-visible {\n        outline: none;\n    }\n"])));
 var Title$1 = styled(Copy).withConfig({
   displayName: "NavBlock__Title",
-  componentId: "sc-7v33be-4"
-})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n    display: inline-block;\n"], ["\n    display: inline-block;\n"])));
+  componentId: "sc-7v33be-5"
+})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n    display: inline-block;\n\n    color: ", ";\n\n    transition: color ease-in-out 0.2s;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n    }\n"], ["\n    display: inline-block;\n\n    color: ", ";\n\n    transition: color ease-in-out 0.2s;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
+});
 var TitleIcon = styled.span.withConfig({
   displayName: "NavBlock__TitleIcon",
-  componentId: "sc-7v33be-5"
-})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n    display: inline-block;\n    margin-left: ", "px;\n\n    @media ", " {\n        margin-left: ", "px;\n    }\n"], ["\n    display: inline-block;\n    margin-left: ", "px;\n\n    @media ", " {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2, mq.medium, spacings.nudge * 3);
+  componentId: "sc-7v33be-6"
+})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n    display: inline-block;\n    margin-left: ", "px;\n\n    @media ", " {\n        margin-left: ", "px;\n    }\n"], ["\n    display: inline-block;\n    margin-left: ", "px;\n\n    @media ", " {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2, mq.medium, spacings.nudge * 3);
 
 var NavBlock = function (_a) {
   var _b = _a.isInverted,
@@ -1934,26 +2105,47 @@ var NavBlock = function (_a) {
       customIcon = _a.customIcon,
       customTitleIcon = _a.customTitleIcon,
       className = _a.className;
-  return React__default.createElement(View$3, __assign({}, link, {
+  var id = useId();
+  var titleId = "nav-block-title-".concat(id);
+  var descriptionId = "nav-block-description-".concat(id);
+  return React__default.createElement(View$3, {
     isInverted: isInverted,
     hasIcon: !!customIcon,
+    "aria-labelledby": titleId,
+    "aria-describedby": text ? descriptionId : undefined,
+    id: id,
+    role: "navigation",
     className: className
-  }), customIcon ? React__default.createElement(Icon, null, customIcon({})) : '', React__default.createElement(MainLabel, {
+  }, customIcon ? React__default.createElement(Icon, null, customIcon({})) : '', React__default.createElement(MainLabel, {
     hasIcon: !!customIcon
-  }, title && React__default.createElement(Title$1, {
+  }, (link === null || link === void 0 ? void 0 : link.href) ? React__default.createElement(TitleLink$1, __assign({}, link, {
+    isInverted: isInverted
+  }), title && React__default.createElement(Title$1, {
+    id: titleId,
     textColor: "inherit",
     size: "medium",
-    type: "copy-b"
+    type: "copy-b",
+    renderAs: "span",
+    isInverted: isInverted
+  }, title, title && customTitleIcon && React__default.createElement(TitleIcon, null, customTitleIcon({
+    isInverted: isInverted
+  })))) : title ? React__default.createElement(Title$1, {
+    id: titleId,
+    textColor: "inherit",
+    size: "medium",
+    type: "copy-b",
+    isInverted: isInverted
   }, title, title && customTitleIcon && React__default.createElement(TitleIcon, null, customTitleIcon({
     isInverted: isInverted
-  })))), text && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null), React__default.createElement(Text$2, {
+  }))) : null), text && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null), React__default.createElement(Text$2, {
+    id: descriptionId,
     size: "small",
     isInverted: isInverted,
     innerHTML: text,
     hasIcon: !!customIcon
   })));
 };
-var templateObject_1$g, templateObject_2$f, templateObject_3$b, templateObject_4$9, templateObject_5$7, templateObject_6$5;
+var templateObject_1$g, templateObject_2$f, templateObject_3$b, templateObject_4$9, templateObject_5$7, templateObject_6$5, templateObject_7$3;
 
 var List = styled.ul.withConfig({
   displayName: "NavList__List",
@@ -1968,7 +2160,9 @@ var NavList = function (_a) {
   var anchorId = _a.anchorId,
       items = _a.items,
       bgMode = _a.bgMode,
-      customTitleIcon = _a.customTitleIcon;
+      customTitleIcon = _a.customTitleIcon,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of navigation items' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
@@ -1979,7 +2173,9 @@ var NavList = function (_a) {
     bgMode: mapToBgMode(bgMode, true)
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(List, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }, React__default.createElement(List, {
+    "aria-label": listAriaLabel
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     return React__default.createElement(ListItem, {
       key: i
     }, React__default.createElement(NavBlock, __assign({}, item, {
@@ -2086,7 +2282,9 @@ var NumberList = function (_a) {
       items = _a.items,
       bgMode = _a.bgMode,
       _b = _a.isCentered,
-      isCentered = _b === void 0 ? true : _b;
+      isCentered = _b === void 0 ? true : _b,
+      _c = _a.listAriaLabel,
+      listAriaLabel = _c === void 0 ? 'List of items with number values and description' : _c;
   var theme = useContext(ThemeContext);
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
@@ -2109,7 +2307,9 @@ var NumberList = function (_a) {
     bgMode: mapToBgMode(bgMode, true)
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(CardList, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }, React__default.createElement(CardList, {
+    "aria-label": listAriaLabel
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     return React__default.createElement(NumberListCard, __assign({
       key: i,
       ref: numbersRef[i]
@@ -2277,7 +2477,9 @@ var ParallaxBackground = function (_a) {
   }, image && React__default.createElement(StyledImage$3, __assign({
     hAlign: hAlign,
     coverSpace: width !== -1
-  }, image))))));
+  }, image, {
+    alt: ""
+  }))))));
 };
 var templateObject_1$d, templateObject_2$c, templateObject_3$9, templateObject_4$7, templateObject_5$5;
 
@@ -2408,7 +2610,12 @@ var PriceBlock = function (_a) {
 var PriceList = function (_a) {
   var anchorId = _a.anchorId,
       bgMode = _a.bgMode,
-      items = _a.items;
+      items = _a.items,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of items with price information' : _b,
+      _c = _a.jsonLdType,
+      jsonLdType = _c === void 0 ? 'service' : _c,
+      customJsonLdData = _a.customJsonLdData;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   var hasBack = isInverted || bgMode === 'full';
@@ -2417,9 +2624,22 @@ var PriceList = function (_a) {
     anchorId: anchorId,
     bgColor: isInverted ? colors.sectionBg.dark : bgMode === 'full' ? colors.sectionBg.medium : colors.sectionBg.light,
     bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
+  }, customJsonLdData ? generatePriceList(customJsonLdData({
+    items: items
+  })) : generatePriceList({
+    type: jsonLdType,
+    items: items === null || items === void 0 ? void 0 : items.map(function (item) {
+      return {
+        name: item.title,
+        description: item.text,
+        price: item.price
+      };
+    })
+  }), React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(ItemList, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }, React__default.createElement(ItemList, {
+    "aria-label": listAriaLabel
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     return React__default.createElement(PriceBlock, __assign({
       key: i
     }, item, {
@@ -2451,7 +2671,8 @@ var StyledActions$2 = styled(Actions).withConfig({
   componentId: "sc-wnisbz-1"
 })(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n    display: block;\n    margin-top: auto;\n    padding-top: ", "px;\n    text-align: center;\n"], ["\n    display: block;\n    margin-top: auto;\n    padding-top: ", "px;\n    text-align: center;\n"])), spacings.spacer);
 var PriceTag = forwardRef(function (_a, ref) {
-  var superTitle = _a.superTitle,
+  var renderAs = _a.renderAs,
+      superTitle = _a.superTitle,
       title = _a.title,
       text = _a.text,
       action = _a.action,
@@ -2460,13 +2681,19 @@ var PriceTag = forwardRef(function (_a, ref) {
       isHighlighted = _a.isHighlighted,
       hasBackground = _a.hasBackground,
       className = _a.className;
+  var id = useId();
   var inverted = isHighlighted ? !isInverted : false;
+  var titleId = title ? "price-tag-title-".concat(id) : undefined;
+  var descriptionId = text ? "price-tag-desc-".concat(id) : undefined;
   return React__default.createElement(View, {
     ref: ref,
+    as: renderAs || 'div',
     isInverted: isInverted,
     isCentered: isCentered,
     isHighlighted: isHighlighted,
     hasBg: hasBackground,
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
     className: className
   }, superTitle && React__default.createElement(Copy, {
     type: "copy-b",
@@ -2475,12 +2702,14 @@ var PriceTag = forwardRef(function (_a, ref) {
     innerHTML: superTitle,
     "data-sheet": "superTitle"
   }), title && React__default.createElement(Callout, {
+    id: titleId,
     renderAs: "div",
     size: "big",
     isInverted: inverted,
     innerHTML: title,
     "data-sheet": "title"
   }), text && React__default.createElement(Copy, {
+    id: descriptionId,
     size: "medium",
     isInverted: inverted,
     innerHTML: text,
@@ -2489,7 +2718,9 @@ var PriceTag = forwardRef(function (_a, ref) {
     mode: "cover",
     primary: action && action({
       isInverted: inverted,
-      isHighlighted: isHighlighted
+      isHighlighted: isHighlighted,
+      title: title,
+      superTitle: superTitle
     })
   }));
 });
@@ -2500,16 +2731,18 @@ var Tag = styled(PriceTag).withConfig({
   displayName: "PriceTable__Tag",
   componentId: "sc-1n6x4b3-0"
 })(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n    min-height: 500px;\n"], ["\n    min-height: 500px;\n"])));
-var Items = styled.div.withConfig({
+var Items = styled.ul.withConfig({
   displayName: "PriceTable__Items",
   componentId: "sc-1n6x4b3-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 25%;\n        min-width: 286px;\n        max-width: 320px;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 286px;\n        }\n    }\n"], ["\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 25%;\n        min-width: 286px;\n        max-width: 320px;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 286px;\n        }\n    }\n"])), gridSettings.gutter, gridSettings.gutter, gridSettings.gutter, gridSettings.gutter, mq.large);
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 25%;\n        min-width: 286px;\n        max-width: 320px;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 286px;\n        }\n    }\n"], ["\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 25%;\n        min-width: 286px;\n        max-width: 320px;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 286px;\n        }\n    }\n"])), gridSettings.gutter, gridSettings.gutter, gridSettings.gutter, gridSettings.gutter, mq.large);
 
 var PriceTable = function (_a) {
   var anchorId = _a.anchorId,
       items = _a.items,
       isCentered = _a.isCentered,
-      bgMode = _a.bgMode;
+      bgMode = _a.bgMode,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of price cards' : _b;
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
   var priceTagCount = (items === null || items === void 0 ? void 0 : items.length) || 0;
@@ -2532,10 +2765,13 @@ var PriceTable = function (_a) {
     bgMode: mapToBgMode(bgMode)
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(Items, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+  }, React__default.createElement(Items, {
+    "aria-label": listAriaLabel
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
     return React__default.createElement(Tag, __assign({
       key: i,
-      ref: cardRefs[i]
+      ref: cardRefs[i],
+      renderAs: "li"
     }, item, {
       isInverted: isInverted,
       isCentered: isCentered,
@@ -2575,7 +2811,9 @@ var Quote = function (_a) {
   }, React__default.createElement(Wrapper, {
     clampWidth: "normal",
     addWhitespace: true
-  }, React__default.createElement(Content$1, null, text && React__default.createElement(Text, __assign({
+  }, React__default.createElement(Content$1, {
+    "aria-label": concat([text, source], ', ').replace(/<[^>]*>/g, '')
+  }, text && React__default.createElement(Text, __assign({
     size: "small",
     renderAs: "blockquote",
     isInverted: isInverted,
@@ -2640,10 +2878,10 @@ var Item = styled.li.withConfig({
   displayName: "SocialWall__Item",
   componentId: "sc-ggztu7-1"
 })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    padding: 0;\n"], ["\n    display: block;\n    position: relative;\n    padding: 0;\n"])));
-var Card = styled(Link).withConfig({
+var Card = styled.div.withConfig({
   displayName: "SocialWall__Card",
   componentId: "sc-ggztu7-2"
-})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    text-decoration: none;\n    color: '#fff';\n    outline-color: ", ";\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: ", ";\n\n        opacity: 0;\n        pointer-events: none;\n        z-index: 1;\n        transition: opacity 0.2s ease-in-out;\n    }\n\n    &:hover {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:focus {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n"], ["\n    position: relative;\n    display: block;\n    text-decoration: none;\n    color: '#fff';\n    outline-color: ", ";\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: ", ";\n\n        opacity: 0;\n        pointer-events: none;\n        z-index: 1;\n        transition: opacity 0.2s ease-in-out;\n    }\n\n    &:hover {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:focus {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n"])), function (_a) {
+})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    color: '#fff';\n    outline-color: ", ";\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: ", ";\n\n        opacity: 0;\n        pointer-events: none;\n        z-index: 1;\n        transition: opacity 0.2s ease-in-out;\n    }\n\n    &:hover {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:focus {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:has(:focus-visible) {\n        outline: 2px solid\n            ", ";\n\n        outline-offset: 2px;\n    }\n"], ["\n    position: relative;\n    display: block;\n    color: '#fff';\n    outline-color: ", ";\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: ", ";\n\n        opacity: 0;\n        pointer-events: none;\n        z-index: 1;\n        transition: opacity 0.2s ease-in-out;\n    }\n\n    &:hover {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:focus {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:has(:focus-visible) {\n        outline: 2px solid\n            ", ";\n\n        outline-offset: 2px;\n    }\n"])), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
@@ -2654,23 +2892,31 @@ var Card = styled(Link).withConfig({
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getColors(theme).secondary.inverted : getColors(theme).secondary.default;
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
 });
+var TitleLink = styled(Link).withConfig({
+  displayName: "SocialWall__TitleLink",
+  componentId: "sc-ggztu7-3"
+})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n    text-decoration: none;\n    outline: none;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n    }\n\n    &:focus-visible {\n        outline: none;\n    }\n"], ["\n    text-decoration: none;\n    outline: none;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n    }\n\n    &:focus-visible {\n        outline: none;\n    }\n"])));
 var StyledImage$1 = styled(Image).withConfig({
   displayName: "SocialWall__StyledImage",
-  componentId: "sc-ggztu7-3"
-})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n    display: block;\n    height: 100%;\n    z-index: 0;\n"], ["\n    display: block;\n    height: 100%;\n    z-index: 0;\n"])));
+  componentId: "sc-ggztu7-4"
+})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    display: block;\n    height: 100%;\n    z-index: 0;\n"], ["\n    display: block;\n    height: 100%;\n    z-index: 0;\n"])));
 var TextContainer = styled.div.withConfig({
   displayName: "SocialWall__TextContainer",
-  componentId: "sc-ggztu7-4"
-})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n\n    padding: ", "px;\n\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2;\n    transition: opacity 0.2s ease-in-out;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    ", ":hover & {\n        opacity: 1;\n        pointer-events: all;\n    }\n\n    ", ":focus & {\n        opacity: 1;\n        pointer-events: all;\n    }\n"], ["\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n\n    padding: ", "px;\n\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2;\n    transition: opacity 0.2s ease-in-out;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    ", ":hover & {\n        opacity: 1;\n        pointer-events: all;\n    }\n\n    ", ":focus & {\n        opacity: 1;\n        pointer-events: all;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, Card, Card);
+  componentId: "sc-ggztu7-5"
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    text-align: center;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    padding: ", "px;\n\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2;\n    transition: opacity 0.2s ease-in-out;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    ", ":hover & {\n        opacity: 1;\n        pointer-events: all;\n    }\n\n    ", ":focus & {\n        opacity: 1;\n        pointer-events: all;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    text-align: center;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    padding: ", "px;\n\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2;\n    transition: opacity 0.2s ease-in-out;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    ", ":hover & {\n        opacity: 1;\n        pointer-events: all;\n    }\n\n    ", ":focus & {\n        opacity: 1;\n        pointer-events: all;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, Card, Card);
 var FollowUs = styled(Heading).withConfig({
   displayName: "SocialWall__FollowUs",
-  componentId: "sc-ggztu7-5"
-})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    text-transform: uppercase;\n"], ["\n    text-transform: uppercase;\n"])));
+  componentId: "sc-ggztu7-6"
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    text-transform: uppercase;\n"], ["\n    text-transform: uppercase;\n"])));
 var InstagramIcon = styled.div.withConfig({
   displayName: "SocialWall__InstagramIcon",
-  componentId: "sc-ggztu7-6"
-})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    position: absolute;\n    left: 20px;\n    bottom: 20px;\n    color: ", ";\n    z-index: 2;\n\n    & > * {\n        fill: #fff;\n\n        ", ":hover & {\n            color: ", ";\n        }\n    }\n"], ["\n    position: absolute;\n    left: 20px;\n    bottom: 20px;\n    color: ", ";\n    z-index: 2;\n\n    & > * {\n        fill: #fff;\n\n        ", ":hover & {\n            color: ", ";\n        }\n    }\n"])), function (_a) {
+  componentId: "sc-ggztu7-7"
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    position: absolute;\n    left: 20px;\n    bottom: 20px;\n    color: ", ";\n    z-index: 2;\n\n    & > * {\n        fill: #fff;\n\n        ", ":hover & {\n            color: ", ";\n        }\n    }\n"], ["\n    position: absolute;\n    left: 20px;\n    bottom: 20px;\n    color: ", ";\n    z-index: 2;\n\n    & > * {\n        fill: #fff;\n\n        ", ":hover & {\n            color: ", ";\n        }\n    }\n"])), function (_a) {
   var theme = _a.theme;
   return getColors(theme).text.inverted;
 }, Card, function (_a) {
@@ -2683,8 +2929,9 @@ var SocialWall = function (_a) {
       items = _a.items,
       hashTag = _a.hashTag,
       followUs = _a.followUs,
-      socialIcon = _a.socialIcon,
-      bgMode = _a.bgMode;
+      bgMode = _a.bgMode,
+      _b = _a.listAriaLabel,
+      listAriaLabel = _b === void 0 ? 'List of cards with social media links' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   var hasBg = bgMode === 'full';
@@ -2695,17 +2942,16 @@ var SocialWall = function (_a) {
     addSeperation: true
   }, React__default.createElement(Wrapper, {
     addWhitespace: true
-  }, React__default.createElement(Cards, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    var _a;
-
+  }, React__default.createElement(Cards, {
+    "aria-label": listAriaLabel
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    var followUsText = item.followUs || followUs || 'Follow Us';
+    var hashTagText = item.hashTag || hashTag;
     return React__default.createElement(Item, {
       key: i
-    }, React__default.createElement(Card, __assign({
-      isExternal: true
-    }, item.link, {
-      isInverted: isInverted,
-      ariaLabel: (_a = item === null || item === void 0 ? void 0 : item.image) === null || _a === void 0 ? void 0 : _a.alt
-    }), item.image && React__default.createElement(StyledImage$1, __assign({}, item.image, {
+    }, React__default.createElement(Card, {
+      isInverted: isInverted
+    }, item.image && React__default.createElement(StyledImage$1, __assign({}, item.image, {
       coverSpace: true,
       ratios: {
         small: {
@@ -2713,18 +2959,21 @@ var SocialWall = function (_a) {
           h: 1
         }
       },
-      isInverted: isInverted
-    })), React__default.createElement(TextContainer, null, React__default.createElement(FollowUs, {
+      isInverted: isInverted,
+      isDecorative: true
+    })), React__default.createElement(TextContainer, null, React__default.createElement(TitleLink, __assign({
+      isExternal: true
+    }, item.link), React__default.createElement(FollowUs, {
       size: "super",
       isInverted: true
-    }, followUs ? followUs : 'Follow Us On Instagram'), hashTag && React__default.createElement(Heading, {
+    }, followUsText)), hashTagText && React__default.createElement(Heading, {
       size: "heading-2",
       isInverted: true
-    }, hashTag)), React__default.createElement(InstagramIcon, null, socialIcon || React__default.createElement(Instagram, null))));
+    }, hashTagText)), React__default.createElement(InstagramIcon, null, item.socialIcon || React__default.createElement(Instagram, null))));
   }))));
 };
 var SocialWall$1 = withLibTheme(SocialWall);
-var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$2;
+var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8$1;
 
 var TableSection = styled(Section).withConfig({
   displayName: "Table__TableSection",
@@ -2738,7 +2987,9 @@ var TableWrapper = styled(Wrapper).withConfig({
 var Table = 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;
@@ -2752,7 +3003,9 @@ var Table = function (_a) {
       key: i
     }, item, {
       isInverted: isInverted,
-      hasBack: hasBg
+      hasBack: hasBg,
+      ariaControlLeft: ariaControlLeft,
+      ariaControlRight: ariaControlRight
     }));
   })));
 };
@@ -2804,9 +3057,11 @@ var StyledActions$1 = styled(Actions).withConfig({
 })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer);
 
 var Teaser = function (_a) {
+  var _b;
+
   var anchorId = _a.anchorId,
-      _b = _a.isMirrored,
-      isMirrored = _b === void 0 ? false : _b,
+      _c = _a.isMirrored,
+      isMirrored = _c === void 0 ? false : _c,
       bgMode = _a.bgMode,
       superTitle = _a.superTitle,
       superTitleAs = _a.superTitleAs,
@@ -2824,15 +3079,17 @@ var Teaser = function (_a) {
   var hasVideo = isValidArray(video === null || video === void 0 ? void 0 : video.urls, false);
   var viewRef = useRef(null);
 
-  var _c = useState(!(image === null || image === void 0 ? void 0 : image.small) || false),
-      isLoaded = _c[0],
-      setLoaded = _c[1];
+  var _d = useState(!(image === null || image === void 0 ? void 0 : image.small) || false),
+      isLoaded = _d[0],
+      setLoaded = _d[1];
 
-  var _d = useState(false),
-      isVideoActive = _d[0],
-      setVideoActive = _d[1];
+  var _e = useState(false),
+      isVideoActive = _e[0],
+      setVideoActive = _e[1];
 
   var isObserverSupported = useObserverSupport();
+  var id = useId();
+  var captionId = description ? "media-caption-".concat(id) : undefined;
   useUpdateEffect(function () {
     if (!viewRef.current || !hasVideo) return;
 
@@ -2880,7 +3137,9 @@ var Teaser = function (_a) {
     ref: viewRef
   }, (image === null || image === void 0 ? void 0 : image.small) && (!video || !isLoaded) && React__default.createElement(StyledImage, __assign({}, image, {
     isInverted: isInverted,
-    coverSpace: true
+    alt: (_b = image.alt) !== null && _b !== void 0 ? _b : '',
+    coverSpace: true,
+    ariaDescribedBy: captionId
   })), hasVideo && React__default.createElement(Video$3, {
     urls: isVideoActive ? video === null || video === void 0 ? void 0 : video.urls : undefined,
     muted: true,
@@ -2891,8 +3150,11 @@ var Teaser = function (_a) {
     },
     ratios: video === null || video === void 0 ? void 0 : video.aspectRatios,
     isVisible: isLoaded,
-    isInverted: isInverted
+    isInverted: isInverted,
+    ariaLabel: description ? undefined : "Video of: ".concat(title),
+    ariaDescribedBy: captionId
   }), description && React__default.createElement(Description, {
+    id: captionId,
     size: "small",
     renderAs: "figcaption",
     isInverted: isInverted,
@@ -3033,9 +3295,11 @@ var StyledActions = styled(Actions).withConfig({
 })(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer);
 
 var TeaserWide = function (_a) {
+  var _b;
+
   var anchorId = _a.anchorId,
-      _b = _a.isMirrored,
-      isMirrored = _b === void 0 ? false : _b,
+      _c = _a.isMirrored,
+      isMirrored = _c === void 0 ? false : _c,
       superTitle = _a.superTitle,
       superTitleAs = _a.superTitleAs,
       title = _a.title,
@@ -3052,13 +3316,13 @@ var TeaserWide = function (_a) {
   var hasVideo = isValidArray(video === null || video === void 0 ? void 0 : video.urls, false);
   var viewRef = useRef(null);
 
-  var _c = useState(!(image === null || image === void 0 ? void 0 : image.small) || false),
-      isLoaded = _c[0],
-      setLoaded = _c[1];
+  var _d = useState(!(image === null || image === void 0 ? void 0 : image.small) || false),
+      isLoaded = _d[0],
+      setLoaded = _d[1];
 
-  var _d = useState(false),
-      isVideoActive = _d[0],
-      setVideoActive = _d[1];
+  var _e = useState(false),
+      isVideoActive = _e[0],
+      setVideoActive = _e[1];
 
   var isObserverSupported = useObserverSupport();
   useUpdateEffect(function () {
@@ -3093,6 +3357,7 @@ var TeaserWide = function (_a) {
   }, (image === null || image === void 0 ? void 0 : image.small) && (!video || !isLoaded) && React__default.createElement(WideImage, __assign({
     coverSpace: true
   }, image, {
+    alt: (_b = image.alt) !== null && _b !== void 0 ? _b : '',
     isMirrored: isMirrored,
     isInverted: isInverted
   })), hasVideo && React__default.createElement(WideVideo, {
@@ -3106,7 +3371,8 @@ var TeaserWide = function (_a) {
     isVisible: isLoaded,
     isInverted: isInverted,
     isMirrored: isMirrored,
-    ratios: video === null || video === void 0 ? void 0 : video.aspectRatios
+    ratios: video === null || video === void 0 ? void 0 : video.aspectRatios,
+    ariaLabel: "Video of: ".concat(title)
   }), React__default.createElement(Wrapper, {
     clampWidth: "normal",
     addWhitespace: true
@@ -3289,7 +3555,10 @@ var Video$1 = 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;
   var colors = useLibTheme().colors;
@@ -3304,8 +3573,10 @@ var Video$1 = function (_a) {
   }, React__default.createElement(VideoCard, {
     bgImage: bgImage,
     embedId: embedId,
+    isInverted: isInverted,
     playIcon: playIcon,
     consentText: consentText,
+    playBtnAriaLabel: playBtnAriaLabel,
     consentAction: consentAction,
     onPlayClick: onPlayClick
   })));
@@ -3315,7 +3586,7 @@ var Video$2 = withLibTheme(Video$1);
 var VideoContainer = styled.div.withConfig({
   displayName: "RawVideo__VideoContainer",
   componentId: "sc-ylrujv-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    position: relative;\n    cursor: pointer;\n"], ["\n    position: relative;\n    cursor: pointer;\n"])));
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    position: relative;\n    cursor: pointer;\n\n    &:has(video) {\n        cursor: default;\n    }\n"], ["\n    position: relative;\n    cursor: pointer;\n\n    &:has(video) {\n        cursor: default;\n    }\n"])));
 var Overlay = styled.div.withConfig({
   displayName: "RawVideo__Overlay",
   componentId: "sc-ylrujv-1"
@@ -3345,7 +3616,7 @@ var Overlay = styled.div.withConfig({
 var VideoControls = styled.button.withConfig({
   displayName: "RawVideo__VideoControls",
   componentId: "sc-ylrujv-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"], ["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"])), function (_a) {
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"], ["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"])), function (_a) {
   var theme = _a.theme;
   return getColors(theme).elementBg.light;
 }, function (_a) {
@@ -3376,13 +3647,15 @@ var RawVideo = function (_a) {
       placeholderImg = _a.placeholderImg,
       playIcon = _a.playIcon,
       autoplay = _a.autoplay,
-      loop = _a.loop;
+      loop = _a.loop,
+      _b = _a.playBtnAriaLabel,
+      playBtnAriaLabel = _b === void 0 ? 'Play video' : _b;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
 
-  var _b = useState(autoplay || false),
-      isStarted = _b[0],
-      setIsStarted = _b[1];
+  var _c = useState(autoplay || false),
+      isStarted = _c[0],
+      setIsStarted = _c[1];
 
   return React__default.createElement(Section, {
     anchorId: anchorId,
@@ -3411,7 +3684,9 @@ var RawVideo = function (_a) {
   }), !isStarted && React__default.createElement(Overlay, {
     bgImage: placeholderImg,
     isInverted: isInverted
-  }, React__default.createElement(VideoControls, null, playIcon || React__default.createElement(Play, {
+  }, React__default.createElement(VideoControls, {
+    "aria-label": playBtnAriaLabel
+  }, playIcon || React__default.createElement(Play, {
     iconColor: "#000"
   }))))));
 };
@@ -3482,7 +3757,7 @@ var ContactListLink = styled(Link).withConfig({
       isInverted = _a.isInverted;
   return isInverted ? getFonts(theme)['copy-b'].big.colorInverted : getFonts(theme)['copy-b'].big.color;
 }, spacings.nudge * 1.5);
-var AddressContainer = styled.div.withConfig({
+var AddressContainer = styled.address.withConfig({
   displayName: "Map__AddressContainer",
   componentId: "sc-6qc5jb-8"
 })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\n\n    ", "\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\n\n    ", "\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), function (_a) {
@@ -3552,7 +3827,8 @@ var LocationInfoCard = function (_a) {
     } : undefined,
     isInverted: isInverted
   }), contact && React__default.createElement(ContactList, {
-    isInverted: isInverted
+    isInverted: isInverted,
+    "aria-label": "contact information"
   }, ((_d = contact === null || contact === void 0 ? void 0 : contact.telephone) === null || _d === void 0 ? void 0 : _d.label) && React__default.createElement("li", null, phoneIconContent && React__default.createElement("span", null, phoneIconContent), React__default.createElement(ContactListLink, {
     isInverted: isInverted,
     href: "tel:".concat(contact.telephone.link || contact.telephone.label)
@@ -3720,7 +3996,8 @@ var Map = function (_a) {
   }) : React__default.createElement(Control$1, {
     isInverted: isInverted,
     isDisabled: false,
-    onClick: goToNext
+    onClick: goToNext,
+    ariaLabel: "Next location"
   }, React__default.createElement(ArrowRightGhost, null)), controlPrev ? controlPrev({
     isInverted: isInverted,
     isActive: true,
@@ -3729,7 +4006,8 @@ var Map = function (_a) {
   }) : React__default.createElement(Control$1, {
     isInverted: isInverted,
     isDisabled: false,
-    onClick: goToPrevious
+    onClick: goToPrevious,
+    ariaLabel: "Previous location"
   }, React__default.createElement(ArrowLeftGhost, null)))))))));
 };
 var Map$1 = withLibTheme(Map);