hr-design-system-handlebars 1.35.10 → 1.35.12

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# 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
+
+- subscribe button right below shorttext instead of own flex row [#707](https://github.com/mumprod/hr-design-system-handlebars/pull/707) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.35.10 (Wed Aug 09 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3025,7 +3025,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1691580904518;
+  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: cnt1691580904518 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(cnt1691580904518);
+  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/components/teaser/podcast/podcast_playlist_player.hbs

@@ -25,6 +25,13 @@
         {{/switch}} --}}
 
         {{> components/teaser/podcast/podcast_playlist_shorttext}}
+
+        {{!-- Abo-Dropdown --}}
+        {{#if this.isSingleChannel}}
+          
+            {{> components/teaser/podcast/podcast_subscribe_button}}
+          
+        {{/if}} 
       </div>
 
       {{!-- Podcast Image --}}
@@ -49,12 +56,7 @@
       {{/case}}
     {{/switch}} --}}
     
-    {{!-- Abo-Dropdown --}}
-    {{#if this.isSingleChannel}}
-      <div class="flex flex-row px-5 md:pr-0"> 
-        {{> components/teaser/podcast/podcast_subscribe_button}}
-      </div>
-    {{/if}} 
+    
   </div>
 </div>
 

package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,13 +16,13 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative h-10 z-100"
+        class="flex flex-col h-10 w-fit z-100"
     >
 
     {{!-- Button --}}
     {{#with this}}
         {{#> components/button/button _size="md" _disableButtonPress=true}}
-            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}  
+            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 text-left truncate mr-2" _type="button"}}  
             <span x-cloak x-show="open" class="w-3 h-3">
                 {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
             </span>

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/dist/views_static/components/teaser/podcast/podcast_playlist_player.hbs

@@ -25,6 +25,13 @@
         {{/switch}} --}}
 
         {{> components/teaser/podcast/podcast_playlist_shorttext}}
+
+        {{!-- Abo-Dropdown --}}
+        {{#if this.isSingleChannel}}
+          
+            {{> components/teaser/podcast/podcast_subscribe_button}}
+          
+        {{/if}} 
       </div>
 
       {{!-- Podcast Image --}}
@@ -49,12 +56,7 @@
       {{/case}}
     {{/switch}} --}}
     
-    {{!-- Abo-Dropdown --}}
-    {{#if this.isSingleChannel}}
-      <div class="flex flex-row px-5 md:pr-0"> 
-        {{> components/teaser/podcast/podcast_subscribe_button}}
-      </div>
-    {{/if}} 
+    
   </div>
 </div>
 

package/dist/views_static/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,13 +16,13 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative h-10 z-100"
+        class="flex flex-col h-10 w-fit z-100"
     >
 
     {{!-- Button --}}
     {{#with this}}
         {{#> components/button/button _size="md" _disableButtonPress=true}}
-            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}  
+            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 text-left truncate mr-2" _type="button"}}  
             <span x-cloak x-show="open" class="w-3 h-3">
                 {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
             </span>

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.10",
+    "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' : ''"
             >

package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -25,6 +25,13 @@
         {{/switch}} --}}
 
         {{> components/teaser/podcast/podcast_playlist_shorttext}}
+
+        {{!-- Abo-Dropdown --}}
+        {{#if this.isSingleChannel}}
+          
+            {{> components/teaser/podcast/podcast_subscribe_button}}
+          
+        {{/if}} 
       </div>
 
       {{!-- Podcast Image --}}
@@ -49,12 +56,7 @@
       {{/case}}
     {{/switch}} --}}
     
-    {{!-- Abo-Dropdown --}}
-    {{#if this.isSingleChannel}}
-      <div class="flex flex-row px-5 md:pr-0"> 
-        {{> components/teaser/podcast/podcast_subscribe_button}}
-      </div>
-    {{/if}} 
+    
   </div>
 </div>
 

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,13 +16,13 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative h-10 z-100"
+        class="flex flex-col h-10 w-fit z-100"
     >
 
     {{!-- Button --}}
     {{#with this}}
         {{#> components/button/button _size="md" _disableButtonPress=true}}
-            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}  
+            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 text-left truncate mr-2" _type="button"}}  
             <span x-cloak x-show="open" class="w-3 h-3">
                 {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
             </span>