fix(md-icon): accessibility issue with unique ids

[david-gang]

fix(md-icon): accessibility issue with unique ids

When the same svg icon is placed multiple times in the same page, it raises an aria warning that every element should have an unique id.
The solution is to remove the id from the svg and the path children.

closes: #6796

[devversion]

Why only on the path node? circle etc, can also hold an id attribute?

[david-gang]

You are right. I will remove the if.

[devversion]

@david-gang I suggest, walking recursively through the children and remove the id if present.
Like so

(function recursiveIteration(element) {
  angular.forEach(element.childNodes, function(item) {
    item.removeAttribute('id');
    if (item.childNodes) {
      recursiveIteration(item)
    }
  });
})(myIconElement);

Or another way, would be the querySelector. Like so

angular.forEach(myIconElement.querySelectorAll('[id]'), function(item) {
  item.removeAttribute('id');
});

But I'm not sure what's the most elegant / performant solution.

[david-gang]

@devversion The second option looks very nice. It should also be performant because it is a native function and the call stack is flat.

[devversion]

@david-gang Yes definitely, it looks more elegant, but I heard some negative about attribute selectors in IE and other browsers.

[devversion]

Just updated your test - now it works. See the results here: http://jsperf.com/recursive-iteration-vs-queryselectorall

[david-gang]

thanks 👍

[devversion]

No problem. Look here at IE11

[david-gang]

The code is just called once per icon type, unconnected to the number of times i use the icon in the application, and even in ie11 the performance is 10^5 ops per second, so this should be fine.

[devversion]

It's okay 😄 Just wanted to share with you the performance differences.