paragon
paragon copied to clipboard
[paragon-openedx.netlify.app] Feedback (on /components/datatable/)
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:
-
title
is the same value across all column headers. -
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
- [ ] 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.
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.
Latest progress on the underlying Tanstack table component is detailed here. An upstream fix would be ideal. :)