Tables

[gcamacho079]

Description

Updates to make table sorting functionality keyboard and screen reader accessible

Related issues

Resolves DEV-214

[linear]

DEV-214 Update table in element selector modal for keyboard and screen reader accessibility

Requirements:

• Two visually-hidden live regions should be added: one for selection updates, and another for sorting updates
• The following changes should be made to the table element:
  • th cells should use the aria-sort attribute, set to either ascending, descending, or none
  • Table rows should not have tabindex="0". Instead, a new column titled "Select" should be added that contains checkboxes, labelled by the element title. For mouse users, a click event on the row should toggle the checkbox
  • Sorting should not be tied to a click on the th. Instead, a button should be nested inside the th
  • A visually-hidden caption element should be added inside the table
    • This caption should specify that columns with button elements are sortable, for example: "Asset selection, column headers with buttons are sortable"

I've created a mockup of the functionality here: https://codepen.io/lupecamacho/full/dyVBMZL