"Table sort state is not being announced by the screen reader, but visually an arrow icon is toggled based on the user interaction
4. Modified by"
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
HOW TO FIX:
Fix this issue by using ONE of the following techniques:
1. Use the aria-sort attribute values of ""ascending"" or ""descending"" or ""none"" on the column header to indicate the sort state of the data in a sortable column. This technique also requires that role=""columnheader"" be added to the <th> element.
<th role=""columnheader"" aria-sort=""descending"">
2. Add CSS clipped (visually hidden) text to the sorting element to indicate the sorted state.
<div tabindex=""0"" role=""button"" id=""date-sort"">
Date <span class=""sr-text"">sorted ascending</span>
WAI-ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-sort
States and properties are attributes used to convey essential information about an element to screen readers and other assistive technologies. Some roles require certain state and property information - such as the checked/unchecked state of a checkbox. Native HTML elements provide those required states and properties, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant states and properties using ARIA."