Is it possible to force Ios browser focus from input to another element?

Question

Hay, I have certain problem with voiceover in Ios6 when voiceover is turn on. This is the scenario: when I click on link, say search, I give to div aria-hidden = false, and I trigger focus on an input element inside. And then I click another link and it trigger focus on the previous search link. but now - the focus runs away to Url.

After a lot of testing I sure the problem is that the focus is on the input element. I don't know if it possible at all to give focus to another element after input is focused. but this is the customer requirement. More important thing- it is worked in IOS 5.

I have fiddle example here : " https://jsfiddle.net/37a6mqtu/6/ ".

 var $searchbar = $("#search-bar"); var $button = $("#btn-search-opener"); var $closebutton =$("#closebutton"); // handle click and add css $button.on("click", function(){ $searchbar.attr("aria-hidden","false"); setTimeout(function () { $searchbar.find('[name="q"]').focus().css("background-color","green"); }, 500); }); $closebutton.on("click", function(){ $button.focus().css("background-color","red"); }); 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #search-bar { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button,#btn-search-opener { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #search-bar.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #search-bar.alt button { background: #fff; color: #000; } #search-bar input:focus { background-color:green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#search-bar" id="btn-search-opener" class="btn-search-opener" aria-controls="search-bar" aria-label="search icon" aria-expanded="true"> <span class="sr-only" data-font-size="16" data-font-size-type="px" data-line-height="24px">search</span> </a> <div id="search-bar" class="search-bar" aria-hidden="true" > <div class="container" data-font-size="16" data-font-size-type="px" data-line-height="24px"> <form role="search"> <a href="#" id=closebutton>X</a> <div class="hold" data-font-size="16" data-font-size-type="px" data-line-height="24px"> <label class="sr-only" for="lbl-01" data-font-size="16" data-font-size-type="px" data-line-height="24px">search</label> <input class="form-control" type="search" name="q" id="lbl-01" placeholder="search"> <input class="btn btn-search" type="submit" value="Search"> </div> </form><!-- / search-form --> </div><!-- / container --> </div> 

What I expect is the focus will stay on the search link.

thank for help!

Answer 1

If I understand the problem correctly, clicking on the "search" link, successfully moves the focus to the search <input>. Then when you click on the X-close, you try to put the focus back on the original "search" link but instead the focus is moving to the address bar?

This problem sounds familiar. I think it's a bug in VoiceOver that was discussed either here on stackoverflow or in another online forum about accessibility but I can't find a reference to it.

Note that you mention iOS5 and iOS6 in your question but the current version is iOS12. Was the "5" and "6" a typo?

Also, I know your example was just for illustrating your problem but just in case you are actually using this pattern for other coding, I have a couple accessibility comments:

• The first link has an aria-label ("search icon") but there is already visible text inside the link ("search") so an aria-label is not necessary. An aria-label will override any text that's contained in the element.
• The X-close link does not have an aria-label but it needs one. Currently, a screen reader will just say "X link". You should use <a href="#" id=closebutton aria-label='close'>X</a> (although that might fail WCAG 2.5.3 )