How can I programmatically change focus with ref? Or at least change a tabIndex order?

[alexfrize]

Bugs and Questions

Checklist

• [x] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of Victory

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

This question is about accessibility.

Here is the code: https://codesandbox.io/s/angry-hermann-13md9

Currently when the user presses TAB multiple times here is what happens: focus changes to a border then to a button inside, then another border. And after all the borders and buttons it starting to set focus on bars inside the border.

How can I change the logic to change it to this: border->internal bar->button Or, even better: border->border-> border, but when the user press ENTER on any border, it should focus on the internal bar (element inside the border).

Reproduction

https://codesandbox.io/s/angry-hermann-13md9

In the example above refs I currently have: barRef_VictoryBar.current does not have a focus() method, and barRef_Bar.current is null (initial value)

[becca-bailey]

@alexfrize Thanks for calling out this issue! I have run into similar issues with refs, so perhaps we can work on some enhancements in order to better support refs and tabIndex props. At the moment, only the props that are documented for each victory component are getting passed through to the underlying svg component.

For now, you can work around this by using the custom component props on VictoryBar. For example:

<VictoryBar dataComponent={<Bar pathComponent={<path tabIndex={1} ref={ref} />} />} />

It also appears that the Bar component supports a tabIndex prop, but it may not handle refs correctly. https://formidable.com/open-source/victory/docs/victory-primitives#bar

[alexfrize]

Thank you!

[alexfrize]

VictoryBar renders the whole data set, so in this case, if I set ref to a Bar, only the last bar will be in focus. Is it possible to split the group and set focus to each of the bars programatically?

[becca-bailey]

There's not anything built into Victory to do this, but you can pass arbitrary properties into the data prop in any chart that can be accessed in a custom child component. I'll need to try this out, but perhaps you can pass a ref through that way?