Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 229dd6e

Browse files
fix(material/sort): remove role from header when disabled (#24477)
When the sort header is disabled, we make it non-interactive by clearing its `tabindex`, however it still has the `role="button"` which can throw off screen readers if it doesn't have text. These changes also clear the `role` from the header if it's disabled.
1 parent cf79308 commit 229dd6e

File tree

3 files changed

+9
-5
lines changed

3 files changed

+9
-5
lines changed

‎src/material/sort/sort-header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
[class.mat-sort-header-sorted]="_isSorted()"
1313
[class.mat-sort-header-position-before]="arrowPosition === 'before'"
1414
[attr.tabindex]="_isDisabled() ? null : 0"
15-
role="button">
15+
[attr.role]="_isDisabled() ? null : 'button'">
1616

1717
<!--
1818
TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large

‎src/material/sort/sort-header.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export class MatSortHeader
222222

223223
this._sort.register(this);
224224

225-
this._sortButton = this._elementRef.nativeElement.querySelector('[role="button"]')!;
225+
this._sortButton = this._elementRef.nativeElement.querySelector('.mat-sort-header-container')!;
226226
this._updateSortActionDescription(this._sortActionDescription);
227227
}
228228

‎src/material/sort/sort.spec.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,13 +237,15 @@ describe('MatSort', () => {
237237
component.sort('defaultA');
238238
expect(component.matSort.direction).toBe('asc');
239239
expect(container.getAttribute('tabindex')).toBe('0');
240+
expect(container.getAttribute('role')).toBe('button');
240241

241242
component.disabledColumnSort = true;
242243
fixture.detectChanges();
243244

244245
component.sort('defaultA');
245246
expect(component.matSort.direction).toBe('asc');
246-
expect(container.getAttribute('tabindex')).toBeFalsy();
247+
expect(container.hasAttribute('tabindex')).toBe(false);
248+
expect(container.hasAttribute('role')).toBe(false);
247249
});
248250

249251
it('should allow for the cycling the sort direction to be disabled for all columns', () => {
@@ -417,7 +419,7 @@ describe('MatSort', () => {
417419
});
418420

419421
it('should add a default aria description to sort buttons', () => {
420-
const sortButton = fixture.nativeElement.querySelector('[role="button"]');
422+
const sortButton = fixture.nativeElement.querySelector('.mat-sort-header-container');
421423
const descriptionId = sortButton.getAttribute('aria-describedby');
422424
expect(descriptionId).toBeDefined();
423425

@@ -426,7 +428,9 @@ describe('MatSort', () => {
426428
});
427429

428430
it('should add a custom aria description to sort buttons', () => {
429-
const sortButton = fixture.nativeElement.querySelector('#defaultB [role="button"]');
431+
const sortButton = fixture.nativeElement.querySelector(
432+
'#defaultB .mat-sort-header-container',
433+
);
430434
let descriptionId = sortButton.getAttribute('aria-describedby');
431435
expect(descriptionId).toBeDefined();
432436

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /