From 6c9300af616e06cd895e7cdef0ebf3164be77897 Mon Sep 17 00:00:00 2001 From: Weston Pace Date: Sat, 14 Jan 2017 02:59:19 -0700 Subject: [PATCH] fix(icon): add caching of md-icon aria-label The md-icon component now caches the aria-label value and only actually modifies the DOM if the value is unchanged. This prevents md-icon from modifying the DOM every iteration of change detection. Closed #2642 --- src/lib/icon/icon.spec.ts | 15 +++++++++++++++ src/lib/icon/icon.ts | 4 +++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/lib/icon/icon.spec.ts b/src/lib/icon/icon.spec.ts index 202f6738eb2d..de3da1ca0c8f 100644 --- a/src/lib/icon/icon.spec.ts +++ b/src/lib/icon/icon.spec.ts @@ -333,6 +333,21 @@ describe('MdIcon', () => { expect(mdIconElement.getAttribute('aria-label')).toBe('hand'); }); + it('should not set aria label unless it actually changed', () => { + let fixture = TestBed.createComponent(MdIconLigatureTestApp); + + const testComponent = fixture.componentInstance; + const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); + testComponent.iconName = 'home'; + + fixture.detectChanges(); + expect(mdIconElement.getAttribute('aria-label')).toBe('home'); + + mdIconElement.removeAttribute('aria-label'); + fixture.detectChanges(); + expect(mdIconElement.getAttribute('aria-label')).toBeFalsy(); + }); + it('should use alt tag if aria label is not specified', () => { let fixture = TestBed.createComponent(MdIconLigatureWithAriaBindingTestApp); diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts index 47a47717e7d5..eb45ef79fc0b 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -96,6 +96,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { private _previousFontSetClass: string; private _previousFontIconClass: string; + private _previousAriaLabel: string; constructor( private _elementRef: ElementRef, @@ -176,7 +177,8 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { private _updateAriaLabel() { const ariaLabel = this._getAriaLabel(); - if (ariaLabel) { + if (ariaLabel && ariaLabel !== this._previousAriaLabel) { + this._previousAriaLabel = ariaLabel; this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-label', ariaLabel); } }