First tab selects wrong element

[kvaternio-dev]

I tried the cypress-plugin-tab, I have some differences in order at manual testing, if I have divs in body, which have different tabindices, e.g. this one:

<html>
  <head>
  </head>
  <body>
    <div tabindex="10">1</div>
    <div tabindex="5">2</div>
    <div tabindex="3">3</div>
  </body>
</html>

When using the plugin, the first cy.get("body").tab() selects the div with "10" tabindex.
But at manual testing the "3" tabindex won.

Is it a bug of the plugin, or I did something wrong? How can I fix that?
It seems to me alphabetical order instead of numerical order.

[kuceb]

@kvaternio-dev yes, this is probably a bug with the plugin. I believe it only uses order of DOM nodes as tab order. However MDN warns against using any value greater than 0 as a tabindex, as you should follow the relative order of DOM nodes. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

[seanforyou23]

+1 to this issue. Even though it's not recommended practice, I'd hope plugins that test tab functionality handle the basic case of simply loading a page and pressing the tab key without further interaction.

We're building a framework of UI components, and even though we also don't recommend using positive values, we'd like to support the capability for advanced used cases. To verify that the positive tabindex values are respected, I was hoping to be able to write tests using this plugin that exercise pretty much exactly the code path that @kvaternio-dev mentioned in this issue.

Do you think we could consider addressing this at some point? Seems like it wouldn't be too bad, just build a map and sort by tabindex value, totally just speculating though :) Thanks!

[kuceb]

@seanforyou23 yes, I'll look into it

[seanforyou23]

I played with it a bit more, and you know, it actually seems to be working for me now. It may have been working before, but an ide error #19 was throwing me off.

[kuceb]

@seanforyou23 hmm...enough confusing me for the day 😄

[seanforyou23]

Sorry bout that! 😅Just wanted to share that I had found some success in case it helps