Skip to content

@nivo/line pointArialLabel is not read by screen readers #2802

@LisaRyrholm

Description

@LisaRyrholm

Describe/explain the bug
In order to make the graph accessible for everyone with screen reader when having a line graph. I have added isfocusable and want to use pointAriaLabel in order to know (hear) what point I have tabbed to. But when I tab to the different points nothing is read.

When inspecting the code I see that the point has an aria-label. But when I tab around another element has the focus and therefore nothing is read.

I expect that the thing that gets the focus also is the one having the aria label in order to be able to use a screen reader.

To Reproduce
Sandbox:
https://codesandbox.io/p/devbox/nivo-line-bar-axes-lines-forked-2xl4n5?workspaceId=ws_8uJYLHW27Q3hBrf4Y8b5Ya

Steps to reproduce the behavior:

  1. Use a screen reader like "NVDA" (I prefer also to open the NVDA Speech Viewer, in order to be able to read/log whats happening, and then turn of the sound).
  2. Go to the sandbox above.
  3. Use Tab-button to tab between the points in the graph.

Current behavior
Nothing happens

Expected behavior
NVDA is reading the aria-label for the point

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: chrome
  • Version: Version 141.0.7390.108 (Official Build) (64-bit)

Additional context
I have not tried other devices/browser but I don't think this is a browser/device specific issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions