Screenreader fails to navigate occluded elements

[matthew-robertson]

I guess I should preface this with the fact that I only use a screenreader at work when testing accessibility, so I may just be missing a setting in OSX's VoiceOver.

I believe this is the issue originally mentioned in this prior issue, but is (I think) unrelated to tables. What appears to be happening is that as I navigate down, the window of unoccluded options is updated, but VoiceOver's focus remains on the Xth element rather than updating to that item's new index. This is seemingly confirmed by using VoiceOver to navigate to a specific element, scrolling past it, and then navigating to the next element. This explains why it seems to work, then skips, then gets stuck.

Notably, this demo from the docs doesn't seem to scroll incorrectly, and I have no idea why. The docs seem to be rather out of date, which may have something to do with it? That, or maybe something to do with how infinite scroll is managed.

Here's a gif of what's happening:

And here's the minimal ember template (t is just styled to have a max height and hide-overflow) that generated the above gif:

<ul role="listbox" class="t">
  <VerticalCollection @items={{this.countries}} @estimateHeight=41 @bufferSize=2 as |opt index|>
    <li>{{opt}}</li>
  </VerticalCollection>
</ul>

[amk221]

I think I'm experiencing this issue but not with a screen reader. I am using element.scrollIntoView() on the item as I navigate down using the keyboard arrow keys.

But, unlike when scrolling normally, no more occluded items reveal themselves.

Here's a failing test