diff options
| author | Sam Potts <me@sampotts.me> | 2015-02-28 17:00:40 +1100 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2015-02-28 17:00:40 +1100 |
| commit | 30d6a0cd5f21783b44e0e0e7f8997aae31bdce36 (patch) | |
| tree | bf737d543d1f0c40eafaa80c5eebb427f7eb5ac9 /src | |
| parent | b2ffd7d3ca9077087fcecff4231a4a9986b5c3e1 (diff) | |
| download | plyr-30d6a0cd5f21783b44e0e0e7f8997aae31bdce36.tar.lz plyr-30d6a0cd5f21783b44e0e0e7f8997aae31bdce36.tar.xz plyr-30d6a0cd5f21783b44e0e0e7f8997aae31bdce36.zip | |
Aria tidy up
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 30 | ||||
| -rw-r--r-- | src/templates/controls.html | 8 |
2 files changed, 21 insertions, 17 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 5075a1d2..dba1d69f 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.15 +// plyr.js v1.0.16 // https://github.com/sampotts/plyr // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ @@ -432,11 +432,8 @@ // Need to do a default? var html = config.html; - // Replace aria label instances - html = _replaceAll(html, "{aria-label}", config.playAriaLabel); - // Replace seek time instances - html = _replaceAll(html, "{seek-time}", config.seekTime); + html = _replaceAll(html, "{seektime}", config.seekTime); // Replace all id references html = _replaceAll(html, "{id}", player.random); @@ -490,6 +487,18 @@ } } + // Setup aria attributes + function _setupAria() { + var label = player.buttons.play.innerText; + + // If there's a media title set, use that for the label + if (typeof(config.title) !== "undefined" && config.title.length) { + label = player.buttons.play.innerText + ", " + config.title; + } + + player.buttons.play.setAttribute("aria-label", label); + } + // Setup media function _setupMedia() { player.media = player.container.querySelectorAll("audio, video")[0]; @@ -1058,14 +1067,6 @@ return false; } - // Set up aria-label for Play button with the title option - if (typeof(config.title) === "undefined" || !config.title.length) { - config.playAriaLabel = "Play"; - } - else { - config.playAriaLabel = "Play " + config.title; - } - // Setup media _setupMedia(); @@ -1080,6 +1081,9 @@ return false; } + // Set up aria-label for Play button with the title option + _setupAria(); + // Captions _setupCaptions(); diff --git a/src/templates/controls.html b/src/templates/controls.html index d25c52ee..3970d143 100644 --- a/src/templates/controls.html +++ b/src/templates/controls.html @@ -14,9 +14,9 @@ </button> <button type="button" data-player="rewind"> <svg><use xlink:href="#icon-rewind"></use></svg> - <span class="sr-only">Rewind <span class="player-seek-time">{seek-time}</span> seconds</span> + <span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span> </button> - <button type="button" aria-label="{aria-label}" data-player="play"> + <button type="button" data-player="play"> <svg><use xlink:href="#icon-play"></use></svg> <span class="sr-only">Play</span> </button> @@ -26,7 +26,7 @@ </button> <button type="button" data-player="fast-forward"> <svg><use xlink:href="#icon-fast-forward"></use></svg> - <span class="sr-only">Fast forward <span class="player-seek-time">{seek-time}</span> seconds</span> + <span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span> </button> <span class="player-time"> <span class="sr-only">Time</span> @@ -41,7 +41,7 @@ <span class="sr-only">Mute</span> </label> - <label for="volume{id}" class="sr-only">Volume:</label> + <label for="volume{id}" class="sr-only">Volume</label> <input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume"> <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions"> |