Установите фокус на тег span, используя .focus()

Целью здесь является сосредоточиться на результатах запроса после поиска. Это потому, что мы хотим, чтобы наш веб-сайт был доступен, и результат был прочитан читателем экрана.Установите фокус на тег span, используя .focus()

Результат имеет следующую структуру:

<div class="result-container"> 
    <p> 
     <span class="selected-solution" tabindex="-1" aria-live="polite"> 
      Text to be read 
     </span> 
     <button type="button" title="Delete selected solution"> 
      <span class="icon icon-close" aria-hidden="true"></span> 
      <span class="sr-only">Delete selected solution</span> 
     </button> 
    </p> 
</div>

Я хочу, чтобы установить фокус на пролете с классом «выбранным раствором», используя Jquery. Поскольку «результат-контейнер» может содержать другие типы результатов (в случае каких-либо результатов, или внутренняя ошибка), я использую общее решение:

$selector.find(':focusable').first().focus();

Но это решение не может сфокусироваться на моем предыдущем пролете ... Если я заменю свой диапазон на div, он отлично работает, но здесь это нехорошее решение (оно помещает кнопку на следующей строке).

Если я попробую эту команду при запуске веб-сайта на локальном, я выбираю свой диапазон.

У вас есть какие-либо идеи, почему сфера не может быть сфокусирована?

Благодарим за помощь!

Edit:

После дальнейшего тестирования, кажется, что код Jquery работает с размахом НО, что тест жасмина связан проваливается с критериями .toBeFocused() при использовании службы.

Все еще странно, но еще одна вещь для изучения.

источник

2017-02-09 Acedrin

У меня была такая же проблема (это также связано с необходимостью поддержки доступности и установки фокуса на диапазон, для чтения с экрана). Мое исправление было tabindex = 0. Текст для чтения Это позволило фокус для меня. Тем не менее, я довольно новичок в поддержке доступности, так будет ли tabindex = 0 вмешиваться в Accessibility? –

Это не будет беспорядок с порядком этого элемента. Но он становится сосредоточенным. Так что пользователь, проходящий через вашу страницу с клавиатурой, наткнется на него, может быть проблемой, если вы этого не хотите. В моем случае проблема была только с моим тестом на жасмин, код работал нормально на странице. Может быть, вы можете забыть тест за это время и использовать tabindex = -1? – Acedrin

jQueryUI селектор, (не jQuery) - обязательно включите jQueryUI.

источник

2017-02-09 18:10:07

jQueryUI включен. Примечательно, что: focusable работает, когда мы используем div. Наша проблема заключается в использовании диапазона. : / – Acedrin

Установите фокус на тег span, используя .focus()

ответ

Смежные вопросы