patternfly-react Bug - Table - several variants don't allow customizing aria labeling

[Edited by @thatblindgeye 11/7/2025]

This issue should involve fixing the following (we should try to prioritize the first 2 items, as they are affecting the new Compass demos):

[ ] The action buttons in the ActionsColumn should allow customizing the aria-label and aria-labelledby on MenuToggle, rather than hardcoding them as "Kebab toggle"
[ ] For selectable with checkbox/radio, we need to allow customizing the aria-label and aria-labelledby for the inputs, and also update the default values to be index + 1 (currently the first row will read "Select row 0", which makes sense from an index persepective but from a user perspective it should probably be "Select row 1")
[ ] The Table sort functionality should allow passing some SR text to help identify what order the column is sorted.
- If we have any implementations where a sort button is standalone without any text, we should allow passing an aria-label and aria-labelledby to those as well
[ ] The Favorite button in FavoritesCell should allow customizing the aria-label and aria-labelledby (props are being spread in this file, but would need to check if how it's actually used with decorators if it's possible to override the default hardcoded values and pass in aria-labelledby)
[ ] DraggableCell default value should omit the word "button" in its default aria-label at the very least. Ideally we either wouldn't have a default value or the default would be able to be more unique as its used (right now every row will default to the same exact label which isn't good)
- We should also check if it's actually possible to override the default labels, and add the ability to use aria-labelledby

After these are completed, we want to open followup issues/PRs in Org to update any new Compass demos using a Table with any of the above functionality

[Original ticket below]

Describe the problem It's not possible to add aria-label in Table sorts, so I can't use semantic syntax. If I'm a user who needs a screen reader to sort some data by name, for example, I just listen "name button" and not something with a better description.

Expected behavior If I'm a user who needs a screen reader, when clicking in a button I should listen to a descriptive message about the functionality of the button, for accessibility purpose. So, when I have data inside a Table and I want to sort that data, I need to listen to a clear message.

Is this issue blocking you? No

What is your environment?

RHEL 8.6
Browser Chrome

What is your product and what release date are you targeting? consoledot

Apr 17 '23 18:04 andressadotpy

Hey @andressadotpy, thanks for bringing this to our attention! Looking into this a bit, I'm not entirely sure if adding an aria-label to the sortable button (or somewhere inside the button) would be the best route. Ideally, either the table's aria-label or caption element would convey that the table can be sorted (similar to how our sortable and wrapping headers example uses an aria-label of "Sortable table", or W3C's sortable table example that uses hidden text in the caption element).

One thing we could do is similar to an example from MDN's aria-sort docs, and apply an aria-pressed attribute to the sortable button; that would convey when a header is clicked so that a user knows something triggered/updated (Deque's sortable table example does something a bit different and dynamically updates the table caption).

If the concern has more to do with how the sortable buttons are announced when traversing a rotor menu (where the button is announced a bit out of context of the table), rather than applying an aria-label, an alternative could be rendering some visually hidden text that can be customized. One issue I'd be concerned about is it adding repetitive and verbose text that has to be announced by assistive tech.

What do you think of all of the above?

Aug 29 '23 14:08 thatblindgeye

@andressadotpy just wanted to check in to see if you had seen the comment above

Sep 07 '23 19:09 thatblindgeye

After working on another Table issue, one note to make since the logic is included with the sortable logic is that currently a favoritable Th cannot currently have a custom aria-label applied. Currently it is just hardcoded as "Sort favorites" (which the default should at least be updated to omit the word "sort").

Logic can be found in our sortable table decorator.

Some other Table a11y issues that we can update in addition to what this issue states:

The aria-label for each individual row's "favorite" cell in our favoritable example could be improved (currently each row's "favorite" button has a label of "starred" or "unstarred", could provide more context)
Similar to above, the drag/drop buttons for each row in our draggable row example could possibly use an improved label

Mar 11 '24 15:03 thatblindgeye