[paragon-openedx.netlify.app] Feedback (on /components/datatable/)

[adamstankiewicz]

Bugs

I believe there may be an a11y/usability bug surrounding sortable columns in the DataTable component regarding the title attribute value on sortable column headers. As is, every sortable column header has the same title attribute of "Toggle SortBy".

There are two primary issues with this:

1. title is the same value across all column headers.
2. title does not include any mention of the actual column header.

The current value of these title attributes on sortable column headers is coming from @tanstack/react-query's getSortByToggleProps called within TableHeaderCell.

It's not entirely clear whether we can deduce a user-friendly string version of the column header name (e.g., based on render('Header)), or whether DataTable can support custom title attribute values for each column for more granular control by consumers.

Tasks

Beta Give feedback

1. Ensure each sortable column header has a unique title attribute, including the column header text to be more descriptive than just "Toggle SortBy" across all sortable column headers.

[wittjeff]

Agree that "Toggle SortBy" doesn't add anything precisely meaningful here. There are some other issues to consider.
This is a clickable thing that doesn't take keyboard focus.
The state of the control isn't conveyed programmatically.
The title attribute is not always spoken by screen readers (it's omitted in some verbosity levels, but it is included in calculation of the Accessible Name for a control if there are no other methods available).
If the column header included a button, which when clicked changes the associated sorting state of the column, then including the name of the column in the title attribute might be redundant for some users, which could be tedious (this is the kind of thing that pushes users in the direction of the lower verbosity setting).
Depending on how you make the column header keyboard-interactive, you may or may not want the SVG to be "visible" (not aria-hidden) to screen readers (if "visible, it should have a text equivalent that doesn't depend on the title attribute).

My suggestions:

• Follow the sample from W3C: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/
• Add aria-sorted attribute to the <th> and change it when appropriate.
• Put a child button (Paragon IconButton?) in the <th>. Make sure it has a visible focus state styling, but this is a rare exception where having a completely invisible border on the button might be good.
• If you want to put a title attribute on the button or on the icon within the button, I suggest "Click to sort [resulting sort state.]" which would be informative but not essential info if omitted.

[wittjeff]

Latest progress on the underlying Tanstack table component is detailed here. An upstream fix would be ideal. :)