Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

All the row headers on List Component are called "Sort" #9541

Closed
jguilhermesl opened this issue Dec 22, 2023 · 1 comment · Fixed by #9605
Closed

All the row headers on List Component are called "Sort" #9541

jguilhermesl opened this issue Dec 22, 2023 · 1 comment · Fixed by #9605
Assignees
Labels

Comments

@jguilhermesl
Copy link

What you were expecting:
When interacting with table headings, the aria should correctly announce the specific title associated with each header, providing accurate information to users relying on assistive technologies.

What happened instead:
Currently, when navigating through table headers, the aria announces all headers as "Sort," leading to confusion for users with visual impairments or those depending on voice assistants.

Steps to reproduce:

  1. Turn on Voice Over or NVDA Speech
  2. Access the List Component
  3. Navigate to a table title
  • You can reproduce this in the demo available in react-admin documentation

Other information:

  • You can see in the photo the voice over text box pointing to the titles of that component. This must be resolved because people with visual impairments or who need a voice assistant will not be able to understand exactly what is happening visually.
Screenshot 2023-12-22 at 09 51 13

Environment

  • React-admin version: 4.15.4
  • React version: 17.0.2
  • Browser: Chrome
@fzaninotto
Copy link
Member

Thanks for the report. I confirm the bug.

This is due to

Which uses a single label for all column headers. We should provide a smarter label.

@fzaninotto fzaninotto added the bug label Jan 3, 2024
@fzaninotto fzaninotto self-assigned this Jan 23, 2024
fzaninotto added a commit that referenced this issue Jan 23, 2024
## Problem

In a `<Datagrid>`, the header of sortable columns has a tooltip that is the same for all columns: "Sort". It's not explicit enough, and it's even confusing for screen readers.

## Solution

Reuse the title logic from `<SortButton>`, which already solves this problem.

Closes #9541
fzaninotto added a commit that referenced this issue Jan 25, 2024
## Problem

In a `<Datagrid>`, the header of sortable columns has a tooltip that is the same for all columns: "Sort". It's not explicit enough, and it's even confusing for screen readers.

## Solution

Reuse the title logic from `<SortButton>`, which already solves this problem.

Closes #9541
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants