Skip to content
This repository was archived by the owner on May 10, 2023. It is now read-only.

Commit b0aee51

Browse files
mellewyniamellewynia
authored
Merge pull request #430 from minvws/develop
Versie 5.0.12
2 parents 42a03c0 + 05072e6 commit b0aee51

8 files changed

Lines changed: 114 additions & 12 deletions

File tree

‎_data/translations.yml‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -398,7 +398,7 @@ english:
398398
tr: (ingilizce)
399399

400400
info-lead:
401-
nl: Het coronavirus is er nog altijd. Dus is het belangrijk om juist nu alert te blijven. Daarom is CoronaMelder nu te gebruiken voor heel Nederland. Op 22 oktober hadden <strong>3.474.068</strong> mensen de app gedownload.
401+
nl: Het coronavirus is er nog altijd. Dus is het belangrijk om juist nu alert te blijven. Daarom is CoronaMelder nu te gebruiken voor heel Nederland. Op 25 oktober hadden <strong>3.555.602</strong> mensen de app gedownload.
402402
en: Coronavirus is still around and we need to stay alert, especially right now. The CoronaMelder app can help us all to do this and it is now available throughout the whole of the Netherlands.
403403
ar: لا يزال فيروس كورونا موجودًا حتى يومنا هذا. من المهم إذًا أن تبقى يقظًا الآن. لذلك أصبح CoronaMelder متاحًا في هولندا كلها.
404404
bg: Коронавирусът е все още тук. От особена важност сега е да запазиш бдителността си. Именно за тази цел приложението CoronaMelder вече е достъпно в цяла Нидерландия.
@@ -919,7 +919,23 @@ information-gps:
919919

920920
# Media element (used for videos)
921921
# See _includes/components/mediaplayer.html
922-
922+
923+
mediaelement-btn-enable-caption:
924+
nl: Zet ondertiteling (CC) aan
925+
en: Enable subtitles (CC)
926+
927+
mediaelement-btn-disable-caption:
928+
nl: Zet ondertiteling (CC) uit
929+
en: Disable subtitles (CC)
930+
931+
mediaelement-btn-enable-audio-description:
932+
nl: Zet audiodescriptie (AD) aan
933+
en: Enable audio description (AD)
934+
935+
mediaelement-btn-disable-audio-description:
936+
nl: Zet audiodescriptie (AD) uit
937+
en: Disable audio description (AD)
938+
923939
mediaelement-download-title:
924940
nl: Download deze video
925941
en: Download this video

‎_includes/components/mediaelement.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
poster="{{ site.baseurl }}/{{ site.data.videos[include.key].video-preview-image['default'] }}"
99
data-audio-description='[{"src": "{{ site.baseurl }}/{{ site.data.videos[include.key].mp3-voiceover-src['default'] }}", "type": "audio/mp3"}]'
1010
data-audio-description-voiceover="true"
11+
data-translation-enable-caption="{{ site.data.translations.mediaelement-btn-enable-caption[page.lang] }}"
12+
data-translation-disable-caption="{{ site.data.translations.mediaelement-btn-disable-caption[page.lang] }}"
13+
data-translation-enable-audio-description="{{ site.data.translations.mediaelement-btn-enable-audio-description[page.lang] }}"
14+
data-translation-disable-audio-description="{{ site.data.translations.mediaelement-btn-disable-audio-description[page.lang] }}"
1115
>
1216
<source type="video/mp4" src="{{ site.baseurl }}/{{ site.data.videos[include.key].mp4-src['default'] }}" />
1317
{% for subtitle in site.data.videos[include.key].subtitles %}

‎_layouts/home.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
</div>
2828
</div>
2929
</div>
30-
3130
</div>
3231
{% include stories.html %}
3332
{% include badges.html class="layout-app-badges--center-wrap" huawei="true" %}

‎css-rtl/_footer-rtl.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@
4848
width: 10px;
4949
background: url(../img/chevron-left-white.svg) no-repeat 50% 50%;
5050
transition: var(--transition-out);
51-
padding: 10px;
51+
display: inline-block;
52+
margin-left: 5px;
5253
}
5354
}
5455

‎css/_footer.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,8 @@
200200
width: 10px;
201201
background: url(../img/chevron-right-white.svg) no-repeat 50% 50%;
202202
transition: var(--transition-out);
203-
padding: 10px;
203+
display: inline-block;
204+
margin-right: 5px;
204205
}
205206

206207
h3 {

‎css/_statements.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,6 @@
8080
display: block;
8181
border: 0;
8282
border-radius: 0;
83-
bottom: 0;
84-
right: 0;
85-
left: 0;
8683
width: 100%;
8784
padding: 0.8em 0.5em 1em 85px;
8885
margin: 0;

‎css/_video.scss‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
ul {
7070
margin: 14px 0 14px 20px;
7171
}
72-
}
72+
}
7373
}
7474

