Angular material table - 排序方向未在屏幕上读取 reader

Question

我正在研究可访问性。我检查了 Angular 文档，它不是阅读排序方向。这是 link

我做了一些研究，发现我们必须执行以下操作才能更改它。这里是参考link。 排序按钮的 aria-label 可以在 MatSortHeaderIntl 中设置。

我正在尝试设置此值，但它因以下错误而失败。有人可以帮我解决这个错误。这是 sample code.

Type '"one"' is not assignable to type '(id: string, direction: SortDirection) => string'.
(property) MatSortHeaderIntl.sortDescriptionLabel: (id: string, direction: SortDirection) => string

Answer 1

如果你修改你的构造函数如下：

constructor( private matSortService:MatSortHeaderIntl) {
    this.sortedData = this.desserts.slice();
    this.matSortService.sortDescriptionLabel = (id: string, direction: SortDirection) => { 
        return `Sorted by ${id} ${direction == 'asc' ? 'ascending' : 'descending'}`; 
    }
}

这将添加一个 span，其中包含构造函数中定义的函数返回的文本。跨度有 class cdk-visually-hidden 所以它是 visible to screen readers.

请参阅 this StackBlitz 以获取演示。如果您按 Carbs 列排序，然后检查该列的 th，您应该看到以下内容：

<th _ngcontent-c24="" mat-sort-header="carbs" class="ng-tns-c25-3 mat-sort-header-sorted" ng-reflect-id="carbs">
    <div class="mat-sort-header-container">
    ...
    </div>
    <span class="cdk-visually-hidden ng-tns-c25-3 ng-star-inserted">&nbsp;Sorted by carbs ascending</span>
</th>

Angular material table - 排序方向未在屏幕上读取 reader

Angular material table - sort direction not reading in screen reader

angular-material

angular

mat-table