From 6d329bfb1408e9bc598c85154550fa34206e3c14 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Thu, 21 Sep 2017 11:29:26 -0700 Subject: [PATCH] fix(sort): add aria-sort to host when sorted --- src/lib/sort/sort-header-intl.ts | 6 ------ src/lib/sort/sort-header.html | 4 ---- src/lib/sort/sort-header.ts | 13 +++++++++++++ src/lib/sort/sort.spec.ts | 17 +++++++++++++++++ src/lib/table/table.spec.ts | 14 +++++++------- 5 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/lib/sort/sort-header-intl.ts b/src/lib/sort/sort-header-intl.ts index e293e55c8e27..9d11b321555c 100644 --- a/src/lib/sort/sort-header-intl.ts +++ b/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) { diff --git a/src/lib/sort/sort-header.html b/src/lib/sort/sort-header.html index 3fc947d6fe18..223d565ba0ec 100644 --- a/src/lib/sort/sort-header.html +++ b/src/lib/sort/sort-header.html @@ -24,7 +24,3 @@ - - -  {{_intl.sortDescriptionLabel(id, _sort.direction)}} - diff --git a/src/lib/sort/sort-header.ts b/src/lib/sort/sort-header.ts index ad7f8edbc365..3853ad9cb277 100644 --- a/src/lib/sort/sort-header.ts +++ b/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'; + } } diff --git a/src/lib/sort/sort.spec.ts b/src/lib/sort/sort.spec.ts index 6b2a6c0e0db9..4bbe69578c5a 100644 --- a/src/lib/sort/sort.spec.ts +++ b/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; diff --git a/src/lib/table/table.spec.ts b/src/lib/table/table.spec.ts index 5cbbf4846813..4d47f5b5e602 100644 --- a/src/lib/table/table.spec.ts +++ b/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'],