aria label attribute to video and audio player iframes for #648

middlebury · Nov 5, 2024 · 14758f5 · 14758f5
1 parent 8952d9f
commit 14758f5
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/src/js/video.ts b/src/js/video.ts
@@ -40,13 +40,15 @@ class VideoSwap {
 
   /** iframe string encoded from server */
   iframe: string | null;
+  iframeLabel: string | null;
 
   constructor(elem: HTMLElement) {
     this.elem = elem;
     this.originalContent = elem;
     this.content = $('.js-video-content', elem);
     this.link = $('.js-video-link', elem);
     this.iframe = elem.getAttribute('data-video');
+    this.iframeLabel = elem.getAttribute('data-video-label');
 
     this.activeClass = 'has-video';
 
@@ -89,6 +91,9 @@ class VideoSwap {
 
     if (this.content) {
       this.content.innerHTML = html || this.iframe;
+      $('iframe', this.content).ariaLabel = 'Video player';
+      // this.content.ariaLabel = 'Video player';
+      console.log(this.content);
     }
 
     onOutOfElementView(this.elem, () => {

diff --git a/src/templates/davis-home.twig b/src/templates/davis-home.twig
@@ -28,9 +28,9 @@
         {% include 'partials/lead.twig' %}
         {% include 'paragraphs/chart-group.twig' with {
           items: [
-            { type: 'stats', number: 160, label: 'countries represented', },
+            { type: 'stats', number: 160, label: 'countries represented' },
             { type: 'stats', number: 4000, label: 'current scholars' },
-            { type: 'stats', number: 10000, label: 'alumni', }
+            { type: 'stats', number: 10000, label: 'alumni' }
           ]
         } %}
       </div>

diff --git a/src/templates/paragraphs/audio.twig b/src/templates/paragraphs/audio.twig
@@ -1,7 +1,7 @@
 <div class="audio paragraph--audio">
   {% if panopto %}
     <div class="audio__embed">
-      <iframe src="https://midd.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=f9b9f6b5-f52c-40f8-962b-db0b6b214532&v=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
+      <iframe aria-label="Audio player" src="https://midd.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=f9b9f6b5-f52c-40f8-962b-db0b6b214532&v=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
     </div>
   {% else %}
     <div class="js-audio">

diff --git a/src/templates/paragraphs/embed.twig b/src/templates/paragraphs/embed.twig
@@ -1,3 +1,3 @@
 <div class="paragraph--embed">
-  <iframe src="https://forms.middlebury.edu/webform-embed/1467" width="800" height="1600" frameborder="0" allowtransparency="true" type="text/html"></iframe>
+  <iframe aria-label="[alt text goes here]" src="https://forms.middlebury.edu/webform-embed/1467" width="800" height="1600" frameborder="0" allowtransparency="true" type="text/html"></iframe>
 </div>
diff --git a/src/templates/partials/portrait-video.twig b/src/templates/partials/portrait-video.twig
@@ -1,5 +1,5 @@
 {% set id = random(1234) %}
-<figure class="{{grid_video ? "portrait-video--grid js-expand-video" : " portrait-video js-video"}}" data-video='<iframe src="https://player.vimeo.com/video/398243397?autoplay=1" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>'>
+<figure class="{{grid_video ? "portrait-video--grid js-expand-video" : " portrait-video js-video"}}" data-video='<iframe src="https://player.vimeo.com/video/398243397?autoplay=1" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>' data-video-label="Video player">
   <div class="portrait-video__content js-video-content">
     <a href="https://player.vimeo.com/video/398243397" class="js-video-link portrait-video__link" role="button" aria-label="Play video" aria-describedby="midd-video-label-{{id}}">
       {% include 'partials/img.twig' with { name: grid_video ? 'portrait_expand_video' : cobblestone_modal ? 'journey_portrait_video' : 'portrait_video', lazy: lazy } %}

diff --git a/src/templates/partials/top-level-paragraphs.twig b/src/templates/partials/top-level-paragraphs.twig
@@ -46,7 +46,7 @@
 
 {% include 'paragraphs/text-short.twig' %}
 
-{% include 'paragraphs/audio.twig' %}
+{% include 'paragraphs/audio.twig' with { panopto: true } %}
 
 {% include 'paragraphs/two-col-text.twig' %}
 

diff --git a/src/templates/partials/video.twig b/src/templates/partials/video.twig
@@ -1,6 +1,6 @@
 {% set id = random(1234) %}
 <!-- video iframe html should be escaped -->
-<figure class="video{{grid_video ? " landscape-video--grid js-expand-video" : " js-video"}}" data-video='<iframe src="https://player.vimeo.com/video/221201240?autoplay=1" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>'>
+<figure class="video{{grid_video ? " landscape-video--grid js-expand-video" : " js-video"}}" data-video='<iframe src="https://player.vimeo.com/video/221201240?autoplay=1" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>' data-video-label="Video player">
   <div class="video__content js-video-content">
     <a href="https://player.vimeo.com/video/221201240" class="js-video-link video__link" role="button" aria-label="Play video" aria-describedby="midd-video-label-{{id}}">
       {% include 'partials/img.twig' with { name: 'video', lazy: lazy } %}