Угловая таблица материалов - направление сортировки не читается в программе чтения с экрана - PullRequest
Новая
       12

Угловая таблица материалов - направление сортировки не читается в программе чтения с экрана

0 голосов
/ 07 марта 2019

Я работаю над доступностью. Я проверил документацию Angular, и она не читает направление сортировки. Вот ссылка

Я провел некоторое исследование и обнаружил, что мы должны сделать ниже, чтобы изменить его. Вот ссылка ссылка . Метка арии для кнопки сортировки может быть установлена ​​в MatSortHeaderIntl.

Я пытаюсь установить это значение, но оно завершается с ошибкой ниже. Может кто-нибудь помочь мне с этой ошибкой. Вот пример кода . 

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

1 Ответ

1 голос
/ 08 марта 2019

Если вы измените ваш конструктор следующим образом: 

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>
...