크롬에서 작동하지 않는 Tabindex (React 앱)

Question

나는 react와 react-modal을 사용하여 웹 사이트에서 오버레이를 만듭니다. 이 오버레이는 다양한 요소와 양식 (아래 개요)을 포함합니다. 나는 Tab 키를 사용하여 양식을 통해 사용자를 안내 할 수 있기를 원합니다. 외양 순으로 tabbable이되도록 필요한 요소에 tabindex=0을 할당했습니다.

내 문제는 : Firefox에서 작동하는 동안 Chrome (버전 61.0.3163.100)에서 작동하지 않습니다. DOM 트리 위로 어떤 요소가 보이지 않거나 높이/너비가 0이면이 문제가 발생한다고 읽었습니다. 수정하기 위해 스타일을 변경했지만 효과가 없습니다.

<div class="ReactModalPortal"> 
<div data-reactroot="" class="ReactModal__Overlay" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;"> 
    <div class="ReactModal__Content" tabindex="-1" aria-label="Questionnaire" style="position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; background: transparent none repeat scroll 0% 0%; overflow: auto;"> 
     <!-- Some other stuff and nested elements --> 
     <div id="..."> 
      <form> 
       <input tabindex="0"> 
       <button tabindex="0"> 
      </form> 
     </div> 
    </div> 
</div>  

상위 요소 중 하나를 볼 수있는 바와 같이 tabindex="-1"있다. Chrome에서 inspect 함수를 통해 또는 JS와 프로그래밍 방식으로 변경하는 경우에도 문제가 계속 발생합니다 (또는 요소가 처음에이 색인으로 렌더링 된 경우 차이가 발생합니까?).

업데이트

나는 뭔가 다른 문제를 일으키는 것을 깨달았다. 내 모달의 루트 노드에있는 CSS 속성 initial: all을 사용하여 외부의 모든 것으로부터 내부 CSS를 보호했습니다. 어떤 이유로 이것이 tabindex가 작동하지 못하게합니다. 이해를 도울 수 있다면 나는이 현상금에 보상 할 것이다. 내 해결 방법은 all: initial을 사용하지 않고 있습니다 (IE와 호환되지는 않지만 실제로 잘 알고있는 대안이 없습니다).

Answer 1

all: initial은 초기 속성을 가진 노드의 모든 CSS 속성을 재설정합니다.

display 속성의 경우 초기 값은 inline이됩니다.

따라서 all: initial을 루트 div로 설정하면 display 속성이 인라인으로 설정됩니다. inline 요소는 높이 또는 너비가 없으므로 0x0입니다.

div에는 고정 된 절대 위치 요소 만 있기 때문입니다.

React Modal은 모달 내부의 모든 요소를 ​​통해 루프를 실행하여 요소가 포커스를받을 수 있는지 확인합니다. 그러나 요소에 초점을 맞출 수 있으려면 표시해야합니다. 각 요소에 대해 body 요소가 반복 될 때까지 반복해야합니다.

다음은 요소가 표시되는지 여부를 확인하는 함수입니다.

function hidden(el) { 
    return (
    (el.offsetWidth <= 0 && el.offsetHeight <= 0) || el.style.display === "none" 
); 
} 

당신이 볼 수 있듯이, 우리 사업부는 더 offsetHeight 또는 offsetWidth이 없을 것 숨겨진 것으로 간주 될 것이다. 따라서 모달은 집중 될 수 없습니다.