Bug 175737 – AX: Scroll position jumps when reading non-interactive content with VoiceOver

• Status: NEW
• Component: Accessibility

[Alex Lande]

Created attachment 318550 [details]
HTML file to demonstrate issue

On iOS, VoiceOver causes the screen to jump to the top of the page when reading certain page content. This happens most often when reading non-interactive and non-heading elements like `<p>` tags. This occurs when
the content is inside of a container with `tabindex='-1'` and the page is
taller than the screen height of the device.

The bug occurs to a limited extent whenever the tabindex is present, but only
happens with certain elements near the bottom of the page. If the page includes a `height: 100%` style declaration on `html`, `body`, and the containing element, the bug occurs for all `<p>` tags that don't fit on the screen initially.

I've attached an HTML file to reproduce the bug, it's also available on JSBin: http://output.jsbin.com/viyibe


Steps to Reproduce:

1. Open the attached page on an iOS device and open VoiceOver.
2. Swipe right repeatedly to read through page content until you get past the content that fits on the screen initially.


Actual Results:

When VoiceOver reads `<p>` elements after the first few, the browser will visually jump to the top of the page.


Expected Results:

Each `<p>` element read by VoiceOver should be on screen when it is read, and the browser should not jump to the top of the page.


Additional Information:

To see the expected behavior, you can remove the `tabindex='-1'` from the containing `<div>`. To see a limited form of the bug which only applies on the last 1-2 `<p>` elements on the page, you can remove the line of CSS setting `height: 100%` on the containing elements (while leaving the `tabindex` in place).

[Radar WebKit Bug Importer]

<rdar://problem/33971415>