diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index 65254ef2e6f..a95daebf09c 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -31,6 +31,9 @@ angular.module('material.components.icon', [ * To use icon sets, developers are required to pre-register the sets using the `$mdIconProvider` service. * @param {string} md-font-icon String name of CSS icon associated with the font-face will be used * to render the icon. Requires the fonts and the named CSS styles to be preloaded. + * @param {string=} alt Labels icon for accessibility. If an empty string is provided, icon + * will be hidden from accessibility layer with `aria-hidden="true"`. If there's no alt on the icon + * nor a label on the parent element, a warning will be logged to the console. * * @usage * @@ -63,12 +66,15 @@ function mdIconDirective($mdIcon, $mdAria, $log) { function postLink(scope, element, attr) { var ariaLabel = attr.alt || scope.fontIcon || scope.svgIcon; var attrName = attr.$normalize(attr.$attr.mdSvgIcon || attr.$attr.mdSvgSrc || ''); - if (attr.alt == '') { - // Hide from the accessibility layer. - $mdAria.expect(element, 'aria-hidden', 'true'); - } else { + var parentEl = element.parent(); + var parentLabel = parentEl.attr('aria-label') || parentEl.text(); + + if (!parentLabel && attr.alt !== '') { $mdAria.expect(element, 'aria-label', ariaLabel); $mdAria.expect(element, 'role', 'img'); + } else { + // Hide from the accessibility layer. + $mdAria.expect(element, 'aria-hidden', 'true'); } if (attrName) { diff --git a/src/components/icon/icon.spec.js b/src/components/icon/icon.spec.js index 6eb154a6f3b..296525e4952 100644 --- a/src/components/icon/icon.spec.js +++ b/src/components/icon/icon.spec.js @@ -60,6 +60,16 @@ describe('mdIcon directive', function() { describe('with ARIA support', function() { + it('should apply aria-hidden="true" when parent has valid label', function() { + el = make(''); + expect(el.find('md-icon').attr('aria-hidden')).toEqual('true'); + }); + + it('should apply aria-hidden="true" when parent has text content', function() { + el = make(''); + expect(el.find('md-icon').attr('aria-hidden')).toEqual('true'); + }); + it('should apply aria-hidden="true" when alt is empty string', function() { el = make(''); expect(el.attr('aria-hidden')).toEqual('true');