[React.js] "Blocked aria-hidden on an element because its descendant retained focus." 오류 해결

React-Bootstrap 모달 안에서 react-switch-input의 Switch를 클릭할 때 "Blocked aria-hidden on an element because its descendant retained focus" 오류가 발생하였다(그림 2 참조).

[그림 1] Blocked aria-hidden on an element because its descendant retained focus." 오류

🔍 원인 분석

1. React-Bootstrap의 Modal은 aria-hidden="true"를 자동으로 설정
   • 모달이 열리면 배경 요소를 비활성화하기 위해 aria-hidden="true"를 설정함.
   • 하지만 react-switch-input의 Switch는 내부적으로 focus()를 사용할 가능성이 있음.
   • 이때, aria-hidden="true"가 설정된 요소 내에서 포커스를 가지는 컴포넌트가 있으면 오류 발생
2. Switch가 포커스를 요청하는 경우
   • Switch 컴포넌트는 클릭 시 내부적으로 포커스를 받거나, 키보드 이벤트를 트리거할 수 있음.
   • aria-hidden="true"가 설정된 상태에서 이런 동작이 발생하면 접근성 오류 발생.

---

✅ 해결 방법

1. React-Bootstrap의 enforceFocus={false} 설정

React-Bootstrap의 Modal 기본 동작은 모달 내부에 포커스를 강제 유지하는 것인데, 이를 끄면 해결될 수 있음.

import { Modal } from "react-bootstrap";

<Modal show={show} onHide={handleClose} enforceFocus={false}>
  <Modal.Header closeButton>
    <Modal.Title>설정</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <Switch />
  </Modal.Body>
</Modal>

✔ enforceFocus={false}를 설정하면 React-Bootstrap 모달이 포커스를 강제하지 않음
✔ Switch가 정상적으로 포커스를 받을 수 있음.
✔ 이 방법이 가장 간편한 해결 방법인데 추가로 아래 2가지 방법도 고려해 볼 수 있겠다.

---

2. autoFocus 속성을 비활성화 (autoFocus={false})

• Switch가 자동으로 포커스를 받지 않도록 설정하면 문제 해결 가능
• <Switch autoFocus={false} />

---

3. inert 속성 활용

만약 모달이 열릴 때 배경 요소를 완전히 비활성화하고 싶다면 aria-hidden 대신 inert 속성을 사용하면 됨.

<Modal show={show} onHide={handleClose}>
  <div inert={show ? "true" : "false"}>
    <Modal.Header closeButton>
      <Modal.Title>설정</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <Switch />
    </Modal.Body>
  </div>
</Modal>