Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(icon): accessibility issue with unique IDs
Browse files Browse the repository at this point in the history
*  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.

fixes #6796. closes #7440.
  • Loading branch information
david-gang authored and ThomasBurleson committed Mar 7, 2016
1 parent aa49451 commit 810c4f3
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 5 deletions.
6 changes: 6 additions & 0 deletions src/components/icon/icon.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -464,9 +464,15 @@ describe('mdIcon service', function() {
});
});


function updateDefaults(svg) {
svg = angular.element(svg)[0];

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

angular.forEach({
'xmlns' : 'http://www.w3.org/2000/svg',
'fit' : '',
Expand Down
21 changes: 16 additions & 5 deletions src/components/icon/js/iconService.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
* @param {string} id Icon name/id used to register the iconset
* @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
* data or as part of the lookup in `$templateCache` if pre-loading was configured.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
* Default value is 24.
*
Expand Down Expand Up @@ -134,7 +134,7 @@
*
* @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
* data or as part of the lookup in `$templateCache` if pre-loading was configured.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
* Default value is 24.
*
Expand Down Expand Up @@ -247,7 +247,7 @@
config.defaultViewBoxSize = viewBoxSize;
return this;
},

/**
* Register an alias name associated with a font-icon library style ;
*/
Expand Down Expand Up @@ -422,8 +422,19 @@
*/
function cacheIcon( id ) {

return function updateCache( icon ) {
iconCache[id] = isIcon(icon) ? icon : new Icon(icon, config[id]);
return function updateCache( _icon ) {
var icon = isIcon(_icon) ? _icon : new Icon(_icon, config[id]);

//clear id attributes to prevent aria issues
var elem = icon.element;
elem.removeAttribute('id');

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

iconCache[id] = icon;


return iconCache[id].clone();
};
Expand Down

0 comments on commit 810c4f3

Please sign in to comment.