adobe / adobe/react-spectrum

RAC Table: column header text with tabindex should have role="button"

Open
#8,502 3 comments 1 reaction 0 assignees View on GitHub
accessibility bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.