tabindex is not respected

[humanchimp]

I've been trying to use the alpha-4 release of this component to replace ember-list in an Ember app I've been upgrading from Ember 1.11 (still). Unfortunately, I immediately ran into a problem with tabindex, which we were using to allow the user to navigate the list using focus. It seems that ember-collection is relying on translate to put items in the visually correct order, but tabindex=0 relies on the actual order of the elements in the document. I don't know if I'm observing a bug, or if it was implemented that way for performance reasons, but in my case, preserving the correct tab order is important.

[g-cassie]

@humanchimp I am getting around this in my app by observing the tab key and then setting focus on the correct element using javascript. It's a bit hacky but it works...

You will also notice this design characteristic when writing acceptances tests because the order of the list is not necessarily reflected by the order in which the elements appear in the dom.

[raytiley]

Relying on translate to put things in the correct place visually is indeed a performance optimization that allows for recycling DOM more efficiently. That said seeing as this can impact accessibility it would probably be prudent to have an easy escape hatch to force ember-collection to render the items in the same order they appear in the collection.

Given that the biggest benefit to ember-collection is not rendering items outside the viewport this shouldn't be too bad for performance. It could be opt in with a simple paramter to ember collection. Something like:

{{#ember-collection preserve-order=true as | item index | }}
 {{-- Display your things here --}}
{{/ember-colletion}}

@krisselden @lukemelia I could work on this unless you have objections.

[krisselden]

@raytiley there is an abstraction for diffing in ember I think we should leverage for updating cell order to data order

[raytiley]

@krisselden if we just reorder the cells to be in the same order as the items in the collection glimmer would just take care of it, c/d?