Include tabindex="-1" in all components

[brunomonteirosud]

Hi there!

I noticed that the <Tour /> component has a tabindex="-1" attribute, but not the buttons and other control components. The issue this is creating for me is: if I updated the state in a parent component and that causes a re-render in the child component, then the tabindex behavior in the child component get messed up.

I created a reproducible scenario here and I even opened a StackOverflow question about it, before realizing what the issue was.

Right now, my solution was to include this piece of code when the Tour opens:

setTimeout(() => {
    const elements = document.querySelectorAll("div[data-focus-lock-disabled] button");
    elements.forEach(el => el.tabIndex = "-1")
}, 100);

But it would be nice if the Tour components already had tabindex="-1" as default.

I am happy to go over the code and open a Pull Request for that, if necessary.

Thank you and congrats on the amazing library!

[elrumordelaluz]

Hi @brunomonteirosud, thanks for open the Issue.

Seems to be an issue with focuslock which is used to retain focus inside the Helper Component. Related #165

A possible solution is to have a flag to disable focuslock. Let me investigate and feel absolutely free to open a PR.

[bellsml]

@elrumordelaluz

A possible solution is to have a flag to disable focuslock. Let me investigate and feel absolutely free to open a PR.

#234