0

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

我做了一些研究，发现我们必须在下面做才能改变它。这是参考链接。 排序按钮的 aria-label 可以在 MatSortHeaderIntl 中设置。

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

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

1 回答 1

2

如果您按如下方式修改构造函数：

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包含构造函数中定义的函数返回的文本。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>
于 2019-03-08T13:11:43.687 回答