7575
.mejs__container {
@@ -81,6 +81,12 @@
8181
text-indent: 0;
8282
vertical-align: top;
8383
margin-bottom: 40px;
84+
85+
&.focus-visible {
86+
outline: 2px solid $color-focus;
87+
outline-offset: 4px;
88+
transition: 100ms ease-out;
89+
}
8490
}
8591

8692
.component-mediaelement .mejs__controls {
@@ -108,6 +114,17 @@
108114
.mejs__overlay-button {
109115
background-image: url('../img/play.svg');
110116
background-position: center center;
117+
transition: 162ms ease-out;
118+
119+
.mejs__container.focus-visible &,
120+
&:focus {
121+
transform: scale(1.26);
122+
}
123+
124+
&:focus {
125+
outline: 2px solid yellow;
126+
outline-offset: 4px;
127+
}
111128
}
112129

113130
.mejs__overlay:hover > .mejs__overlay-button {
@@ -180,4 +197,8 @@ details.component-mediaelement__details[open] {
180197
&.mejs__captions-enabled {
181198
opacity: 1;
182199
}
183-
}
200+
}
201+
202+
.mejs__captions-selector.mejs__offscreen {
203+
display: none;
204+
}

‎js/mediaplayer.js‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,72 @@
1010
shimScriptAccess: 'always',
1111
features: ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'a11y', 'fullscreen'],
1212
alwaysShowControls: true,
13-
toggleCaptionsButtonWhenOnlyOne: true,
13+
toggleCaptionsButtonWhenOnlyOne: true, // Note: >2 captions? Refactor accessibleCaptionButton()
1414
success: function(mediaElement, originalNode, instance) {
15-
15+
16+
// See <git>/_includes/_components/mediaelement.html
17+
var translations = {
18+
btnEnableCaption: originalNode.dataset.translationEnableCaption,
19+
btnDisableCaption: originalNode.dataset.translationDisableCaption,
20+
btnEnableAudioDescription: originalNode.dataset.translationEnableAudioDescription,
21+
btnDisableAudioDescription: originalNode.dataset.translationDisableAudioDescription
22+
};
23+
24+
// Subtitle toggle
25+
// WCAG 4.1.2: label button correctly
26+
// WCAG 2.1.4: toggle by space bar without pausing video
27+
accessibleCaptionButton();
28+
instance.controls.querySelector('.mejs__captions-button button')
29+
.addEventListener('click', function() { setTimeout(accessibleCaptionButton, 50); });
30+
instance.controls.querySelector('.mejs__captions-button button')
31+
.addEventListener('keydown', function($e) {
32+
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
33+
});
34+
35+
function accessibleCaptionButton() {
36+
var btn = instance.controls.querySelector('.mejs__captions-button button');
37+
var enabled = btn.parentElement.classList.contains('mejs__captions-enabled');
38+
var btnText = enabled ? translations.btnDisableCaption : translations.btnEnableCaption;
39+
btn.setAttribute('aria-pressed', enabled);
40+
btn.setAttribute('title', btnText);
41+
btn.setAttribute('aria-label', btnText);
42+
btn.textContent = btnText;
43+
}
44+
45+
// Audio (mute) toggle
46+
// WCAG 2.1.4: toggle by space bar without pausing video
47+
instance.controls.querySelector('.mejs__volume-button button')
48+
.addEventListener('keydown', function($e) {
49+
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
50+
});
51+
52+
// Audio description toggle
53+
// WCAG 4.1.2: label button correctly
54+
// WCAG 2.1.4: toggle by space bar without pausing video
55+
accessibleAudioDescriptionButton();
56+
instance.controls.querySelector('.mejs__audio-description-button button')
57+
.addEventListener('click', function() { setTimeout(accessibleAudioDescriptionButton, 50); });
58+
instance.controls.querySelector('.mejs__audio-description-button button')
59+
.addEventListener('keydown', function($e) {
60+
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
61+
});
62+
63+
function accessibleAudioDescriptionButton() {
64+
var btn = instance.controls.querySelector('.mejs__audio-description-button button');
65+
var enabled = btn.parentElement.classList.contains('audio-description-on');
66+
var btnText = enabled ? translations.btnDisableAudioDescription : translations.btnEnableAudioDescription;
67+
btn.setAttribute('aria-pressed', enabled);
68+
btn.setAttribute('title', btnText);
69+
btn.setAttribute('aria-label', btnText);
70+
btn.textContent = btnText;
71+
}
72+
73+
// Audio (mute) toggle
74+
// WCAG 2.1.4: toggle by space bar without pausing video
75+
instance.controls.querySelector('.mejs__fullscreen-button button')
76+
.addEventListener('keydown', function($e) {
77+
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
78+
});
1679
}
1780
});
1881
}

0 commit comments

Comments
 (0)