hr-design-system-handlebars 1.35.11 → 1.35.12

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.35.12 (Thu Aug 10 2023)
+
+#### 🐛 Bug Fix
+
+- improve accessibility [#708](https://github.com/mumprod/hr-design-system-handlebars/pull/708) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.35.11 (Thu Aug 10 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3025,7 +3025,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1691669818643;
+  counter-reset: cnt1691691777157;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3260,7 +3260,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1691669818643 1;
+  counter-increment: cnt1691691777157 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3276,7 +3276,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1691669818643);
+  content: counter(cnt1691691777157);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/article/components/accordion/accordion.hbs

@@ -6,12 +6,14 @@
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
             <button type="button"
-                    class="w-full text-left"
-                    @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
+                    class="w-full text-left accordion link-focus"
+                    @click="selected !== {{nextRandom}} ? (selected = {{getRandom}}, setTimeout(() => {if($el.getBoundingClientRect().top<0){$el.scrollIntoView({ block: 'start' })}}, 700)) : selected = null"
+                    x-effect="$el.setAttribute('aria-label', selected  == {{getRandom}} ? 'Abschnitt {{this.text}} schließen' : 'Abschnitt {{this.text}} öffnen');$el.setAttribute('aria-expanded', selected  == {{getRandom}} ? 'true' : 'false')"
                     data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "Akkordeon::{{this.text}}-Link geklickt"}]}'
+                    aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
                         {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
@@ -20,8 +22,10 @@
                     </span>
                 </div>
             </button>
-            <div class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
+            <div id="accordionItem{{getRandom}}"
+                class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
                 style=""
+                :class="selected !== {{getRandom}} ? 'invisible' : ''"
                 x-ref="container{{getRandom}}"
                 x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
             >

package/dist/views_static/components/article/components/accordion/accordion.hbs

@@ -6,12 +6,14 @@
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
             <button type="button"
-                    class="w-full text-left"
-                    @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
+                    class="w-full text-left accordion link-focus"
+                    @click="selected !== {{nextRandom}} ? (selected = {{getRandom}}, setTimeout(() => {if($el.getBoundingClientRect().top<0){$el.scrollIntoView({ block: 'start' })}}, 700)) : selected = null"
+                    x-effect="$el.setAttribute('aria-label', selected  == {{getRandom}} ? 'Abschnitt {{this.text}} schließen' : 'Abschnitt {{this.text}} öffnen');$el.setAttribute('aria-expanded', selected  == {{getRandom}} ? 'true' : 'false')"
                     data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "Akkordeon::{{this.text}}-Link geklickt"}]}'
+                    aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
                         {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
@@ -20,8 +22,10 @@
                     </span>
                 </div>
             </button>
-            <div class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
+            <div id="accordionItem{{getRandom}}"
+                class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
                 style=""
+                :class="selected !== {{getRandom}} ? 'invisible' : ''"
                 x-ref="container{{getRandom}}"
                 x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
             >

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.35.11",
+    "version": "1.35.12",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/article/components/accordion/accordion.hbs

@@ -6,12 +6,14 @@
         {{#if this.isHeadline}}
             {{#unless @first}}</div></div>{{/unless}}
             <button type="button"
-                    class="w-full text-left"
-                    @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
+                    class="w-full text-left accordion link-focus"
+                    @click="selected !== {{nextRandom}} ? (selected = {{getRandom}}, setTimeout(() => {if($el.getBoundingClientRect().top<0){$el.scrollIntoView({ block: 'start' })}}, 700)) : selected = null"
+                    x-effect="$el.setAttribute('aria-label', selected  == {{getRandom}} ? 'Abschnitt {{this.text}} schließen' : 'Abschnitt {{this.text}} öffnen');$el.setAttribute('aria-expanded', selected  == {{getRandom}} ? 'true' : 'false')"
                     data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "Akkordeon::{{this.text}}-Link geklickt"}]}'
+                    aria-controls="accordionItem{{getRandom}}"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 aria-hidden="true" :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
                         {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
@@ -20,8 +22,10 @@
                     </span>
                 </div>
             </button>
-            <div class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
+            <div id="accordionItem{{getRandom}}"
+                class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
                 style=""
+                :class="selected !== {{getRandom}} ? 'invisible' : ''"
                 x-ref="container{{getRandom}}"
                 x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
             >