인프런 커뮤니티 질문&답변

이 콘솔 경고는 aria-hidden 속성과 관련된 접근성(웹 접근성, a11y) 이슈입니다.

경고 메시지의 내용을 살펴보면:

"Blocked aria-hidden on an element because its descendant retained focus."

이는 "자식 요소가 포커스를 유지하고 있어서 요소에 aria-hidden을 적용할 수 없음"이라는 의미입니다.

모달이 닫힐 때 이런 경고가 발생하는 이유는:

1. 모달이 닫힐 때 aria-hidden="true"가 적용됨

2. 그런데 모달 내부에 포커스 가능한 버튼(Element with focus: button)이 있음

3. 접근성 가이드라인에 따르면 포커스를 가질 수 있는 요소를 aria-hidden으로 숨기면 안 됨

경고 메시지에 나온 대로, 이 문제를 해결하기 위해서는 inert 속성을 사용하는 것을 고려해볼 수 있습니다.

보통 이런 경고는 부트스트랩이나 다른 UI 프레임워크의 모달 컴포넌트에서 자주 발생합니다. 특히 코드에 있는 "modal fade show d-block" 클래스를 보면 부트스트랩을 사용하고 있을 가능성이 높습니다.

실제 기능에는 큰 영향이 없지만, 스크린 리더와 같은 보조 기술을 사용하는 사용자의 경험에 영향을 줄 수 있습니다. 그렇지만 일반적인 웹 사용자에게는 눈에 띄지 않는 문제이므로 당장 수정이 필요한 심각한 오류는 아닙니다.

안녕하세요, 인프런 AI 인턴입니다. Minkoo Lee님이 질문하신 내용을 바탕으로 답변을 드리겠습니다.

모달을 닫을 때 콘솔에 표시되는 메시지는 접근성 관련 경고입니다. aria-hidden 속성이 있는 요소에서 포커스를 받는 하위 요소가 있을 때 발생할 수 있는 상황입니다. 이 문제는 화면 읽기 프로그램과 같은 보조 기술을 사용하는 사용자에게 혼란을 줄 수 있습니다.

경고가 발생하는 이유와 권장 사항은 다음과 같습니다:

1. aria-hidden 속성: 이 속성은 화면 판독기를 통해 요소를 무시하게 만듭니다. 모달이 열릴 때 배경에 있는 콘텐츠를 숨기기 위해 종종 사용되는데, 제대로 사용되지 않으면 포커스를 가진 요소가 가려질 수 있습니다.

2. 포커스 관리: 모달이 열릴 때 반드시 포커스가 모달 안으로 이동하고, 닫힐 때도 적절하게 포커스를 관리해야 합니다.

3. inert 속성 사용: 콘텐츠를 완전히 비활성화하려면 aria-hidden 대신 inert 속성을 고려하라는 조언이 있습니다. 이는 요소와 그 자식 요소들에 대한 사용자 상호작용을 완전히 차단합니다.

이러한 경고는 프레임워크나 라이브러리(예: Bootstrap)에서 접근성을 향상시키기 위한 고급 설정을 제공하면서 발생할 수 있습니다. Bootstrap의 모달 구현에서포커스 관리가 자동으로 이루어지도록 조정하는 방법을 확인해보실 수 있습니다.

아래 유사한 질문을 다룬 링크를 통해 더 자세한 정보를 확인해보세요:

• 모달 닫기 버튼 에러 발생 시 원인과 해결 방법 - 비슷한 aria 속성 이슈를 해결하는 방법에 대한 설명이 있습니다.
  

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.현재 답변이 만족스럽지 않을 수도 있는 점 양해 부탁드립니다. 🙏