Apply idPrefix to references in aria-labelledby

To make svgs more accessible to people with screen readers, we can make
use of a few elements and attributes:

- <title> to set a title for the image
- <description> to describe the image
- @aria-labelledby to tell screen readers where the title and
description are located in the tree

Here's some more info on how to best use them:
https://css-tricks.com/accessible-svgs/#article-header-id-6

We're using svg-inline-loader over at brigade.com to make sure every svg
has unique ids, but after adding accessibility markup we noticed that
the references weren't right:

<svg viewBox="0 0 24 24" role="img" aria-labelledby="shareIconTitle shareIconDesc"><title id="__C3oQyi-__shareIconTitle">Share Icon</title><desc id="__C3oQyi-__shareIconDesc">Paper airline silhouette.</desc><path d="M21.184 2.073a.543.543 0 0 1 .806.574l-3.127 16.317a.657.657 0 0 1-.861.494l-4.866-1.825-2.075"></path></svg>

(I've manually removed some stuff from the above svg to make it
shorter).

Notice how the references in aria-labelledby are now referencing missing
ids. To fix this, we can apply the prefix here as well.

Author: trotzig

lib/transformer.js

@@ -116,13 +116,13 @@ function createClassPrefix(classPrefix) {
                 //Prefix classes when multiple classes are present
                 var classes = tag.attributes[classIdx][1];
                 var prefixedClassString = "";
-                
+
                 classes = classes.replace(/[ ]+/,' ');
                 classes = classes.split(' ');
                 classes.forEach(function(classI){
                     prefixedClassString += classPrefix + classI + ' ';
                 });
-                
+
                 tag.attributes[classIdx][1] = prefixedClassString;
             }
         }
@@ -155,8 +155,11 @@ function createIdPrefix(idPrefix) {
                         var id = match.substring(5, match.length -1);
                         return "url(#" + idPrefix + id + ")";
                     });
+                } else if (attr[0] === 'aria-labelledby') {
+                    attr[1] = attr[1].split(' ').map(function (id) {
+                        return idPrefix + id;
+                    }).join(' ');
                 }
-
             });
         }
 

tests/fixtures/with-ids.svg

@@ -56,12 +56,14 @@ describe('getExtractedSVG()', function(){
         var svgWithStyle = require('raw!./fixtures/with-ids.svg');
         var processedStyleInsertedSVG = SVGInlineLoader.getExtractedSVG(svgWithStyle, { idPrefix: 'test.prefix-' });
 
-
-        assert.isTrue( processedStyleInsertedSVG.match(/test\.prefix-foo/g).length === 3 );
+        assert.isTrue( processedStyleInsertedSVG.match(/test\.prefix-foo/g).length === 7 );
         // // replaces xlink:href=
         assert.isTrue( processedStyleInsertedSVG.match(/xlink:href="#test.prefix-foo"/g).length === 1 );
         // // replaces url(#foo)
         assert.isTrue( processedStyleInsertedSVG.match(/url\(#test\.prefix-foo\)/g).length === 1 );
+        // replaces aria-labelledby
+        assert.isTrue( processedStyleInsertedSVG.match(
+          /aria-labelledby="test\.prefix-foo-title test\.prefix-foo-description"/g).length === 1 );
     });
 
     it('should be able to specify tags to be removed by `removingTags` option', function () {