commit 3fb030b4cbfa69f161e4b0daaef3723525f8cf88
author airnan <hernantorrisi@gmail.com> Sun Apr 07 22:03:38 2019 -0400
committer airnan <hernantorrisi@gmail.com> Sun Apr 07 22:03:38 2019 -0400
tree 219afb9971dd392fdd83f591a2436b7f9ea95d45
parent 4f409ace111ee2e1f5b615d65bcf72395e919401

fixes #1469 added title, description and aria label to svg renderer

player/index.html

diff --git a/player/index.html b/player/index.html
index 988384b..51952da 100644
--- a/player/index.html
+++ b/player/index.html
@@ -163,13 +163,15 @@
     var elem = document.getElementById('lottie');
     var animData = {
         container: elem,
-        renderer: 'canvas',
+        renderer: 'svg',
         loop: true,
         autoplay: true,
         rendererSettings: {
             progressiveLoad:true,
             preserveAspectRatio: 'xMidYMid meet',
-            imagePreserveAspectRatio: 'xMidYMid meet'
+            imagePreserveAspectRatio: 'xMidYMid meet',
+            title: 'TEST TITLE',
+            description: 'TEST DESCRIPTION',
         },
         path: 'exports/render/data.json'
     };

player/js/elements/svgElements/SVGTextElement.js

diff --git a/player/js/elements/svgElements/SVGTextElement.js b/player/js/elements/svgElements/SVGTextElement.js
index 547eaac..f7973d3 100644
--- a/player/js/elements/svgElements/SVGTextElement.js
+++ b/player/js/elements/svgElements/SVGTextElement.js
@@ -53,6 +53,7 @@
         this.layerElement.setAttribute('font-style', fStyle);
         this.layerElement.setAttribute('font-weight', fWeight);
     }
+    this.layerElement.setAttribute('arial-label', documentData.t);
 
     var letters = documentData.l || [];
     var usesGlyphs = !!this.globalData.fontManager.chars;

player/js/renderers/SVGRenderer.js

diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 48f42e6..7e36e5b 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -3,6 +3,26 @@
     this.layers = null;
     this.renderedFrame = -1;
     this.svgElement = createNS('svg');
+    var ariaLabel = '';
+    if (config && config.title) {
+        var titleElement = createNS('title');
+        var titleId = createElementID();
+        titleElement.setAttribute('id', titleId);
+        titleElement.textContent = config.title;
+        this.svgElement.appendChild(titleElement);
+        ariaLabel += titleId;
+    }
+    if (config && config.description) {
+        var descElement = createNS('desc');
+        var descId = createElementID();
+        descElement.setAttribute('id', descId);
+        descElement.textContent = config.description;
+        this.svgElement.appendChild(descElement);
+        ariaLabel += ' ' + descId;
+    }
+    if (ariaLabel) {
+        this.svgElement.setAttribute('aria-labelledby', ariaLabel)
+    }
     var defs = createNS( 'defs');
     this.svgElement.appendChild(defs);
     var maskElement = createNS('g');
@@ -17,6 +37,7 @@
         viewBoxSize: (config && config.viewBoxSize) || false,
         className: (config && config.className) || ''
     };
+
     this.globalData = {
         _mdf: false,
         frameNum: -1,