CODEWITHSUNDEEP
angularangular-materialmat-table
alok_dida
alok_dida

Reputation: 1733

Angular material table - sort direction not reading in screen reader

I am working on the accessibility. I checked the Angular documentation and it's not reading sort direction. Here is the link

I did some research and found out that we have to do below to change it. Here is the reference link. The aria-label for the sort button can be set in MatSortHeaderIntl.

I am trying to set this value but it's failing with below error. Can someone help me with this error. Here is the sample code.

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

Upvotes: 0

Views: 1877

Answers (1)

Ian A
Ian A

Reputation: 6128

If you modify your constructor as follows:

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

This will add a span containing the text returned by the function defined in the constructor. The span has the class cdk-visually-hidden so it is visible to screen readers.

Please see this StackBlitz for a demo. If you sort by the Carbs column and then inspect the th for that column you should see the following:

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

Upvotes: 2

Related Questions