Tab form navigation doesn't work in DwollaPersonalVCR when using react-aria

[ketang]

Disclaimer: this appears to be a React Aria limitation (issue) not a problem with the react-drop-ins code. It might be fixable within react-drop-ins though, which could be worth investigating because this limitation may exist in other frameworks as well.

Update: I think this may actually be in the dwolla-web.js code not react-drop-ins.

I am using React Spectrum components, which include React Aria. Tab navigation across form fields does not work in the DwollaPersonalVCR form. You hit tab when you're in a particular form field, you stay in that form field. This appears to be because React Aria doesn't handle the shadow root.

When handling the Tab key, the React Aria handler attempts to walk the DOM to find the next node to set focus, starting with document.activeElement. That will return the custom element

<dwolla-personal-vcr firstname="..." lastname="..." email="..."></dwolla-personal-vcr>

Because document.activeElement ignores the shadow root. Since the actually focused form element is a descendant of a shadow root under <dwolla-personal-vcr>, the handler cannot see <dwolla-personal-vcr>'s children or the siblings of the actually focused form element. Thus it does not find a next node and the Tab key does nothing.

Ideally what would happen is that React Aria's handler looks inside the shadow root via something like document.activeElement.shadowRoot.activeElement, which does have the correct value of the focused form element. The linked issue for shadow root support in React Aria hasn't seen any progress, so maybe there's a way to avoid using the shadow root in the drop in?