fix(sort): add aria-sort to host when sorted

Author: andrewseguin

src/lib/sort/sort-header-intl.ts

@@ -8,7 +8,6 @@
 
 import {Injectable} from '@angular/core';
 import {Subject} from 'rxjs/Subject';
-import {SortDirection} from './sort-direction';
 
 /**
  * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
@@ -26,9 +25,4 @@ export class MatSortHeaderIntl {
   sortButtonLabel = (id: string) => {
     return `Change sorting for ${id}`;
   }
-
-  /** A label to describe the current sort (visible only to screenreaders). */
-  sortDescriptionLabel = (id: string, direction: SortDirection) => {
-    return `Sorted by ${id} ${direction == 'asc' ? 'ascending' : 'descending'}`;
-  }
 }

src/lib/sort/sort-header.html

@@ -14,7 +14,3 @@
     </div>
   </div>
 </div>
-
-<span class="cdk-visually-hidden" *ngIf="_isSorted()">
-  &nbsp;{{_intl.sortDescriptionLabel(id, _sort.direction)}}
-</span>

src/lib/sort/sort-header.ts

@@ -15,6 +15,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+<<<<<<< HEAD
 import {
   trigger,
   state,
@@ -23,6 +24,9 @@ import {
   transition,
   keyframes,
 } from '@angular/animations';
+=======
+import {animate, state, style, transition, trigger} from '@angular/animations';
+>>>>>>> fix(sort): add aria-sort to host when sorted
 import {CdkColumnDef} from '@angular/cdk/table';
 import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
@@ -51,6 +55,7 @@ const SORT_ANIMATION_TRANSITION =
   styleUrls: ['sort-header.css'],
   host: {
     '(click)': '_sort.sort(this)',
+    '[attr.aria-sort]': '_getAriaSortAttribute()',
     '[class.mat-sort-header-sorted]': '_isSorted()',
   },
   encapsulation: ViewEncapsulation.None,
@@ -145,4 +150,16 @@ export class MatSortHeader implements MatSortable {
     return this._sort.active == this.id &&
         (this._sort.direction === 'asc' || this._sort.direction === 'desc');
   }
+
+  /**
+   * Gets the aria-sort attribute that should be applied to this sort header. If this header
+   * is not sorted, returns null so that the attribute is removed from the host element. Aria spec
+   * says that the aria-sort property should only be present on one header at a time, so removing
+   * ensures this is true.
+   */
+  _getAriaSortAttribute() {
+    if (!this._isSorted()) { return null; }
+
+    return this._sort.direction == 'asc' ? 'ascending' : 'descending';
+  }
 }

src/lib/sort/sort.spec.ts

@@ -159,6 +159,23 @@ describe('MatSort', () => {
     expect(button.getAttribute('aria-label')).toBe('Change sorting for defaultSortHeaderA');
   });
 
+  it('should apply the aria-sort label to the header when sorted', () => {
+    const sortHeaderElement = fixture.nativeElement.querySelector('#defaultSortHeaderA');
+    expect(sortHeaderElement.getAttribute('aria-sort')).toBe(null);
+
+    component.sort('defaultSortHeaderA');
+    fixture.detectChanges();
+    expect(sortHeaderElement.getAttribute('aria-sort')).toBe('ascending');
+
+    component.sort('defaultSortHeaderA');
+    fixture.detectChanges();
+    expect(sortHeaderElement.getAttribute('aria-sort')).toBe('descending');
+
+    component.sort('defaultSortHeaderA');
+    fixture.detectChanges();
+    expect(sortHeaderElement.getAttribute('aria-sort')).toBe(null);
+  });
+
   it('should re-render when the i18n labels have changed',
     inject([MatSortHeaderIntl], (intl: MatSortHeaderIntl) => {
       const header = fixture.debugElement.query(By.directive(MatSortHeader)).nativeElement;