Allow Option to Pass Array of Elements to Maintain Components

[yuschick]

From what I am reading in the docs, the Maintain components only allow passing a DOM reference as the context. However, passing an array of elements into tabSequence would be helpful.

Example: I am using the library in a React project. Whenever, I pass my DOM context into query.focusable I am returned an array of the all the elements I would expect to receive (in this case, 29). However, whenever I pass that same DOM reference into maintain.tabSequence (or firstTabble even), I am returned only three text fields. Radio buttons, buttons, and other input types (tel, email) are excluded.

I am not sure where the disconnect is yet exactly but being able to pass in the array from query.focusable would alleviate this.

Note: I am working also with TypeScript so I am importing all the ESM modules.

If this is an unnecessary request due to my own usage mistakes, any references would be greatly appreciated to help get this implemented correctly.

Thank you!

[rodneyrehm]

I'm not surprised query.tabsequence() returns less elements than query.focusable. Have a look at What does "focusable" mean? for differentiation of "focusable" and "tabbable".

Radio buttons, buttons, and other input types (tel, email) are excluded.

That sounds rather strange. what's is.tabbable() saying about these elements?

[yuschick]

Thank you. I will read further on what focusable means.

I have attached a screenshot of my console log testing. I've redacted some pieces of information.

The first Array(39) is the result of query/focusable The second Array(3) is the result of query/tabbable on the same context

The following logs are iterating over the focusable array, printing the element and then printing the boolean result from is/tabbable.

The only three fields that are tabbable are the three text input fields.

edit: Without including ally.js, I am able to tab through all of the elements in that list. It's only when using these methods from the library do I encounter this behaviour.

[rodneyrehm]

All elements that have tabindex="-1" are not keyboard focusable. If they receive focus via Tab you are probably running some script. Browsers don't do this.

Which browser is that? Are you using ShadowDOM?

[yuschick]

I am running in Chrome. And this is all running in React, the dialog that opens is a dynamic component so to my knowledge it is from the shadowDOM as it's not a static element on the site.

Thank you for clearing up the tab index. I seem to always get -1 and 0 mixed up. Let me see if that clears some of the behaviour up on its own.

edit: EVen after updating the close-icon button to a tabindex of 0 and even removed the tabindex, that element is still not included in the tabbable array. So maybe this relates more to React and the ShadowDOM?

[yuschick]

I haven't had any luck yet with the ShadpwDOM methods. But at this point, this issue has far exceeded the scope of an issue and is in full troubleshooting mode. I will go ahead and close this and continue tinkering.

Thank you for the help!