Make icons aria-hidden by default

Author: jelbourn

src/lib/icon/icon.md

@@ -82,7 +82,9 @@ match the current theme's colors using the `color` attribute. This can be change
 
 Similar to an `<img>` element, an icon alone does not convey any useful information for a
 screen-reader user. The user of `<md-icon>` must provide additional information pertaining to how
-the icon is used.
+the icon is used. Based on the use-cases described below, `md-icon` is marked as
+`aria-hidden="true"` by default, but this can be overriden by adding `aria-hidden="false"` to the
+element.
 
 In thinking about accessibility, it is useful to place icon use into one of three categories:
 1. **Decorative**: the icon conveys no real semantic meaning and is purely cosmetic.

src/lib/icon/icon.spec.ts

@@ -42,10 +42,11 @@ describe('MdIcon', () => {
     TestBed.configureTestingModule({
       imports: [HttpModule, MdIconModule],
       declarations: [
-        MdIconColorTestApp,
-        MdIconLigatureTestApp,
-        MdIconCustomFontCssTestApp,
-        MdIconFromSvgNameTestApp,
+        IconWithColor,
+        IconWithLigature,
+        IconWithCustomFontCss,
+        IconFromSvgName,
+        IconWithAriaHiddenFalse,
       ],
       providers: [
         MockBackend,
@@ -75,7 +76,7 @@ describe('MdIcon', () => {
   }));
 
   it('should apply class based on color attribute', () => {
-    let fixture = TestBed.createComponent(MdIconColorTestApp);
+    let fixture = TestBed.createComponent(IconWithColor);
 
     const testComponent = fixture.componentInstance;
     const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -85,9 +86,23 @@ describe('MdIcon', () => {
     expect(sortedClassNames(mdIconElement)).toEqual(['mat-icon', 'mat-primary', 'material-icons']);
   });
 
+  it('should mark md-icon as aria-hidden by default', () => {
+    const fixture = TestBed.createComponent(IconWithLigature);
+    const iconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+    expect(iconElement.getAttribute('aria-hidden'))
+        .toBe('true', 'Expected the md-icon element has aria-hidden="true" by default');
+  });
+
+  it('should not override a user-provided aria-hidden attribute', () => {
+    const fixture = TestBed.createComponent(IconWithAriaHiddenFalse);
+    const iconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+    expect(iconElement.getAttribute('aria-hidden'))
+        .toBe('false', 'Expected the md-icon element has the user-provided aria-hidden value');
+  });
+
   describe('Ligature icons', () => {
     it('should add material-icons class by default', () => {
-      let fixture = TestBed.createComponent(MdIconLigatureTestApp);
+      let fixture = TestBed.createComponent(IconWithLigature);
 
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -99,7 +114,7 @@ describe('MdIcon', () => {
     it('should use alternate icon font if set', () => {
       mdIconRegistry.setDefaultFontSetClass('myfont');
 
-      let fixture = TestBed.createComponent(MdIconLigatureTestApp);
+      let fixture = TestBed.createComponent(IconWithLigature);
 
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -114,7 +129,7 @@ describe('MdIcon', () => {
       mdIconRegistry.addSvgIcon('fluffy', trust('cat.svg'));
       mdIconRegistry.addSvgIcon('fido', trust('dog.svg'));
 
-      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      let fixture = TestBed.createComponent(IconFromSvgName);
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
       let svgElement: SVGElement;
@@ -143,7 +158,7 @@ describe('MdIcon', () => {
       mdIconRegistry.addSvgIcon('fluffy', 'farm-set-1.svg');
 
       expect(() => {
-        let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+        let fixture = TestBed.createComponent(IconFromSvgName);
         fixture.componentInstance.iconName = 'fluffy';
         fixture.detectChanges();
       }).toThrowError(/unsafe value used in a resource URL context/);
@@ -153,7 +168,7 @@ describe('MdIcon', () => {
       mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
 
       expect(() => {
-        let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+        let fixture = TestBed.createComponent(IconFromSvgName);
         fixture.componentInstance.iconName = 'farm:pig';
         fixture.detectChanges();
       }).toThrowError(/unsafe value used in a resource URL context/);
@@ -162,7 +177,7 @@ describe('MdIcon', () => {
     it('should extract icon from SVG icon set', () => {
       mdIconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-1.svg'));
 
-      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      let fixture = TestBed.createComponent(IconFromSvgName);
 
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -197,7 +212,7 @@ describe('MdIcon', () => {
       mdIconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-2.svg'));
       mdIconRegistry.addSvgIconSetInNamespace('arrows', trust('arrow-set.svg'));
 
-      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      let fixture = TestBed.createComponent(IconFromSvgName);
 
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -236,7 +251,7 @@ describe('MdIcon', () => {
     it('should unwrap <symbol> nodes', () => {
       mdIconRegistry.addSvgIconSetInNamespace('farm', trust('farm-set-3.svg'));
 
-      const fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      const fixture = TestBed.createComponent(IconFromSvgName);
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
 
@@ -255,7 +270,7 @@ describe('MdIcon', () => {
     it('should not wrap <svg> elements in icon sets in another svg tag', () => {
       mdIconRegistry.addSvgIconSet(trust('arrow-set.svg'));
 
-      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      let fixture = TestBed.createComponent(IconFromSvgName);
 
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -272,7 +287,7 @@ describe('MdIcon', () => {
     it('should return unmodified copies of icons from icon sets', () => {
       mdIconRegistry.addSvgIconSet(trust('arrow-set.svg'));
 
-      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      let fixture = TestBed.createComponent(IconFromSvgName);
 
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -305,7 +320,7 @@ describe('MdIcon', () => {
       mdIconRegistry.registerFontClassAlias('f1', 'font1');
       mdIconRegistry.registerFontClassAlias('f2');
 
-      let fixture = TestBed.createComponent(MdIconCustomFontCssTestApp);
+      let fixture = TestBed.createComponent(IconWithCustomFontCss);
 
       const testComponent = fixture.componentInstance;
       const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -340,7 +355,7 @@ describe('MdIcon without HttpModule', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdIconModule],
-      declarations: [MdIconFromSvgNameTestApp],
+      declarations: [IconFromSvgName],
     });
 
     TestBed.compileComponents();
@@ -357,7 +372,7 @@ describe('MdIcon without HttpModule', () => {
     expect(() => {
       mdIconRegistry.addSvgIcon('fido', sanitizer.bypassSecurityTrustResourceUrl('dog.svg'));
 
-      let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
+      let fixture = TestBed.createComponent(IconFromSvgName);
 
       fixture.componentInstance.iconName = 'fido';
       fixture.detectChanges();
@@ -366,27 +381,27 @@ describe('MdIcon without HttpModule', () => {
 });
 
 
-/** Test components that contain an MdIcon. */
 @Component({template: `<md-icon>{{iconName}}</md-icon>`})
-class MdIconLigatureTestApp {
+class IconWithLigature {
   iconName = '';
 }
 
 @Component({template: `<md-icon [color]="iconColor">{{iconName}}</md-icon>`})
-class MdIconColorTestApp {
+class IconWithColor {
   iconName = '';
   iconColor = 'primary';
 }
 
-@Component({
-  template: `<md-icon [fontSet]="fontSet" [fontIcon]="fontIcon"></md-icon>`
-})
-class MdIconCustomFontCssTestApp {
+@Component({template: `<md-icon [fontSet]="fontSet" [fontIcon]="fontIcon"></md-icon>`})
+class IconWithCustomFontCss {
   fontSet = '';
   fontIcon = '';
 }
 
 @Component({template: `<md-icon [svgIcon]="iconName"></md-icon>`})
-class MdIconFromSvgNameTestApp {
+class IconFromSvgName {
   iconName = '';
 }
+
+@Component({template: '<md-icon aria-hidden="false">face</md-icon>'})
+class IconWithAriaHiddenFalse { }

src/lib/icon/icon.ts

@@ -8,7 +8,7 @@ import {
   Renderer2,
   SimpleChange,
   ViewEncapsulation,
-  AfterViewChecked,
+  Attribute,
 } from '@angular/core';
 import {MdIconRegistry} from './icon-registry';
 
@@ -81,7 +81,14 @@ export class MdIcon implements OnChanges, OnInit {
   constructor(
       private _elementRef: ElementRef,
       private _renderer: Renderer2,
-      private _mdIconRegistry: MdIconRegistry) { }
+      private _mdIconRegistry: MdIconRegistry,
+      @Attribute('aria-hidden') ariaHidden: string) {
+    // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
+    // the right thing to do for the majority of icon use-cases.
+    if (!ariaHidden) {
+      _renderer.setAttribute(_elementRef.nativeElement, 'aria-hidden', 'true');
+    }
+  }
 
   _updateColor(newColor: string) {
     this._setElementColor(this._color, false);