Filter Results/Search using a query : Inaccessible by keyboard and no conforming alternative.

Issue Summary

The element is not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page.

Elements:

• Key
• Label

Location:
Present in the table section

Steps to Reproduce

1. Open the homepage
2. Navigate to the "Assets" link and activate it
3. Navigate to "Search for object" and activate it
4. navigate to the input field and search for the objects
5. Search a query "ORDER BY "KEY" ASC"
6. Navigate to mentioned interactive elements and observe that sort functionality is inaccessible.

Actual Results

The table headers such as “Key” and “Label” are used to sort the table in ascending and descending order but have not been marked up as buttons and they do not communicate when the column is sorted. Also, a keyboard support is missing for these interactive elements.

Expected Results

The table headers such as “Key” and “Label” should be accessible via keyboard keys and the state of sort order should be conveyed by a screen reader.

1. Code mentioned instances using native <button> element or alternatively use role="button" and tabindex="0" within <th> element.
2.  When the sortable table headers such as “Key” and “Label”  receive keyboard focus, they should be announced as buttons to screen reader users.
3. When the button is activated to sort the column, add aria-sort to the <th>. 
4. When screen reader users navigate through the table columns in “Read“ mode, the current sort order should be announced to them.
5. On activating the sort button, the value of “aria-sort” should be updated programmatically with the focus staying on the sort button itself.

For more information on implementation, please refer to 2nd example in the link- https://w3c.github.io/aria-practices/examples/grid/dataGrids.html

Screenshot

Workaround

Not Available

Bug Ref: 746811

Bulldog Ref: