角材料表-在屏幕阅读器中无法读取排序方向

Question

我正在研究可访问性。 我检查了Angular文档，它没有读取排序方向。 这是链接

我做了一些研究，发现我们必须做以下更改。 这是参考链接 。 可以在MatSortHeaderIntl中设置排序按钮的aria标签。

我正在尝试设置此值，但由于以下错误而失败。 有人可以帮我解决这个错误。 这是示例代码 。

---

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其中包含构造函数中定义的函数返回的文本。 跨度具有cdk-visually-hidden类别，因此屏幕阅读器可以看到 。

请查看此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>