Improved transcript and css to match vimeo & media

adaptlearning · Oct 1, 2024 · b37620c · b37620c
1 parent cacae86
commit b37620c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/less/youtube.less b/less/youtube.less
@@ -50,7 +50,26 @@
     .icon-tick;
   }
 
+  &__transcript-btn-inline .icon {
+    .icon-plus;
+  }
+
   &__transcript-body-inline {
     display: none;
   }
+
+  // Skip to transcript button
+  &__skip-to-transcript {
+
+    html:not(.has-accessibility) & {
+      .u-display-none;
+    }
+
+    &:not(:focus-visible) {
+      height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+  }
 }
diff --git a/templates/youtube.hbs b/templates/youtube.hbs
@@ -4,7 +4,9 @@
   {{> component this}}
 
   {{#any _transcript._externalTranscript _transcript._inlineTranscript}}
-  <button class="aria-label js-skip-to-transcript" tabindex="-1" aria-label="{{_globals._components._youtube.skipToTranscript}}"></button>
+  <button class="btn-text youtube__skip-to-transcript js-skip-to-transcript">
+    {{_globals._components._youtube.skipToTranscript}}
+  </button>
   {{/any}}
 
   <div class="component__widget youtube__widget">
@@ -34,7 +36,11 @@
     {{#if _transcript._inlineTranscript}}
     <button class="youtube__transcript-btn youtube__transcript-btn-inline js-youtube-inline-transcript-toggle" aria-expanded="false">
       <span class="youtube__transcript-btn-text">
-        {{_transcript.inlineTranscriptButton}}
+        {{#if _transcript.inlineTranscriptButton}}
+          {{_transcript.inlineTranscriptButton}}
+        {{else}}
+          {{_transcript.transcriptLink}}
+        {{/if}}
       </span>
       <span class="youtube__transcript-btn-icon">
         <span class="icon" aria-hidden="true"></span>
@@ -46,9 +52,9 @@
     <button class="youtube__transcript-btn youtube__transcript-btn-external js-youtube-external-transcript-click" onclick="top.window.open('{{_transcript.transcriptLink}}')">
       <span class="youtube__transcript-btn-text">
         {{#if _transcript.transcriptLinkButton}}
-        {{_transcript.transcriptLinkButton}}
+          {{_transcript.transcriptLinkButton}}
         {{else}}
-        {{_transcript.transcriptLink}}
+          {{_transcript.transcriptLink}}
         {{/if}}
       </span>
       <span class="youtube__transcript-btn-icon">
@@ -58,7 +64,7 @@
     {{/if}}
 
     {{#if _transcript._inlineTranscript}}
-    <div class="youtube__transcript-body-inline" role="region"{{#if _transcript.inlineTranscriptButton}} aria-label="{{_transcript.inlineTranscriptButton}}"{{/if}}>
+    <div class="youtube__transcript-body-inline" role="region" aria-label="{{#if _transcript.inlineTranscriptButton}}{{_transcript.inlineTranscriptButton}}{{else}}{{_transcript.transcriptLink}}{{/if}}">
       <div class="youtube__transcript-body-inline-inner">
         {{{compile _transcript.inlineTranscriptBody}}}
       </div>