Selecting an option can cause VoiceOver to jump to top of page

Question

iOS9, Safari with VoiceOver enabled.

Not 100% reproducible but simply selecting an option will cause the VoiceOver focus to jump to the button at the top of the page.

Now can listen for the option being selected and then force focus on the element over a couple of seconds but that leads to undesired UX.

  :focus {
    background-color: pink;
  }

<div>
  <button tabindex="-1">close</button><br/><br/><br/><br/><br/><br/><br/><br/>
  <select>
    <option>Email</option>
    <option>Tobias</option>
    <option>Linus</option>
  </select>

</div>

<p>This example shows how to fill a dropdown list</p>

In production code (which uses AngularJS) explicitly setting focus after a 2 second timeout fixed the problem but that's not ideal! Thanks.

Answer 1

Maybe it may come in handy this css property:

.button {
 speak: spell-out;
}

Edit: this only works in firefox, see Mozilla docs