33

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.

PJL
  • 18,735
  • 17
  • 71
  • 68
  • Complete guess here, very unlikely to help, but have you tried using `` being the default action if no submit button is specified, could be something similar happening here? – James Aug 26 '16 at 15:07
  • Are you making use of Angulars built in $anchorScroll directive? – init fail Aug 26 '16 at 15:10
  • A similar question has been asked on another forum. When VoiceOver focused on an iFrame the page was scrolled to the top. Although the situation is not exactly the same, the bug for the guy on the other forum was browser specific, what could mean the bug might be in Safari instead of VoiceOver. https://discussions.apple.com/thread/7537410?start=0&tstart=0 – Joost Verbraeken Aug 29 '16 at 15:18
  • @initfail Thanks, useful to know about $anchorScroll but it made no difference. – PJL Aug 31 '16 at 07:37
  • 2
    Many screen readers announce `
    ` as "blank", so your AT users will get "blank blank blank blank blank blank blank blank". There is no good reason to use more than one `
    ` tag in a row. If you need a gap, use CSS (consider margins, padding). Also, use `
    ` unless you absolutely want the blank line announced.     – brennanyoung Oct 14 '19 at 13:48
  • 1
    Any page repaint of focusable elements throws the focus up the page like a hot potato. Is it wrapped in a `
    ` tag?
     – Michel Hébert Oct 08 '21 at 00:51
  • Is the issue reproducible in Safari without VoiceOver? – Andy Nov 12 '21 at 08:47
  • 1
    Any news here? Can you reproduce the issue with the code sample you provided here? Or might it be Angular-related? – Andy Dec 26 '21 at 11:18

1 Answers1

1

Maybe it may come in handy this css property:

.button {
 speak: spell-out;
}

Edit: this only works in firefox, see Mozilla docs

Sarout
  • 821
  • 4
  • 25
slava_slava
  • 636
  • 1
  • 10
  • 23
  • 1
    I don't think this CSS property is supported by Safari, or indeed any major browser. Also this 'answer' is not relevant to the question. – brennanyoung Oct 14 '19 at 13:49