[E] Blocked aria-hidden on an element because its descendant retained focus

JavaScript + BootStrap 사용 환경에서 모달 창을 닫을 때 브라우저 도구에 다음과 같은 오류가 발생하는 것이 확인되었다. 기능 동작에는 문제가 없지만, 지속적으로 경고가 뜨는 모습에 해결이 필요할 것 같아 찾아본 내용을 정리한다.

Blocked aria-hidden on an element because its descendant retained focus. The 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.
Element with focus: button

 

 

오류 원인

모달을 닫을 때 생기는 이 Error는 모달 내부에 포커스된 요소가 남아 있는 상태에서 조상 요소에 aria-hidden="true"를 걸었기 때문에 발생하는 Chromium 류 브라우저 접근성(Accessibility) 경고로, 모달을 숨기기 직전 내부에 남아 있는 포커스를 지우면 해결된다.

 

aria-hidden="true" 요소와 Focus 충돌 때문에 발생하는 에러인데,

이게 적용된 요소는 숨겨져야 하는데 그 요소 내부에 포커스가 남아 있어 접근성 문제가 발생하는 것.

때문에, 모달이 꺼질 때 포커스를 해제시키면 오류가 해결되는 것이다.

오류 양상을 찾느라 서치한 대부분의 글에서 aira-hidden을 사용하지 않는 게 좋다고 함

Accessible Rich Internet Applications (WAI-ARIA) 1.3

 

 

해결 방법

모달을 사용하는 스크립트 내부 또는 전역 스크립트에 부트스트랩 모달 사용 시 포커스를 해제하는 구문을 추가한다.

// Modal aria-hidden focus 문제 해결
document.addEventListener(
    'hide.bs.modal',
    function (e) {
        const active = document.activeElement;
        // activeElement가 현재 숨길 모달(e.target) 내부에 있으면 blur
        if (e.target.contains(active)) {
            active.blur();
        }
    },
    true
);

 

• hide.bs.modal : 모달이 숨겨지기 바로 직전에 발생하는 Event
  • document.activeElement : 실제 포커스된 엘리먼트를 가져와 blur() 처리로 포커스를 날림
• true : 캡처 단계로 등록 / Bootstrap의 hide.bs.modal 내부 리스너(보통 버블 단계)보다 먼저 실행되어 aria-hidden="true"가 달리기 전 포커스 먼저 제거

 

---

 

 

개발 환경에서 발생하던 aria-hidden 접근성 경고가 운영 환경에서는 발생하지 않는 걸 확인하고 조금 더 알아보니 다음과 같은 경우로 인해 환경 차이에 따라 경고가 노출되지 않을 수 있다는 사실을 알게 되었다.

 

1. Chrome 채널(Stable vs Beta/Canary) 차이
   • 본 에러는 Chrome의 접근성(Accessibility) 경고인데, 운영 환경의 크롬 버전은 123.0.6312.86v으로 aria-hidden 검사 기능이 완전히 활성되지 않은 버전일 수 있다. → 개발 환경보다 운영 환경의 크롬 버전이 낮아 발생하는 차이로, 최신 빌드에서 더 엄격한 접근성 경고를 뿜는 상황일 수 있음
   • DevTools(F12) > Console 창에서 console.log(navigator.userAgent); 명령을 수행하여 Chrome 버전/채널을 확인해보자.
2. ARIA 처리 타이밍 차이
   • 개발 환경은 Spring Boot + unminified JS인데, 리소스 로딩/처리 순서가 조금 더 느려서 hide.bs.modal 직후에도 activeElement가 남아 있는 상황이 발생할 수 있다.
   • 운영 환경은 Tomcat 8에 패키징된 minified JS로, 모달이 닫힐 때 자바스크립트가 더 빠르게 처리되면서 포커스가 남아 있지 않은 상태로 aria-hidden이 붙어 경고가 발생하지 않을 수 있다.
3. 인터넷 연결 유무로 인한 외부 스크립트 차이
   • 인터넷 연결이 가능한 개발 환경의 경우 CDN으로부터 부가 폴리필(inert polyfill)이나 DevTool 확장 스크립트가 로드될 수 있고, 여기서 추가 검사 로직이 실행될 수 있지만, 운영 환경은 인터넷 연결이 되지 않아 외부 스크립트를 못 불러와 검사 항목 자체가 빠져 있을 수 있다.

 

대표적인 원인을 정리한 것인데, 이는 '접근성 경고'일 뿐이니 해결하지 않아도 기능 동작에는 문제가 없지만 잠재적인 오류 요건이 될 수 있기 때문에 항상 Warning이 발생하는 개발 환경 기준으로 오류를 해결하고 반영하는 게 좋다고 판단되었다.