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

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

Создание Safari и Mac доступно:

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

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

Ответ 4

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

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

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 в System Prefs, lol.

Ответ 5

Обнаружена одна и та же проблема, и она была реализована программно. К счастью, этот плагин jquery tabbable 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();
    }
  });
});