41 lines
2.1 KiB
HTML
41 lines
2.1 KiB
HTML
|
<!--
|
||
|
|
We set the `tabindex` on an element inside the table header, rather than the header itself,
|
||
|
|
because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the
|
||
|
|
table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both
|
||
|
|
be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach
|
||
|
|
over having a button with an `aria-label` inside the header, because the button's `aria-label`
|
||
|
|
will be read out as the user is navigating the table's cell (see #13012).
|
||
|
|
|
||
|
|
The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid
|
||
|
|
-->
|
||
|
|
<div class="mat-sort-header-container mat-focus-indicator"
|
||
|
|
[class.mat-sort-header-sorted]="_isSorted()"
|
||
|
|
[class.mat-sort-header-position-before]="arrowPosition === 'before'"
|
||
|
|
[class.mat-sort-header-descending]="this._sort.direction === 'desc'"
|
||
|
|
[class.mat-sort-header-ascending]="this._sort.direction === 'asc'"
|
||
|
|
[class.mat-sort-header-recently-cleared-ascending]="_recentlyCleared() === 'asc'"
|
||
|
|
[class.mat-sort-header-recently-cleared-descending]="_recentlyCleared() === 'desc'"
|
||
|
|
[class.mat-sort-header-animations-disabled]="_animationModule === 'NoopAnimations'"
|
||
|
|
[attr.tabindex]="_isDisabled() ? null : 0"
|
||
|
|
[attr.role]="_isDisabled() ? null : 'button'">
|
||
|
|
|
||
|
|
<!--
|
||
|
|
TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large
|
||
|
|
number of screenshot diff failures. It should be removed eventually. Note that the difference
|
||
|
|
isn't visible with a shorter header, but once it breaks up into multiple lines, this element
|
||
|
|
causes it to be center-aligned, whereas removing it will keep the text to the left.
|
||
|
|
-->
|
||
|
|
<div class="mat-sort-header-content">
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Disable animations while a current animation is running -->
|
||
|
|
@if (_renderArrow()) {
|
||
|
|
<div class="mat-sort-header-arrow">
|
||
|
|
<svg viewBox="0 -960 960 960" focusable="false" aria-hidden="true">
|
||
|
|
<path d="M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|