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

Author: andrewseguin

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

@@ -26,9 +26,4 @@ export class MdSortHeaderIntl {
   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

@@ -13,7 +13,3 @@
     <div class="mat-sort-header-pointer-right"></div>
   </div>
 </div>
-
-<span class="cdk-visually-hidden" *ngIf="_isSorted()">
-  {{_intl.sortDescriptionLabel(id, _sort.direction)}}
-</span>

src/lib/sort/sort-header.ts

@@ -46,6 +46,7 @@ import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors';
   styleUrls: ['sort-header.css'],
   host: {
     '(click)': '_sort.sort(this)',
+    '[attr.aria-sort]': '_getAriaSortAttribute()',
     '[class.mat-sort-header-sorted]': '_isSorted()',
   },
   encapsulation: ViewEncapsulation.None,
@@ -113,4 +114,16 @@ export class MdSortHeader implements MdSortable {
   _isSorted() {
     return this._sort.active == this.id && this._sort.direction;
   }
+
+  /**
+   * Returns 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

@@ -144,6 +144,23 @@ describe('MdSort', () => {
     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([MdSortHeaderIntl], (intl: MdSortHeaderIntl) => {
       const header = fixture.debugElement.query(By.directive(MdSortHeader)).nativeElement;