Safari игнорирует tabindex

Question

У меня есть 2 кнопки рядом с текстовым полем и еще одно текстовое поле после 2 кнопок. Индекс табуляции для первого текстового поля равен 1000, первая кнопка - 1001, а вторая кнопка - 1002. Второе текстовое поле имеет индекс табуляции 1003.

Когда я нажимаю tab, tabindex отлично работает во всех браузерах, кроме Safari, где он сразу же перемещается из первого текстового поля во второе текстовое поле, хотя tabindex был установлен правильно. Любые идеи о том, как предотвратить эту проблему?

Answer 1

По умолчанию доступ к вкладкам отключен в сафари (!). Чтобы включить его, установите флажок «Настройки> Дополнительно> Нажмите вкладку, чтобы выделить каждый элемент на странице».

Answer 2

Доступ к Safari и Mac:

Тестирование на Mac: Системные настройки -> Клавиатура -> Ярлыки (вкладка) -> Полный доступ с клавиатуры -> Все элементы управления

Чтобы таббирование работало в Safari: Настройки -> Дополнительно -> Нажмите вкладку, чтобы выделить каждый элемент на странице (отметьте это)

Answer 3

Если вы пишете свою собственную веб-страницу, я бы исправил что-то написать с небольшим количеством jquery / javascript. Это то, что я использовал на своем.

Недостатком является то, что вы предотвращаете поведение клавиши Tab по умолчанию на странице, что может быть большей проблемой для доступности в некоторых ситуациях. Но я сомневаюсь в этом.

var Tab = {};
Tab.i = 1,
Tab.items = 0;

function fixTabulation () {
    /* This can be used to auto-assign tab-indexes, or
    #  commented out if it manual tab-indexes have
    #  already been assigned.
    */
    $('input, select, textarea').each(function(){
        $(this).attr('tabindex', Tab.i);
        Tab.i++;
        Tab.items++;
    });

    Tab.i = 0;

    /* We need to listen for any forward or backward Tab
    #  key event tell the page where to focus next.
    */
    $(document).on({
        'keydown' : function(e) {
            if (navigator.appVersion.match("Safari")) {
                if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
                if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
            }
        }
    });

    /* We need to update Tab.i if someone clicks into
    #  a different part of the form.  This allows us
    #  to keep tabbing from the newly clicked input
    */
    $('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
        Tab.i = $(this).attr('tabindex');
        console.log(Tab.i);
    });
}

$(document).ready(function() {
    fixTabulation();
});

Это не идеальное решение, но это гораздо лучше, чем просить всех ваших пользователей изменить настройки Safari в системных настройках, смеется.

Answer 4

Я попробовал следующее с Safari 5.1.5. Я не знаю, как это работает со старыми версиями:

Когда «выделение каждого элемента на странице» (см. Ответ по изображению) отключено, вы можете использовать эту функцию, нажав Option (alt) + вкладка.

Если вы этого не сделаете (и опция отключена), Safari по умолчанию будет вкладывать все поля формы (такие как ввод, текстовое поле, выберите ...) Для этих полей он также принимает / рассматривает tabindex. Сначала он будет перемещаться по всем элементам формы с помощью tabindex (в порядке заданных индексов), а затем через остальные элементы формы в порядке их определения в HTML.

Таким образом, если вы определите tabindex = "1" (или 1001) и "3" (или 1003) для двух элементов ввода, Safari сначала сфокусирует эти поля, а затем остальные.

Answer 5

Решение для iOS будет содержать Option Key + Tab.

Answer 6

Обнаружена та же проблема, и пришлось осуществлять навигацию по вкладкам программно. К счастью, нашел этот плагин для вкладок jquery https://github.com/marklagendijk/jQuery.tabbable и нашел хорошее применение, вот

require('../../node_modules/jquery.tabbable/jquery.tabbable');
$(document).ready(() => {
  $(document).keydown((event) => {
    if (event.keyCode === 9) {
      window.$.tabNext();
      event.preventDefault();
    }
  });
});