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

Author: andrewseguin

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

@@ -8,7 +8,6 @@
 
 import {Injectable, SkipSelf, Optional} from '@angular/core';
 import {Subject} from 'rxjs';
-import {SortDirection} from './sort-direction';
 
 /**
  * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
@@ -26,11 +25,6 @@ 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'}`;
-  }
 }
 /** @docs-private */
 export function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl: MatSortHeaderIntl) {

src/lib/sort/sort-header.html

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

src/lib/sort/sort-header.ts

@@ -70,6 +70,7 @@ export interface ArrowViewStateTransition {
     '(mouseenter)': '_setIndicatorHintVisible(true)',
     '(longpress)': '_setIndicatorHintVisible(true)',
     '(mouseleave)': '_setIndicatorHintVisible(false)',
+    '[attr.aria-sort]': '_getAriaSortAttribute()',
     '[class.mat-sort-header-disabled]': '_isDisabled()',
   },
   encapsulation: ViewEncapsulation.None,
@@ -263,4 +264,16 @@ export class MatSortHeader extends _MatSortHeaderMixinBase implements MatSortabl
   _isDisabled() {
     return this._sort.disabled || this.disabled;
   }
+
+  /**
+   * 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

@@ -347,6 +347,23 @@ describe('MatSort', () => {
     expect(header._showIndicatorHint).toBeFalsy();
   });
 
+  it('should apply the aria-sort label to the header when sorted', () => {
+    const sortHeaderElement = fixture.nativeElement.querySelector('#defaultA');
+    expect(sortHeaderElement.getAttribute('aria-sort')).toBe(null);
+
+    component.sort('defaultA');
+    fixture.detectChanges();
+    expect(sortHeaderElement.getAttribute('aria-sort')).toBe('ascending');
+
+    component.sort('defaultA');
+    fixture.detectChanges();
+    expect(sortHeaderElement.getAttribute('aria-sort')).toBe('descending');
+
+    component.sort('defaultA');
+    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;

src/lib/table/table.spec.ts

@@ -161,7 +161,7 @@ describe('MatTable', () => {
       component.sort.sort(component.sortHeader);
       fixture.detectChanges();
       expectTableToMatchContent(tableElement, [
-        ['Column A\xa0Sorted by a ascending', 'Column B', 'Column C'],
+        ['Column A', 'Column B', 'Column C'],
         ['a_1', 'b_1', 'c_1'],
         ['a_2', 'b_2', 'c_2'],
         ['a_3', 'b_3', 'c_3'],
@@ -171,7 +171,7 @@ describe('MatTable', () => {
       component.sort.sort(component.sortHeader);
       fixture.detectChanges();
       expectTableToMatchContent(tableElement, [
-        ['Column A\xa0Sorted by a descending', 'Column B', 'Column C'],
+        ['Column A', 'Column B', 'Column C'],
         ['a_3', 'b_3', 'c_3'],
         ['a_2', 'b_2', 'c_2'],
         ['a_1', 'b_1', 'c_1'],
@@ -189,7 +189,7 @@ describe('MatTable', () => {
       component.sort.direction = '';
       component.sort.sort(component.sortHeader);
       expectTableToMatchContent(tableElement, [
-        ['Column A\xa0Sorted by a descending', 'Column B', 'Column C'],
+        ['Column A', 'Column B', 'Column C'],
         ['a_1', 'b_1', 'c_1'],
         ['a_3', 'b_3', 'c_3'],
         ['a_2', 'b_2', 'c_2'],
@@ -204,7 +204,7 @@ describe('MatTable', () => {
 
       // Expect that empty string row comes before the other values
       expectTableToMatchContent(tableElement, [
-        ['Column A\xa0Sorted by a ascending', 'Column B', 'Column C'],
+        ['Column A', 'Column B', 'Column C'],
         ['', 'b_1', 'c_1'],
         ['a_2', 'b_2', 'c_2'],
         ['a_3', 'b_3', 'c_3'],
@@ -214,7 +214,7 @@ describe('MatTable', () => {
       component.sort.sort(component.sortHeader);
       fixture.detectChanges();
       expectTableToMatchContent(tableElement, [
-        ['Column A\xa0Sorted by a descending', 'Column B', 'Column C'],
+        ['Column A', 'Column B', 'Column C'],
         ['a_3', 'b_3', 'c_3'],
         ['a_2', 'b_2', 'c_2'],
         ['', 'b_1', 'c_1'],
@@ -229,7 +229,7 @@ describe('MatTable', () => {
       component.sort.sort(component.sortHeader);
       fixture.detectChanges();
       expectTableToMatchContent(tableElement, [
-        ['Column A\xa0Sorted by a ascending', 'Column B', 'Column C'],
+        ['Column A', 'Column B', 'Column C'],
         ['', 'b_1', 'c_1'],
         ['a_2', 'b_2', 'c_2'],
         ['a_3', 'b_3', 'c_3'],
@@ -240,7 +240,7 @@ describe('MatTable', () => {
       component.sort.sort(component.sortHeader);
       fixture.detectChanges();
       expectTableToMatchContent(tableElement, [
-        ['Column A\xa0Sorted by a descending', 'Column B', 'Column C'],
+        ['Column A', 'Column B', 'Column C'],
         ['a_3', 'b_3', 'c_3'],
         ['a_2', 'b_2', 'c_2'],
         ['', 'b_1', 'c_1'],