Merge pull request #251 from mediaelement/release_3.0.0

release 3.0.0

dist/a11y/a11y.css

@@ -1,29 +1,3 @@
-.mejs-video-description-button > button,
-.mejs__video-description-button > button,
-.mejs-audio-description-button > button,
-.mejs__audio-description-button > button {
-    background-repeat: no-repeat;
-    background-size: contain;
-    opacity: 0.7;
-}
-
-.mejs-video-description-button.video-description-on > button,
-.mejs__video-description-button.video-description-on > button,
-.mejs-audio-description-button.audio-description-on > button,
-.mejs__audio-description-button.audio-description-on > button {
-    opacity: 1;
-}
-
-.mejs-video-description-button > button,
-.mejs__video-description-button > button {
-    background-image: url('video-description-icon.svg');
-}
-
-.mejs-audio-description-button > button,
-.mejs__audio-description-button > button {
-    background-image: url('audio-description-icon.svg');
-}
-
 .mejs-volume-button.hidden,
 .mejs__volume-button.hidden {
     display: none;

dist/a11y/a11y.js

@@ -31,7 +31,9 @@ Object.assign(mejs.MepDefaults, {
 
     isVoiceover: false,
 
-    audioDescriptionCanPlay: false
+    audioDescriptionCanPlay: false,
+
+    iconSpritePath: 'mejs-a11y-icons.svg'
 });
 
 Object.assign(MediaElementPlayer.prototype, {
@@ -67,13 +69,16 @@ Object.assign(MediaElementPlayer.prototype, {
             return node.className.indexOf(className) > -1;
         });
     },
+    _generateIconHtml: function _generateIconHtml(id, classPrefix, iconSpritePath, iconId) {
+        return '<svg xmlns="http://www.w3.org/2000/svg" id="' + id + '" class="' + classPrefix + iconId + '" aria-hidden="true" focusable="false">\n            <use xlink:href="' + iconSpritePath + '#' + iconId + '"></use></svg>';
+    },
     _createAudioDescription: function _createAudioDescription() {
         var t = this;
-
+        var iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-audio');
         var audioDescriptionTitle = mejs.i18n.t('mejs.a11y-audio-description');
         var audioDescriptionButton = document.createElement('div');
         audioDescriptionButton.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'audio-description-button';
-        audioDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + audioDescriptionTitle + '" aria-label="' + audioDescriptionTitle + '" tabindex="0"></button>';
+        audioDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + audioDescriptionTitle + '" aria-label="' + audioDescriptionTitle + '" tabindex="0">' + iconHtml + '</button>';
 
         t.addControlElement(audioDescriptionButton, 'audio-description');
 
@@ -86,10 +91,11 @@ Object.assign(MediaElementPlayer.prototype, {
     },
     _createVideoDescription: function _createVideoDescription() {
         var t = this;
+        var iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-video');
         var videoDescriptionTitle = mejs.i18n.t('mejs.a11y-video-description');
         var videoDescriptionButton = document.createElement('div');
         videoDescriptionButton.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'video-description-button';
-        videoDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + videoDescriptionTitle + '" aria-label="' + videoDescriptionTitle + '" tabindex="0"></button>';
+        videoDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + videoDescriptionTitle + '" aria-label="' + videoDescriptionTitle + '" tabindex="0">' + iconHtml + '</button>';
         t.addControlElement(videoDescriptionButton, 'video-description');
 
         videoDescriptionButton.addEventListener('click', function () {