React-Bootstrap 모달 접근성 경고 from React-A11y

Question

React-A11y는 'Modified'에서 'tabIndex'및 'role'에 대해 소리를 지른다. 내 모달은 다음과 같습니다

<Modal 
     aria-label="..." 
     tabIndex={-1} 
     role="Dialog" 
     show={this.state.showInfo} 
     onHide={this.closeInfo.bind(this)} > 
     <Modal.Header tabIndex={9} role="Dialog" closeButton> 
      <Modal.Title tabIndex={-1} role="Dialog">...</Modal.Title> 
     </Modal.Header> 
     <Modal.Body tabIndex={-1} role="Dialog"> 
      ... 
     </Modal.Body> 
    </Modal> 

위에서 볼 수 있듯이, 나는 모든 요소에 대해 tabIndex과 역할을 수행하지만, 내가 발견 플러그인 반응 체크 아웃 할 때 A11y가 모달의 자식 소리지르는 것을 그 I 액세스 할 수 없습니다

나는 반작용-액세스 모달처럼 다른 수정 조동사를 사용할 수 없습니다입니다. 그래서이 경고를 없애기 위해 나에게 갈 방법이 있습니까? 감사합니다

Answer 1

최고 유용한 정보입니다. 즉각적인 자녀 div은 role="document"이어야하고 tabIndex이어야합니다. 실제로 루트 요소 (대화 상자)에만 tabIndex="-1"이 있어야합니다. 다른 모든 역할은 제거해야합니다.

Tabindex는 탭 순서에 영향을줍니다. 0으로 설정하면 해당 요소는 탭 이동을 통해 포커스를받을 수 있습니다. 가능하다면 나는 이것을 피할 것이다. 브라우저는 대화 형 요소에 중점을 둘 수 있습니다. 앵커 등에서 포커스를받을 요소를 배치하는 것을 고려하십시오.

Tabindex는 긍정적으로 아니오입니다. 완전히 탭 순서를 망칠.

tabIndex를 -1 실제로 괜찮지 만, 그 요소가있는 경우에만 JS

[Element].focus(); 

그래서 대화 프로그래밍 받아야 초점을 통해 프로그래밍 포커스를받을 그냥 휴식을위한 자연의 탭 순서를 허용 할 수 있습니다.

참고 : 사용자가 모달을 닫을 때까지 모달에 초점을 잡습니다. 그런 다음 모달 트리거 (앵커 또는 단추, 나는 앵커 선호)로 포커스를 되돌립니다.