How to maintain keyboard navigability of data points when voiceover is enabled?

[wesngu28]

When adding accessibilityLayer to a chart component, the points become navigable with the arrow keys, which is what is expected.

However, when I enable voiceover (macos), the axes seem to hijack the navigability and the points are no longer accessible via keyboard navigation.

As far as I can see this behavior is replicable by adding accessibilityLayer to the LineBarAreaComposedChart codesandbox and navigating first with voiceover off then on. The voiceover tool I'm using is the built in voiceover for MacOS.

I'm not sure if I'm missing something when trying to navigate with the voiceover on or if this is intended or not.

[kyleung1]

same issue

[ckifer]

@julianna-langston is the one who who implemented accessibilityLayer. Julianna, any ideas here?

[julianna-langston]

Sorry, I don't have access to a mac to test this. I can confirm that accessibilityLayer works as expected with Win10+NVDA, so this should just be a macOS+VoiceOver issue. I'll reach out to an accessibility expert friend of mine who knows more about macs, and see if he has any advice.

Reproduction steps:

1. Go to LineBarAreaComposedChart example
2. Add the text accessibilityLayer to line 71 (well, anywhere within the <ComposedChart component, but line 71 works)
3. Click "Run"
4. Use the keyboard to navigate to the chart. You will see a focus indicator (black box) around the chart.
5. When the chart is in focus, use the left/right arrow keys to navigate within the chart. The tooltip should appear, and a screen reader should read the content of the tooltip.

In the mean time, @wesngu28, can you elaborate on what you mean by "the axes seem to hijack the navigability"? Can you:

• Press the TAB key to get to the chart?
• When you get to the chart, does it show a focus indicator (box) around the chart?
• When you press the right arrow key, what happens? What does VoiceOver say?

[wesngu28]

That might have not been the best way to phrase it, but basically whenever I enable voiceover:

1. Tab key does get me to the chart.
2. The chart does gain focus, and the focused element is Page A on the x axis.
3. Navigating with the right error will then go through the x axis, reading the labels, then the y axis, then read the cnt labels (saying just image), then the border around the chart, and finally the legend. The actual data points with the tooltip never get highlighted.

When voiceover is off, tabbing to the chart will immediately focus the first data point, and the right arrow keys will only navigate between the data points.

I initially thought it was a Firefox issue but it also occurs in Chrome (both on macos)

[ckifer]

I have a Mac so I can try to reproduce at some point. Unsure when I'll be able to but will reply here when I do.

At first thought this seems something specific to SVGs? Does this happen with all SVG text?

[ckifer]

I can reproduce. I'm not really sure how we can do anything about it though. It announces the values when you hover through the chart, but the keyboard navigation is hijacked by voiceover and recharts never has a chance to take control...

The chart doesn't actually get keyboard focus, it gets "voiceover focus" which seems to be different (see little black box). There are no roles or aria-* attributes on those SVG text and tspan elements, they just exist...

[julianna-langston]

Well, I've got some good news and some bad news.

The good news is I can tell you how to make it work. While running VoiceOver, you need to turn QuickNav off (press the left and right arrow at the same time). If the user is running VoiceOver, turns off Quick Nav, focuses on the chart, and then press the left or right arrow keys, the tooltip will move as expected. VoiceOver will also read out the contents of the tooltip.

The bad news is that the user has to know to turn QuickNav off.

Technical background
In order to support keyboard navigation, Recharts adds a keydown event listener to the chart. If you're not running a screen reader, you can tab to the chart, and press left/right arrow keys to navigate. However, by default, screen readers don't pass keypresses to keydown event listeners. The screen readers need to be in special modes for keydown listeners to work.
For the windows-based screen readers JAWS and NVDA, this means that we need "Forms Mode" to be on. For VoiceOver, this means that we need "QuickNav" to be off. By adding the role="application" attribute to the chart container, JAWS and NVDA knows to automatically pop the user into Forms Mode. This allows for a seamless user experience for JAWS/NVDA users.
However, VoiceOver doesn't support the same behavior with role="application". I haven't been able to find anything online about an alternative that VoiceOver does support. It seems like only the user can decide to exit QuickNav.

The only answer I can give you right now is that you'll need to provide documentation to your users to the effect of:

If you're using VoiceOver on a Mac, you will need to turn QuickNav off in order to navigate our charts.

Please let me know if you have any other questions. I'll update this discussion if I learn anything new.

[wesngu28]

That helps a lot, thank you! Interesting to know about that interaction between screen readers and keydown event listeners.

[PavelVanecek]

@julianna-langston I took the liberty of copy pasting your reply to a wiki page where hopefully it will be more discoverable: https://github.com/recharts/recharts/wiki/Recharts-and-accessibility please feel free to update with new findings!

[akhillokam]

Does the accessibilityLayer prop work when the layout is vertical

[ckifer]

Not today no