hr-design-system-handlebars 1.50.41 → 1.51.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.51.0 (Fri Dec 08 2023)
+
+#### 🚀 Enhancement
+
+- WIP: DPE-2582 Einstellungsmenü mit Screenreader bedienbar machen [#751](https://github.com/mumprod/hr-design-system-handlebars/pull/751) ([@Sunny1112358](https://github.com/Sunny1112358) [@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.50.41 (Thu Dec 07 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/_default/conf/locatags.json

@@ -122,6 +122,7 @@
     "share_whatsapp_linktitle": "Bei Whatsapp teilen",
     "share_print_linktitle": "Seite ausdrucken",
     "social_media_links_text": "Folgen Sie mir:",
+    "screen_reader_text_external_anbieter":"{0} aktivieren/deaktivieren",
     "story_cite_author_sr": "Zitat von",
     "story_cite_intro_sr": "Zitat",
     "story_cite_outro_sr": "Zitat Ende",

package/dist/assets/index.css

@@ -439,7 +439,7 @@ video {
   --tw-gradient-to-position:  ;
 }
 
-.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-md, .shadow-xl, .before\:shadow-stage::before {
+.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -1205,9 +1205,6 @@ article.indexText ul {
 .m-4 {
   margin: 1rem;
 }
-.m-auto {
-  margin: auto;
-}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1466,9 +1463,6 @@ article.indexText ul {
 .inline {
   display: inline;
 }
-.\!flex {
-  display: flex !important;
-}
 .flex {
   display: flex;
 }
@@ -1954,9 +1948,6 @@ article.indexText ul {
 .overflow-visible {
   overflow: visible;
 }
-.overflow-scroll {
-  overflow: scroll;
-}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -1966,6 +1957,9 @@ article.indexText ul {
 .overflow-x-scroll {
   overflow-x: scroll;
 }
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
 .scroll-smooth {
   scroll-behavior: smooth;
 }
@@ -3217,7 +3211,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1701960574124;
+  counter-reset: cnt1702024773161;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3478,7 +3472,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1701960574124 1;
+  counter-increment: cnt1702024773161 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3494,7 +3488,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1701960574124);
+  content: counter(cnt1702024773161);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -3506,6 +3500,16 @@ article.indexText ul {
   background-color: #2c7e13;
   background-color: var(--color-toggle-confirmation);
 }
+.toggleSwitch-checkbox:focus+.toggleSwitch-label {
+  --tw-shadow: 0 0 0 0.25rem;
+  --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+  --tw-shadow-color: var(--color-focus-state);
+  --tw-shadow: var(--tw-shadow-colored);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .toggleSwitch-label::after {
   position: absolute;
   top: 2px;
@@ -5071,6 +5075,9 @@ article.indexText ul {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.aria-hidden\:hidden[aria-hidden="true"] {
+  display: none;
+}
 .before\:absolute::before {
   position: absolute;
 }

package/dist/assets/js/alpine.js

@@ -10,6 +10,7 @@ import mainNavigationHandler from 'components/site_header/mainNavigationHandler.
 import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
 import overlayHandler from 'components/site_header/overlayHandler.alpine'
 import dropdown from 'components/site_header/dropdown.alpine'
+ 
 
 AsyncAlpine.init(Alpine)
     .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))

package/dist/assets/js/base/tracking/pianoHelper.subfeature.js

@@ -7,7 +7,7 @@ const isTrackingAllowed = () => {
 
 const uxAction = (label, secondLevelId) => {
     secondLevelId = secondLevelId || pageDisplayConfig.site_level2
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined && isTrackingAllowed()) {
         pa.sendEvent('click.action', {
             click: label,
             site_level2: secondLevelId,
@@ -17,7 +17,7 @@ const uxAction = (label, secondLevelId) => {
 
 const uxNavigation = (label, secondLevelId) => {
     secondLevelId = secondLevelId || pageDisplayConfig.site_level2
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined  && isTrackingAllowed()) {
         pa.sendEvent('click.navigation', {
             click: label,
             site_level2: secondLevelId,
@@ -26,14 +26,14 @@ const uxNavigation = (label, secondLevelId) => {
 }
 
 const pi = (label, secondLevelId) => {
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined  && isTrackingAllowed()) {
         pa.sendEvent('page.display', pageDisplayConfig)
     }
 }
 
 const download = (label, secondLevelId) => {
     secondLevelId = secondLevelId || pageDisplayConfig.site_level2
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined  && isTrackingAllowed()) {
         pa.sendEvent('click.download', {
             click: label,
             site_level2: secondLevelId,

package/dist/assets/js/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -3,25 +3,26 @@ import TrackingCookie from 'components/externalService/trackingCookie.subfeature
 import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
 
+import A11yDialog from 'a11y-dialog'
+
 const DataPolicySettings = function (context) {
     const { options } = context,
         { element: rootElement } = context,
+        container = hr$('#datapolicy-settings-dialog',document)[0],
+        dialog = new A11yDialog(container),
         settingsButtons = hr$('.js-data-policy-settings-button', document),
         overlay = hr$('.js-data-policy-settings-overlay', rootElement)[0],
         closeButton = hr$('.js-data-policy-settings-close-button', rootElement)[0],
         bodyElement = document.getElementsByTagName('html')[0],
         datapolicyCookie = new DatapolicyCookie(),
         trackingCookie = new TrackingCookie(),
-        toggleSwitches = hr$('.js-toggleSwitch-checkbox', rootElement),
-        toggleSwitchesExternal = hr$('.js-toggleSwitch-external', rootElement),
-        toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', rootElement),
-        toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', rootElement)[0],
-        providerTitle = hr$('.js-providerTitle', rootElement)[0],
+        toggleSwitches = hr$('.js-toggleSwitch-checkbox', container),
+        toggleSwitchesExternal = hr$('.js-toggleSwitch-external', container),
+        toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', container),
+        toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', container)[0],
+        providerTitle = hr$('.js-providerTitle', container)[0],
         trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
-    let atiSecondLevelId = window.xtn2,
-        isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        //isWebview = window.location.href.match(/(app)(\.[a-zA-Z]*)(\.de)/i), //App URL ...app.hr.de
-        //isWebview = window.location.href.match(/(app)/i), //App URL ...app.hr.de
+        let isWebview = window.parent.document.documentElement.classList.contains('webview'),
         cookie = {}
 
     console.log('gelaaaadeeeeeeeen')
@@ -51,48 +52,28 @@ const DataPolicySettings = function (context) {
         cookie = 'true'
         setJSONCookie('hsAppSettingsButton', cookie, trackingCookieLifetime)
     }
-    const initializeSettingsButtons = function () {
-        for (let i = 0; i < settingsButtons.length; ++i) {
-            if (settingsButtons.length - i == 1) {
-                listen(
-                    'click',
-                    function () {
-                        openDialog('Footer')
-                        atiSecondLevelId = 1
-                    },
-                    settingsButtons[i]
-                )
-            } else {
-                if (!settingsButtons[i].getAttribute('listener')) {
-                    listen(
-                        'click',
-                        function () {
-                            openDialog('DSGVO-Overlay')
-                        },
-                        settingsButtons[i]
-                    )
-                    settingsButtons[i].setAttribute('listener', 'true')
-                }
-            }
-        }
-    }
-    const openDialog = function (settingsButtonLocation) {
-        overlay.classList.add('!flex')
+
+    const onDialogShow = function (event) {
         bodyElement.classList.add('optionOpen')
-        uxAction('Einstellungsdialog geöffnet - ' + settingsButtonLocation, atiSecondLevelId)
-    }
-    const closeDialogeOnOverlay = function (e) {
-        if (e.target !== this) return
-        closeDialog()
+        const opener = event.detail == null && event.detail.target.closest('[data-a11y-dialog-show]') ? event.detail.target.closest('[data-a11y-dialog-show]') : null
+        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : {label:"Datenschutzerklärung"}
+        if(undefined !== pianoTracking.secondLevelId){
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label, pianoTracking.secondLevelId)
+        }else{
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label)
+        }
     }
-    const closeDialog = function () {
-        overlay.classList.remove('!flex')
+
+    const onDialogHide = function () {
+        console.log("Hide")
         bodyElement.classList.remove('optionOpen')
     }
     const shouldDialogBeOpendOnLoad = function () {
         const urlParam = getUrlVars()['openDialog']
         if (typeof urlParam !== 'undefined' && urlParam === 'true') {
-            openDialog('Datenschutzerklärung')
+            dialog.show()
         }
     }
     const getUrlVars = function () {
@@ -253,33 +234,22 @@ const DataPolicySettings = function (context) {
         return trackingCookie.isTrackingCookieExistent(trackingService)
     }
     const initializeEventListeners = function () {
-        listen('hr:settingsButtonInsideDataPolicyBoxClicked', function () {
-            openDialog('DSGVO-Overlay')
-        })
         listen('change', toggleAll, toggleAllSwitch)
-        listen('click', closeDialog, closeButton)
-        listen('click', closeDialogeOnOverlay, overlay)
+        listen("show", onDialogShow, container)
+        listen("hide", onDialogHide, container)
     }
     // steuert die Darstellung des Buttons für die hs-App ///
     showSettingsButton()
-    //// 1. Alle Settings Buttons initialisieren ////
-    initializeSettingsButtons()
-
-    //// 2. Toggle States aller Switches setzen ////
+    //// 1. Toggle States aller Switches setzen ////
     ////    Cookies setzen usw.                 ////
     initializeToggleStateExternal()
 
     initializeToggleStateTracking()
 
-    //// 3. Event Listener initialisieren ////
+    //// 2. Event Listener initialisieren ////
     initializeEventListeners()
 
     shouldDialogBeOpendOnLoad()
-
-    //// 4. Funktion extern aufrufbar machen ////
-    return {
-        initializeSettingsButtons: initializeSettingsButtons,
-    }
 }
 
 export default DataPolicySettings

package/dist/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -1,32 +1,42 @@
 <div class="flex items-center justify-center mt-4 md:mt-2 md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
-        {{#> components/button/button _size="md" _id="globalSettingsButton" _css=" js-data-policy-settings-button" _variant="secondary" _onBackground=(configProperty "footer.onBackground") }}
-            {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
-            {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
-        {{/components/button/button}}
-    
-        <div class="hidden fixed overflow-scroll w-full h-full top-0 left-0 right-0 bottom-0 z-300 pb-6 bg-black/[0.5] js-data-policy-settings-overlay{{#if _webview}} hidden{{/if}}">
-        <div class="m-auto pt-0 max-w-[480px] bg-white">
+        {{#with this}}
+            {{#> components/button/button _size="md" _id="globalSettingsButton" _css=" js-data-policy-settings-button" _variant="secondary" _onBackground=(configProperty "footer.onBackground") }}
+                {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
+                {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
+            {{/components/button/button}}
+            {{#*inline "htmlProperties"}}
+                data-piano-tracking='{"label":"Footer","secondLevelId":"1"}'
+                data-a11y-dialog-show="datapolicy-settings-dialog"
+            {{/inline}}
+        {{/with}}
+    </div>
+    <div id="datapolicy-settings-dialog"
+  aria-labelledby="datapolicy-settings-title"
+  aria-hidden="true" class="aria-hidden:hidden flex justify-center fixed inset-0 z-300 overflow-y-scroll">
+        <div class="fixed w-full h-full top-0 left-0 right-0 bottom-0 bg-black/[0.5] js-data-policy-settings-overlay{{#if _webview}} hidden{{/if}}" data-a11y-dialog-hide>
+        </div>
+        <div role="document" class="pt-0 max-w-[480px] z-300 bg-white mb-6">
             <div class="flex w-full px-6 bg-primary z-100">
                 <span class="flex justify-start w-full py-4">
                     <span
                         class="pr-4 -ml-1 fill-white"> {{> components/base/image/icon _icon="settings" _addClass="h-7 w-7 inline" }}</span>
                     <span class="w-full text-2xl text-white font-headingSerif">Einstellungen</span>
-                    <button class="text-white bg-transparent fill-current js-data-policy-settings-close-button">
+                    <button type="button" "aria-label="Close dialog" class="link-focus-white text-white bg-transparent fill-current js-data-policy-settings-close-button" data-a11y-dialog-hide>
                         {{> components/base/image/icon _icon="close" _addClass="h-6 w-6 inline"}}
                     </button>
                 </span>
             </div>
 
             <div class="bg-[#d8e9f6] p-6 {{#if _webview}} hidden{{/if}}">
-                <span class="block text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_description_title"}}</span>
+                <span id="datapolicy-settings-title" class="block text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_description_title"}}</span>
                 <p class="mt-4 text-black">
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_tracking_service_description_text"}}
-                            <a class="block mt-2 text-link hover:underline" target="_blank"
-                               rel="noopener noreferrer" href="{{this.url}}"
-                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
-                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            <a class="ds-link block mt-2 text-link hover:underline" target="_blank"
+                            rel="noopener noreferrer" href="{{this.url}}"
+                            title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                            {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
                             </a>
                         {{/with}}
                     {{/with}}
@@ -40,19 +50,19 @@
             <ul class="{{#if _webview}} hidden{{/if}}">
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
                     <span class="text-base text-black">AGF <a
-                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        class="ds-link mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/)</a></span>
                     <div class="flex w-fit toggleSwitch">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
                     <span class="text-base text-black">AT Internet <a
-                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        class="ds-link mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/)</a></span>
                     <div class="flex w-fit toggleSwitch">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -63,10 +73,10 @@
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_description_text"}}
-                            <a class="block mt-2 text-link hover:underline" target="_blank"
-                               rel="noopener noreferrer" href="{{this.url}}"
-                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
-                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            <a class=ds-link block mt-2 text-link hover:underline" target="_blank"
+                            rel="noopener noreferrer" href="{{this.url}}"
+                            title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                            {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
                             </a>
                         {{/with}}
                     {{/with}}
@@ -77,7 +87,7 @@
                 <div class="flex justify-between all">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right toggleSwitch">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all"}}
+                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -88,12 +98,11 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3] {{this.key}}">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right toggleSwitch">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden }}
+                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}
                 {{/with}}
             </ul>
         </div>
-    </div>
     </div>

package/dist/views/components/forms/toggle_button.hbs

@@ -1,2 +1,4 @@
-    <input class="h-0 w-0 invisible toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#unless _isInitiallyHidden}}initial="checked"{{/unless}}/>
-    <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">{{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>
+    <input class="h-0 w-0 opacity-0 toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#unless _isInitiallyHidden}}initial="checked"{{/unless}}/>    
+    <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">
+        <span class="sr-only">{{_screenReaderText}}</span>
+        {{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>

package/dist/views_static/components/dataPolicySettings/data_policy_settings.hbs

@@ -1,32 +1,42 @@
 <div class="flex items-center justify-center mt-4 md:mt-2 md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
-        {{#> components/button/button _size="md" _id="globalSettingsButton" _css=" js-data-policy-settings-button" _variant="secondary" _onBackground=(configProperty "footer.onBackground") }}
-            {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
-            {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
-        {{/components/button/button}}
-    
-        <div class="hidden fixed overflow-scroll w-full h-full top-0 left-0 right-0 bottom-0 z-300 pb-6 bg-black/[0.5] js-data-policy-settings-overlay{{#if _webview}} hidden{{/if}}">
-        <div class="m-auto pt-0 max-w-[480px] bg-white">
+        {{#with this}}
+            {{#> components/button/button _size="md" _id="globalSettingsButton" _css=" js-data-policy-settings-button" _variant="secondary" _onBackground=(configProperty "footer.onBackground") }}
+                {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
+                {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
+            {{/components/button/button}}
+            {{#*inline "htmlProperties"}}
+                data-piano-tracking='{"label":"Footer","secondLevelId":"1"}'
+                data-a11y-dialog-show="datapolicy-settings-dialog"
+            {{/inline}}
+        {{/with}}
+    </div>
+    <div id="datapolicy-settings-dialog"
+  aria-labelledby="datapolicy-settings-title"
+  aria-hidden="true" class="aria-hidden:hidden flex justify-center fixed inset-0 z-300 overflow-y-scroll">
+        <div class="fixed w-full h-full top-0 left-0 right-0 bottom-0 bg-black/[0.5] js-data-policy-settings-overlay{{#if _webview}} hidden{{/if}}" data-a11y-dialog-hide>
+        </div>
+        <div role="document" class="pt-0 max-w-[480px] z-300 bg-white mb-6">
             <div class="flex w-full px-6 bg-primary z-100">
                 <span class="flex justify-start w-full py-4">
                     <span
                         class="pr-4 -ml-1 fill-white"> {{> components/base/image/icon _icon="settings" _addClass="h-7 w-7 inline" }}</span>
                     <span class="w-full text-2xl text-white font-headingSerif">Einstellungen</span>
-                    <button class="text-white bg-transparent fill-current js-data-policy-settings-close-button">
+                    <button type="button" "aria-label="Close dialog" class="link-focus-white text-white bg-transparent fill-current js-data-policy-settings-close-button" data-a11y-dialog-hide>
                         {{> components/base/image/icon _icon="close" _addClass="h-6 w-6 inline"}}
                     </button>
                 </span>
             </div>
 
             <div class="bg-[#d8e9f6] p-6 {{#if _webview}} hidden{{/if}}">
-                <span class="block text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_description_title"}}</span>
+                <span id="datapolicy-settings-title" class="block text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_description_title"}}</span>
                 <p class="mt-4 text-black">
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_tracking_service_description_text"}}
-                            <a class="block mt-2 text-link hover:underline" target="_blank"
-                               rel="noopener noreferrer" href="{{this.url}}"
-                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
-                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            <a class="ds-link block mt-2 text-link hover:underline" target="_blank"
+                            rel="noopener noreferrer" href="{{this.url}}"
+                            title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                            {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
                             </a>
                         {{/with}}
                     {{/with}}
@@ -40,19 +50,19 @@
             <ul class="{{#if _webview}} hidden{{/if}}">
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
                     <span class="text-base text-black">AGF <a
-                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        class="ds-link mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/)</a></span>
                     <div class="flex w-fit toggleSwitch">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
                     <span class="text-base text-black">AT Internet <a
-                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        class="ds-link mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/)</a></span>
                     <div class="flex w-fit toggleSwitch">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -63,10 +73,10 @@
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_description_text"}}
-                            <a class="block mt-2 text-link hover:underline" target="_blank"
-                               rel="noopener noreferrer" href="{{this.url}}"
-                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
-                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            <a class=ds-link block mt-2 text-link hover:underline" target="_blank"
+                            rel="noopener noreferrer" href="{{this.url}}"
+                            title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                            {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
                             </a>
                         {{/with}}
                     {{/with}}
@@ -77,7 +87,7 @@
                 <div class="flex justify-between all">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right toggleSwitch">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all"}}
+                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -88,12 +98,11 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3] {{this.key}}">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right toggleSwitch">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden }}
+                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}
                 {{/with}}
             </ul>
         </div>
-    </div>
     </div>

package/dist/views_static/components/forms/toggle_button.hbs

@@ -1,2 +1,4 @@
-    <input class="h-0 w-0 invisible toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#unless _isInitiallyHidden}}initial="checked"{{/unless}}/>
-    <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">{{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>
+    <input class="h-0 w-0 opacity-0 toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#unless _isInitiallyHidden}}initial="checked"{{/unless}}/>    
+    <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">
+        <span class="sr-only">{{_screenReaderText}}</span>
+        {{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.50.41",
+    "version": "1.51.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",
@@ -109,6 +109,7 @@
         "@alpinejs/collapse": "^3.8.1",
         "@alpinejs/intersect": "^3.13.3",
         "@tailwindcss/line-clamp": "^0.4.2",
+        "a11y-dialog": "^8.0.4",
         "alpinejs": "^3.8.1",
         "async-alpine": "^1.0.0",
         "dialog-polyfill": "^0.5.6",

package/src/assets/brand/_default/conf/locatags.json

@@ -122,6 +122,7 @@
     "share_whatsapp_linktitle": "Bei Whatsapp teilen",
     "share_print_linktitle": "Seite ausdrucken",
     "social_media_links_text": "Folgen Sie mir:",
+    "screen_reader_text_external_anbieter":"{0} aktivieren/deaktivieren",
     "story_cite_author_sr": "Zitat von",
     "story_cite_intro_sr": "Zitat",
     "story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -122,6 +122,7 @@
 	"share_whatsapp_linktitle": "Bei Whatsapp teilen",
 	"share_print_linktitle": "Seite ausdrucken",
 	"social_media_links_text": "Folgen Sie mir:",
+	"screen_reader_text_external_anbieter": "{0} aktivieren/deaktivieren",
 	"story_cite_author_sr": "Zitat von",
 	"story_cite_intro_sr": "Zitat",
 	"story_cite_outro_sr": "Zitat Ende",

package/src/assets/css/custom-utilities.css

@@ -228,6 +228,10 @@
     .toggleSwitch-checkbox:checked+.toggleSwitch-label {
         @apply bg-toggle-confirmation;
     }
+
+    .toggleSwitch-checkbox:focus+.toggleSwitch-label { 
+        @apply shadow-teaser-focus shadow-focus-state outline-none;
+    }
     
     .toggleSwitch-label {
         @apply after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[21px] after:h-[21px] after:bg-white after:rounded-2xl after:transition-all after:duration-300 

package/src/assets/js/alpine.js

@@ -10,6 +10,7 @@ import mainNavigationHandler from 'components/site_header/mainNavigationHandler.
 import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
 import overlayHandler from 'components/site_header/overlayHandler.alpine'
 import dropdown from 'components/site_header/dropdown.alpine'
+ 
 
 AsyncAlpine.init(Alpine)
     .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))

package/src/stories/views/base/tracking/pianoHelper.subfeature.js

@@ -7,7 +7,7 @@ const isTrackingAllowed = () => {
 
 const uxAction = (label, secondLevelId) => {
     secondLevelId = secondLevelId || pageDisplayConfig.site_level2
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined && isTrackingAllowed()) {
         pa.sendEvent('click.action', {
             click: label,
             site_level2: secondLevelId,
@@ -17,7 +17,7 @@ const uxAction = (label, secondLevelId) => {
 
 const uxNavigation = (label, secondLevelId) => {
     secondLevelId = secondLevelId || pageDisplayConfig.site_level2
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined  && isTrackingAllowed()) {
         pa.sendEvent('click.navigation', {
             click: label,
             site_level2: secondLevelId,
@@ -26,14 +26,14 @@ const uxNavigation = (label, secondLevelId) => {
 }
 
 const pi = (label, secondLevelId) => {
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined  && isTrackingAllowed()) {
         pa.sendEvent('page.display', pageDisplayConfig)
     }
 }
 
 const download = (label, secondLevelId) => {
     secondLevelId = secondLevelId || pageDisplayConfig.site_level2
-    if (pa && isTrackingAllowed()) {
+    if (typeof pa != "undefined" && pa != undefined  && isTrackingAllowed()) {
         pa.sendEvent('click.download', {
             click: label,
             site_level2: secondLevelId,

package/src/stories/views/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -3,25 +3,26 @@ import TrackingCookie from 'components/externalService/trackingCookie.subfeature
 import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
 
+import A11yDialog from 'a11y-dialog'
+
 const DataPolicySettings = function (context) {
     const { options } = context,
         { element: rootElement } = context,
+        container = hr$('#datapolicy-settings-dialog',document)[0],
+        dialog = new A11yDialog(container),
         settingsButtons = hr$('.js-data-policy-settings-button', document),
         overlay = hr$('.js-data-policy-settings-overlay', rootElement)[0],
         closeButton = hr$('.js-data-policy-settings-close-button', rootElement)[0],
         bodyElement = document.getElementsByTagName('html')[0],
         datapolicyCookie = new DatapolicyCookie(),
         trackingCookie = new TrackingCookie(),
-        toggleSwitches = hr$('.js-toggleSwitch-checkbox', rootElement),
-        toggleSwitchesExternal = hr$('.js-toggleSwitch-external', rootElement),
-        toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', rootElement),
-        toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', rootElement)[0],
-        providerTitle = hr$('.js-providerTitle', rootElement)[0],
+        toggleSwitches = hr$('.js-toggleSwitch-checkbox', container),
+        toggleSwitchesExternal = hr$('.js-toggleSwitch-external', container),
+        toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', container),
+        toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', container)[0],
+        providerTitle = hr$('.js-providerTitle', container)[0],
         trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
-    let atiSecondLevelId = window.xtn2,
-        isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        //isWebview = window.location.href.match(/(app)(\.[a-zA-Z]*)(\.de)/i), //App URL ...app.hr.de
-        //isWebview = window.location.href.match(/(app)/i), //App URL ...app.hr.de
+        let isWebview = window.parent.document.documentElement.classList.contains('webview'),
         cookie = {}
 
     console.log('gelaaaadeeeeeeeen')
@@ -51,48 +52,28 @@ const DataPolicySettings = function (context) {
         cookie = 'true'
         setJSONCookie('hsAppSettingsButton', cookie, trackingCookieLifetime)
     }
-    const initializeSettingsButtons = function () {
-        for (let i = 0; i < settingsButtons.length; ++i) {
-            if (settingsButtons.length - i == 1) {
-                listen(
-                    'click',
-                    function () {
-                        openDialog('Footer')
-                        atiSecondLevelId = 1
-                    },
-                    settingsButtons[i]
-                )
-            } else {
-                if (!settingsButtons[i].getAttribute('listener')) {
-                    listen(
-                        'click',
-                        function () {
-                            openDialog('DSGVO-Overlay')
-                        },
-                        settingsButtons[i]
-                    )
-                    settingsButtons[i].setAttribute('listener', 'true')
-                }
-            }
-        }
-    }
-    const openDialog = function (settingsButtonLocation) {
-        overlay.classList.add('!flex')
+
+    const onDialogShow = function (event) {
         bodyElement.classList.add('optionOpen')
-        uxAction('Einstellungsdialog geöffnet - ' + settingsButtonLocation, atiSecondLevelId)
-    }
-    const closeDialogeOnOverlay = function (e) {
-        if (e.target !== this) return
-        closeDialog()
+        const opener = event.detail == null && event.detail.target.closest('[data-a11y-dialog-show]') ? event.detail.target.closest('[data-a11y-dialog-show]') : null
+        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : {label:"Datenschutzerklärung"}
+        if(undefined !== pianoTracking.secondLevelId){
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label, pianoTracking.secondLevelId)
+        }else{
+            console.log(pianoTracking)
+            uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label)
+        }
     }
-    const closeDialog = function () {
-        overlay.classList.remove('!flex')
+
+    const onDialogHide = function () {
+        console.log("Hide")
         bodyElement.classList.remove('optionOpen')
     }
     const shouldDialogBeOpendOnLoad = function () {
         const urlParam = getUrlVars()['openDialog']
         if (typeof urlParam !== 'undefined' && urlParam === 'true') {
-            openDialog('Datenschutzerklärung')
+            dialog.show()
         }
     }
     const getUrlVars = function () {
@@ -253,33 +234,22 @@ const DataPolicySettings = function (context) {
         return trackingCookie.isTrackingCookieExistent(trackingService)
     }
     const initializeEventListeners = function () {
-        listen('hr:settingsButtonInsideDataPolicyBoxClicked', function () {
-            openDialog('DSGVO-Overlay')
-        })
         listen('change', toggleAll, toggleAllSwitch)
-        listen('click', closeDialog, closeButton)
-        listen('click', closeDialogeOnOverlay, overlay)
+        listen("show", onDialogShow, container)
+        listen("hide", onDialogHide, container)
     }
     // steuert die Darstellung des Buttons für die hs-App ///
     showSettingsButton()
-    //// 1. Alle Settings Buttons initialisieren ////
-    initializeSettingsButtons()
-
-    //// 2. Toggle States aller Switches setzen ////
+    //// 1. Toggle States aller Switches setzen ////
     ////    Cookies setzen usw.                 ////
     initializeToggleStateExternal()
 
     initializeToggleStateTracking()
 
-    //// 3. Event Listener initialisieren ////
+    //// 2. Event Listener initialisieren ////
     initializeEventListeners()
 
     shouldDialogBeOpendOnLoad()
-
-    //// 4. Funktion extern aufrufbar machen ////
-    return {
-        initializeSettingsButtons: initializeSettingsButtons,
-    }
 }
 
 export default DataPolicySettings

package/src/stories/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -1,32 +1,42 @@
 <div class="flex items-center justify-center mt-4 md:mt-2 md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
-        {{#> components/button/button _size="md" _id="globalSettingsButton" _css=" js-data-policy-settings-button" _variant="secondary" _onBackground=(configProperty "footer.onBackground") }}
-            {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
-            {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
-        {{/components/button/button}}
-    
-        <div class="hidden fixed overflow-scroll w-full h-full top-0 left-0 right-0 bottom-0 z-300 pb-6 bg-black/[0.5] js-data-policy-settings-overlay{{#if _webview}} hidden{{/if}}">
-        <div class="m-auto pt-0 max-w-[480px] bg-white">
+        {{#with this}}
+            {{#> components/button/button _size="md" _id="globalSettingsButton" _css=" js-data-policy-settings-button" _variant="secondary" _onBackground=(configProperty "footer.onBackground") }}
+                {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
+                {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
+            {{/components/button/button}}
+            {{#*inline "htmlProperties"}}
+                data-piano-tracking='{"label":"Footer","secondLevelId":"1"}'
+                data-a11y-dialog-show="datapolicy-settings-dialog"
+            {{/inline}}
+        {{/with}}
+    </div>
+    <div id="datapolicy-settings-dialog"
+  aria-labelledby="datapolicy-settings-title"
+  aria-hidden="true" class="aria-hidden:hidden flex justify-center fixed inset-0 z-300 overflow-y-scroll">
+        <div class="fixed w-full h-full top-0 left-0 right-0 bottom-0 bg-black/[0.5] js-data-policy-settings-overlay{{#if _webview}} hidden{{/if}}" data-a11y-dialog-hide>
+        </div>
+        <div role="document" class="pt-0 max-w-[480px] z-300 bg-white mb-6">
             <div class="flex w-full px-6 bg-primary z-100">
                 <span class="flex justify-start w-full py-4">
                     <span
                         class="pr-4 -ml-1 fill-white"> {{> components/base/image/icon _icon="settings" _addClass="h-7 w-7 inline" }}</span>
                     <span class="w-full text-2xl text-white font-headingSerif">Einstellungen</span>
-                    <button class="text-white bg-transparent fill-current js-data-policy-settings-close-button">
+                    <button type="button" "aria-label="Close dialog" class="link-focus-white text-white bg-transparent fill-current js-data-policy-settings-close-button" data-a11y-dialog-hide>
                         {{> components/base/image/icon _icon="close" _addClass="h-6 w-6 inline"}}
                     </button>
                 </span>
             </div>
 
             <div class="bg-[#d8e9f6] p-6 {{#if _webview}} hidden{{/if}}">
-                <span class="block text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_description_title"}}</span>
+                <span id="datapolicy-settings-title" class="block text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_description_title"}}</span>
                 <p class="mt-4 text-black">
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_tracking_service_description_text"}}
-                            <a class="block mt-2 text-link hover:underline" target="_blank"
-                               rel="noopener noreferrer" href="{{this.url}}"
-                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
-                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            <a class="ds-link block mt-2 text-link hover:underline" target="_blank"
+                            rel="noopener noreferrer" href="{{this.url}}"
+                            title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                            {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
                             </a>
                         {{/with}}
                     {{/with}}
@@ -40,19 +50,19 @@
             <ul class="{{#if _webview}} hidden{{/if}}">
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
                     <span class="text-base text-black">AGF <a
-                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        class="ds-link mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/)</a></span>
                     <div class="flex w-fit toggleSwitch">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
                     <span class="text-base text-black">AT Internet <a
-                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        class="ds-link mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/)</a></span>
                     <div class="flex w-fit toggleSwitch">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -63,10 +73,10 @@
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_description_text"}}
-                            <a class="block mt-2 text-link hover:underline" target="_blank"
-                               rel="noopener noreferrer" href="{{this.url}}"
-                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
-                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            <a class=ds-link block mt-2 text-link hover:underline" target="_blank"
+                            rel="noopener noreferrer" href="{{this.url}}"
+                            title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                            {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
                             </a>
                         {{/with}}
                     {{/with}}
@@ -77,7 +87,7 @@
                 <div class="flex justify-between all">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right toggleSwitch">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all"}}
+                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -88,12 +98,11 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3] {{this.key}}">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right toggleSwitch">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden }}
+                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}
                 {{/with}}
             </ul>
         </div>
-    </div>
     </div>

package/src/stories/views/components/forms/toggle_button.hbs

@@ -1,2 +1,4 @@
-    <input class="h-0 w-0 invisible toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#unless _isInitiallyHidden}}initial="checked"{{/unless}}/>
-    <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">{{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>
+    <input class="h-0 w-0 opacity-0 toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#unless _isInitiallyHidden}}initial="checked"{{/unless}}/>    
+    <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">
+        <span class="sr-only">{{_screenReaderText}}</span>
+        {{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>