Blocked aria-hidden on an element because its descendant retained focus 부트스트랩 모달 에러 해결 (error bootstrap modal)

 

Blocked aria-hidden 문제 해결

문제 발생

Bootstrap 4.x 버전 사용 시 예전에는 문제가 없었지만,

구글 크롬 개발자 콘솔에서 오류가 발생하였다.

 

에러 로그는 아래와 같이 aria-hidden 처리 오류이다.

구체적 원인은 더 봐야 하겠지만, aria-* attribute는 스크린 리더에 관련한 태그인데,

모달 창이 닫힐 경우 특정 버튼으로 포커싱 되지 않아서 발생하는 오류로

크롬 업데이트 후 w3c 정책에 맞도록 수정한 것으로 판단된다.

 

 

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

Ancestor with aria-hidden:  <div class=​"modal fade" id=​"favoriteModal" tabindex=​"-1" aria-labelledby=​"exampleModalLabel" style=​"padding-right:​ 17px;​ display:​ block;​" aria-hidden=​"true">​…​</div>​

 

해결방안

문제 원인이 모달창이 닫힐 경우 발생하는 문제이기 때문에

모달창이 닫힐 때 포커스를 예위처리하면 된다.

 

Bootstrap 4.x 모달 이벤트 처리는 아래와 같으니 hide.bs.modal 이벤트에 처리하되

전체 모달에 적용하려 modal css class 를 선택하였다.

 

show.bs.modal	This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal	This event is fired immediately when the hide instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

 

 

<script type="text/javascript">
    $(document).ready(function () {
        $('.modal').on('hide.bs.modal', function (e) {
            if (document.activeElement instanceof HTMLElement) {
                document.activeElement.blur();
            }
        });
    });
</script>

 

 

특정 id에만 적용할 경우 Jquery selector 만 변경하자

<script type="text/javascript">
    $(document).ready(function () {
        $('#myModal').on('hide.bs.modal', function (e) {
            if (document.activeElement instanceof HTMLElement) {
                document.activeElement.blur();
            }
        });
    });
</script>

 

이제 해결했으니, 퇴근 빨리하고 집에서 책이나 읽어 보자.