Add an iFrame title to the YouTube shortcode
authorNic Raboy <nraboy@users.noreply.github.com>
Fri, 11 Aug 2017 22:36:40 +0000 (15:36 -0700)
committerBjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com>
Fri, 11 Aug 2017 22:36:40 +0000 (00:36 +0200)
To accommodate modern web accessibility as outlined here https://dequeuniversity.com/tips/provide-iframe-titles

hugolib/embedded_shortcodes_test.go
tpl/tplimpl/template_embedded.go

index 6f47f98c3236215bd2dc53683d3d097be00ee9f9..1c861dc90632c18fb5933217afd9b8fef429c370 100644 (file)
@@ -202,17 +202,17 @@ func TestShortcodeYoutube(t *testing.T) {
        }{
                {
                        `{{< youtube w7Ft2ymGmfc >}}`,
-                       "(?s)\n<div style=\".*?\">.*?<iframe src=\"//www.youtube.com/embed/w7Ft2ymGmfc\" style=\".*?\" allowfullscreen frameborder=\"0\">.*?</iframe>.*?</div>\n",
+                       "(?s)\n<div style=\".*?\">.*?<iframe src=\"//www.youtube.com/embed/w7Ft2ymGmfc\" style=\".*?\" allowfullscreen frameborder=\"0\" title=\"YouTube Video\">.*?</iframe>.*?</div>\n",
                },
                // set class
                {
                        `{{< youtube w7Ft2ymGmfc video>}}`,
-                       "(?s)\n<div class=\"video\">.*?<iframe src=\"//www.youtube.com/embed/w7Ft2ymGmfc\" allowfullscreen frameborder=\"0\">.*?</iframe>.*?</div>\n",
+                       "(?s)\n<div class=\"video\">.*?<iframe src=\"//www.youtube.com/embed/w7Ft2ymGmfc\" allowfullscreen frameborder=\"0\" title=\"YouTube Video\">.*?</iframe>.*?</div>\n",
                },
                // set class and autoplay (using named params)
                {
                        `{{< youtube id="w7Ft2ymGmfc" class="video" autoplay="true" >}}`,
-                       "(?s)\n<div class=\"video\">.*?<iframe src=\"//www.youtube.com/embed/w7Ft2ymGmfc\\?autoplay=1\".*?allowfullscreen frameborder=\"0\">.*?</iframe>.*?</div>",
+                       "(?s)\n<div class=\"video\">.*?<iframe src=\"//www.youtube.com/embed/w7Ft2ymGmfc\\?autoplay=1\".*?allowfullscreen frameborder=\"0\" title=\"YouTube Video\">.*?</iframe>.*?</div>",
                },
        } {
                var (
index 14f9f138c81c86e692c3f5c634edf1769e5bd5a1..bea0e610b1c97e41d0f5618200cd71f50e152fc9 100644 (file)
@@ -39,11 +39,11 @@ func (t *templateHandler) embedShortcodes() {
        t.addInternalShortcode("speakerdeck.html", "<script async class='speakerdeck-embed' data-id='{{ index .Params 0 }}' data-ratio='1.33333333333333' src='//speakerdeck.com/assets/embed.js'></script>")
        t.addInternalShortcode("youtube.html", `{{ if .IsNamedParams }}
 <div {{ if .Get "class" }}class="{{ .Get "class" }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
-  <iframe src="//www.youtube.com/embed/{{ .Get "id" }}?{{ with .Get "autoplay" }}{{ if eq . "true" }}autoplay=1{{ end }}{{ end }}" 
-  {{ if not (.Get "class") }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0"></iframe>
+  <iframe src="//www.youtube.com/embed/{{ .Get "id" }}?{{ with .Get "autoplay" }}{{ if eq . "true" }}autoplay=1{{ end }}{{ end }}"
+  {{ if not (.Get "class") }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
 </div>{{ else }}
 <div {{ if len .Params | eq 2 }}class="{{ .Get 1 }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
-  <iframe src="//www.youtube.com/embed/{{ .Get 0 }}" {{ if len .Params | eq 1 }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0"></iframe>
+  <iframe src="//www.youtube.com/embed/{{ .Get 0 }}" {{ if len .Params | eq 1 }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" {{ end }}allowfullscreen frameborder="0" title="YouTube Video"></iframe>
  </div>
 {{ end }}`)
        t.addInternalShortcode("vimeo.html", `{{ if .IsNamedParams }}<div {{ if .Get "class" }}class="{{ .Get "class" }}"{{ else }}style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"{{ end }}>
@@ -139,7 +139,7 @@ func (t *templateHandler) embedTemplates() {
     {{ $right := sub .TotalPages .PageNumber }}
     {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }}
     {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add $pag.PageNumber 2)))  }}
-    {{ if $showNumber }} 
+    {{ if $showNumber }}
         {{ $.Scratch.Set "__paginator.ellipsed" false }}
         {{ $.Scratch.Set "__paginator.shouldEllipse" false }}
     {{ else }}