hr-design-system-handlebars 0.120.0 → 0.120.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# 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
+
+- use realTeaserSize [#485](https://github.com/mumprod/hr-design-system-handlebars/pull/485) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v0.120.0 (Wed Jan 18 2023)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -2400,7 +2400,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674049951493;
+  counter-reset: cnt1674129127459;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2618,7 +2618,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674049951493 1;
+  counter-increment: cnt1674129127459 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(cnt1674049951493);
+  content: counter(cnt1674129127459);
 }
 /*! ****************************/
 /*! text-shadow                */

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/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/teaser_poster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.realTeaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="ar-1-1" aria-hidden="true">
         {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
     </figure> 
@@ -17,6 +17,6 @@
             _teaserType=this.teaserType 
             _font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}   
         {{/decorator}}
-        {{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.teaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}} 
+        {{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}} 
     </div>
 </article>

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.0",
+    "version": "0.120.2",
     "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/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/teaser_poster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.realTeaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="ar-1-1" aria-hidden="true">
         {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
     </figure> 
@@ -17,6 +17,6 @@
             _teaserType=this.teaserType 
             _font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}   
         {{/decorator}}
-        {{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.teaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}} 
+        {{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}} 
     </div>
 </article>