Question

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

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

我正在尝试设置此值，但由于以下错误而失败。有人可以帮我解决这个错误。这是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，其中包含构造函数中定义的函数返回的文本。跨度为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>

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

1 个答案: