Blocked aria-hidden on a <button> element 포커싱 에러 해결 (007화 - S급 프론트엔드 개발자로 회귀하다)

오늘은 나름? 까다로웠던 포커싱 동작과 관련된 에러 해결 내용이다.

 

리액트에서 사용할 간단한 Dialog 컴포넌트를 만들고, 자동으로 몇초 뒤 종료되도록 구현을 하였는데, Dialog가 보여지고 닫히는 순간 아래 에러가 발생하였다.

---

Blocked aria-hidden on a <button> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden

---

에러 내용은 대략적으로, Dialog를 나타나게 만들때 사용된 버튼 내에서 Dialog가 사라진 이후에, 포커싱을 해야하는 Dialog가 사라져서 안보이는 상태이니, 포커싱을 할 수 없다. 라는 의미인 듯 하다.

 

ChatGPT 및 이런저런 자료탐색을 하다가, 해결 방법으로 Dialog 컴포넌트에 disableAutoFocus 옵션을 true로 주어 해결하였다.

 

disableAutoFocus 옵션을 true로 주면, 애초에 Dialog가 열려있던, 닫혀있던 상태에 상관없이 그냥 자동포커싱을 하지않고 무시하겠다. 라는 뜻이 되므로, 에러가 발생할 원천적인 문제를 막아서 해결한 것이다.

 

문제가 발생한 이유를 조금 더 풀어서 정확하게 관찰해보면,

 

[버튼 클릭] -> [다이얼로그 표출] -> [다이얼로그의 특정 요소에 자동으로 포커싱] -> [다이얼로그 닫힘] -> [가려진 객체에는 포커싱을 할 수 없다!] 의 흐름에서 발생한 에러이다.

 

disableAutoFocus 옵션을 활성화화면,  [다이얼로그의 특정 요소에 자동으로 포커싱]  부분에서 아무일도 일어나지 않으므로, 에러또한 발생하지 않게 된다.