Можно ли принудительно настроить фокус браузера Ios с ввода на другой элемент? - PullRequest
Новая
       18

Можно ли принудительно настроить фокус браузера Ios с ввода на другой элемент?

0 голосов
/ 24 марта 2019

Слушай, у меня есть определенные проблемы с наложением голоса в Ios6, когда наложение голоса включено. Это сценарий: когда я нажимаю на ссылку, скажем, поиск, я даю div aria-hidden = false, и я переключаю фокус на элемент ввода внутри. А затем я нажимаю другую ссылку, и она вызывает фокус на предыдущей поисковой ссылке. но теперь - фокус убегает к URL.

После многих испытаний я уверен, что проблема заключается в том, что основное внимание уделяется элементу ввода. Я не знаю, возможно ли вообще уделить внимание другому элементу после того, как сфокусирован ввод. но это требование клиента. Более важная вещь - это работает в IOS 5.

У меня есть пример скрипки здесь : «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>

Я ожидаю, что фокус останется на поисковой ссылке.

спасибо за помощь!

1 Ответ

0 голосов
/ 25 марта 2019

Если я правильно понимаю проблему, нажав на ссылку «поиск», успешно переместим фокус на поиск . Затем, когда вы нажимаете X-close, вы пытаетесь вернуть фокус на исходную ссылку «поиск», но вместо этого фокус перемещается на адресную строку?

Эта проблема звучит знакомо. Я думаю, что это ошибка в VoiceOver, которая обсуждалась здесь, на stackoverflow или на другом онлайн-форуме о доступности, но я не могу найти ссылку на нее.

Обратите внимание, что вы упоминаете iOS5 и iOS6 в своем вопросе, но текущей версией является iOS12. Были ли "5" и "6" опечаткой?

Кроме того, я знаю, что ваш пример был только для иллюстрации вашей проблемы, но на тот случай, если вы на самом деле используете этот шаблон для другого кодирования, у меня есть пара замечаний по доступности:

  • Первая ссылка имеет aria-label ("значок поиска"), но внутри ссылки уже есть видимый текст ("поиск"), поэтому aria-label не требуется. aria-label переопределит любой текст, содержащийся в элементе.
  • Ссылка X-close не имеет aria-label, но она нужна. В настоящее время программа чтения с экрана просто скажет «X link». Вы должны использовать <a href="#" id=closebutton aria-label='close'>X</a> (хотя это может дать сбой WCAG 2.5.3 )
...