tabindex를 무시하는 Safari

tabindex를 무시하는 Safari

---

텍스트 상자 옆에 2 개의 버튼이 있고 2 개의 버튼 뒤에 다른 텍스트 상자가 있습니다. 첫 번째 텍스트 상자의 tabindex는 1000, 첫 번째 버튼은 1001, 두 번째 버튼은 1002입니다. 두 번째 텍스트 상자의 tabindex는 1003입니다.

탭을 누르면 Safari를 제외한 모든 브라우저에서 tabindex가 제대로 작동하며, tabindex가 제대로 설정 되었더라도 첫 번째 텍스트 상자에서 두 번째 텍스트 상자로 즉시 이동합니다. 이 문제를 방지하는 방법에 대한 아이디어가 있습니까?

---

기본적으로 탭 액세스는 safari (!)에서 비활성화되어 있습니다. 활성화하려면 "기본 설정> 고급> 탭을 눌러 페이지의 각 항목을 강조 표시"를 선택하십시오.

---

Safari 및 Mac에 액세스하기 :

Mac에서 테스트 : 시스템 환경 설정-> 키보드-> ShortCuts (탭)-> 전체 키보드 액세스-> 모든 컨트롤

Safari에서 Tabbing이 작동하려면 : 환경 설정-> 고급-> 탭을 눌러 페이지의 각 항목을 강조 표시합니다 (확인).

---

Safari 5.1.5에서 다음을 시도했습니다. 이전 버전에서 어떻게 작동하는지 모르겠습니다.

"페이지의 각 항목 강조 표시"(graphicdivine의 답변 참조)가 비활성화 된 경우 Option (alt) + 탭을 눌러 해당 기능을 사용할 수 있습니다.

그렇지 않은 경우 (및 옵션이 비활성화 됨) Safari는 기본적으로 모든 양식 필드 (예 : 입력, 텍스트 영역, 선택 ...)를 탭합니다. 이 필드의 경우 tabindex도 허용 / 관련합니다. 먼저 tabindex가있는 모든 양식 요소 (주어진 색인 순서대로)를 탭한 다음 HTML에서 정의 된 순서대로 나머지 양식 요소를 탭합니다.

따라서 두 개의 입력 요소에 대해 tabindex = "1"(또는 1001) 및 "3"(또는 1003)을 정의하면 Safari는 먼저이 필드에 초점을 맞춘 다음 다른 필드에 초점을 맞 춥니 다.

---

자신의 웹 페이지를 작성하는 경우 약간의 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 설정을 변경하라고 말하는 것보다 훨씬 낫습니다.

---

iOS 용 솔루션은 Option 키 + Tab 키를 누르고 있습니다.

---

Encountered the same issue and had to implement tab navigation programatically. Luckily found this jquery tabbable plugin https://github.com/marklagendijk/jQuery.tabbable and put it to good use, here's

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

ReferenceURL : https://stackoverflow.com/questions/1848390/safari-ignoring-tabindex