hr-design-system-handlebars 0.120.1 → 0.120.3

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.120.3 (Thu Jan 19 2023)
+
+#### 🐛 Bug Fix
+
+- Feature/dpe 2019 b [#488](https://github.com/mumprod/hr-design-system-handlebars/pull/488) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.120.2 (Thu Jan 19 2023)
+
+#### 🐛 Bug Fix
+
+- improve accessibility [#486](https://github.com/mumprod/hr-design-system-handlebars/pull/486) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v0.120.1 (Thu Jan 19 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1033,9 +1033,6 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .mt-0 {
   margin-top: 0px;
 }
@@ -1066,6 +1063,9 @@ video {
 .-mt-2 {
   margin-top: -0.5rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .-mt-40 {
   margin-top: -10rem;
 }
@@ -1857,6 +1857,10 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1885,10 +1889,6 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2400,7 +2400,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674127654674;
+  counter-reset: cnt1674135434720;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2618,7 +2618,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674127654674 1;
+  counter-increment: cnt1674135434720 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2634,7 +2634,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1674127654674);
+  content: counter(cnt1674135434720);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3658,16 +3658,16 @@ video {
     width: fit-content;
   }
 
-  .sm\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
   .sm\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 
+  .sm\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:px-11\.5 {
     padding-left: 2.875rem;
     padding-right: 2.875rem;
@@ -3984,16 +3984,16 @@ video {
     padding: 2.5rem;
   }
 
-  .md\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .md\:\!px-0 {
     padding-left: 0px !important;
     padding-right: 0px !important;
   }
 
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .md\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;

package/dist/views/components/button/button.hbs

@@ -7,6 +7,7 @@
     {{~#if _value}} value="{{_value}}"{{/if}} 
     {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
     {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 
+    {{~#if _noFocus}} tabindex="-1"{{/if}}
 >
     {{~#if _showIcon~}}
         {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}

package/dist/views/components/button/button_round.hbs

@@ -19,4 +19,5 @@
     _teaserType=_teaserType
     _teaserSize=_teaserSize
     _isMobile1to1=_isMobile1to1
+    _noFocus=_noFocus
 }}

package/dist/views/components/content_nav/content_nav.hbs

@@ -1,9 +1,9 @@
 {{#with this.contentNav}}
     {{#if this.isListOrFlow}}
-        <nav class="w-full px-2 md:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
+        <nav class="w-full px-5 sm:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
             {{> components/content_nav/content_nav_container
                     _teaserSize=../_teaserSize
-                    _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
+                    _maindivclass="flex relative flex-wrap"
             }}
         </nav>
     {{else}}

package/dist/views/components/content_nav/content_nav_dropdown.hbs

@@ -1,4 +1,4 @@
-<nav class="w-full px-2 md:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
+<nav class="w-full px-5 sm:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
      :class="contentNavDropdownIsOpen ? 'h-10' : ''"
      id="dropdown--{{nextRandom}}"
      tabindex="0"

package/dist/views/components/teaser/components/teaser_image.hbs

@@ -17,6 +17,7 @@
         _label='Sendung' 
         _srOnly="true" 
         _alpineClick=""
+         _noFocus="true"
         }}    
         {{/decorator}}
     {{/if}}

package/dist/views/components/teaser/components/teaser_topline.hbs

@@ -1,6 +1,5 @@
 <span
     class='pt-px block text-base text-toplineColor{{#if _css}} {{_css}}{{/if}} font-heading'
-    aria-label='{{_readMore}}: {{_text}}'
 >
     {{_text}}
 </span>

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

@@ -1,3 +1,3 @@
-<a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
+<a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
     {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
 </a>

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

@@ -1,4 +1,4 @@
-<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">           
+<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}" aria-label="Podcast starten">           
     <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
         {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
     </div>

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

@@ -49,7 +49,8 @@
                         min="0" 
                         max="1000"
                         value="0"
-                        class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >  
+                        class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" 
+                        aria-label="Schieberegler" >  
                 </div>
 
                 {{#if _isPlaylistPlayer}}

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

@@ -1,5 +1,5 @@
 <div id="timedisplay{{_id}}" class="{{_containerCss}}">
-    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime" >0:00</span>
+    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime{{_id}}" >0:00</span>
     <span class="{{_durationClasses}} px-0.5"> / </span>
-    <span class="{{_durationClasses}} js-audioDuration" id="audioDurationFancy">{{_duration}}</span>
+    <span class="{{_durationClasses}} js-audioDuration" id="audioDurationFancy{{_id}}">{{_duration}}</span>
 </div>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -4,7 +4,7 @@
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
 >
-  <section class="col-span-full" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
+  <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"

package/package.json

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

package/src/stories/views/components/button/button.hbs

@@ -7,6 +7,7 @@
     {{~#if _value}} value="{{_value}}"{{/if}} 
     {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
     {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 
+    {{~#if _noFocus}} tabindex="-1"{{/if}}
 >
     {{~#if _showIcon~}}
         {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}

package/src/stories/views/components/button/button_round.hbs

@@ -19,4 +19,5 @@
     _teaserType=_teaserType
     _teaserSize=_teaserSize
     _isMobile1to1=_isMobile1to1
+    _noFocus=_noFocus
 }}

package/src/stories/views/components/content_nav/content_nav.hbs

@@ -1,9 +1,9 @@
 {{#with this.contentNav}}
     {{#if this.isListOrFlow}}
-        <nav class="w-full px-2 md:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
+        <nav class="w-full px-5 sm:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
             {{> components/content_nav/content_nav_container
                     _teaserSize=../_teaserSize
-                    _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
+                    _maindivclass="flex relative flex-wrap"
             }}
         </nav>
     {{else}}

package/src/stories/views/components/content_nav/content_nav_dropdown.hbs

@@ -1,4 +1,4 @@
-<nav class="w-full px-2 md:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
+<nav class="w-full px-5 sm:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
      :class="contentNavDropdownIsOpen ? 'h-10' : ''"
      id="dropdown--{{nextRandom}}"
      tabindex="0"

package/src/stories/views/components/teaser/components/teaser_image.hbs

@@ -17,6 +17,7 @@
         _label='Sendung' 
         _srOnly="true" 
         _alpineClick=""
+         _noFocus="true"
         }}    
         {{/decorator}}
     {{/if}}

package/src/stories/views/components/teaser/components/teaser_topline.hbs

@@ -1,6 +1,5 @@
 <span
     class='pt-px block text-base text-toplineColor{{#if _css}} {{_css}}{{/if}} font-heading'
-    aria-label='{{_readMore}}: {{_text}}'
 >
     {{_text}}
 </span>

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

@@ -1,3 +1,3 @@
-<a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
+<a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
     {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
 </a>

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

@@ -1,4 +1,4 @@
-<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">           
+<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}" aria-label="Podcast starten">           
     <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
         {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
     </div>

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

@@ -49,7 +49,8 @@
                         min="0" 
                         max="1000"
                         value="0"
-                        class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" >  
+                        class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" 
+                        aria-label="Schieberegler" >  
                 </div>
 
                 {{#if _isPlaylistPlayer}}

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

@@ -1,5 +1,5 @@
 <div id="timedisplay{{_id}}" class="{{_containerCss}}">
-    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime" >0:00</span>
+    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime{{_id}}" >0:00</span>
     <span class="{{_durationClasses}} px-0.5"> / </span>
-    <span class="{{_durationClasses}} js-audioDuration" id="audioDurationFancy">{{_duration}}</span>
+    <span class="{{_durationClasses}} js-audioDuration" id="audioDurationFancy{{_id}}">{{_duration}}</span>
 </div>

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -4,7 +4,7 @@
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
 >
-  <section class="col-span-full" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
+  <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"