RAC Table: column header text with tabindex should have role="button"
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
When a column is resizable and/or sortable, the documentation suggests to add a `tabIndex={-1}` to the span containing the column header text, so that it can be focused independently from the resize handle button. See https://react-spectrum.adobe.com/react-aria/Table.html#column-resizing.
> The example below illustrates how each of the column width props affects their respective column's resize behavior. Note that the column names are wrapped in a `` so that they can be focused with the keyboard in addition to the ``.
https://github.com/adobe/react-spectrum/blob/a7b1a28e0ed7b999c6cb40d7d49136ecaf2b3aed/packages/react-aria-components/docs/Table.mdx?plain=1#L946
When we add a `tabindex`, we should also add the interactive role, `role="button"`.
Contributor guide
Assessment
This issue has not been assessed yet.