모달

Web

[React] 리액트 Portal(포탈) 사용해서 모달 구현하기

2024.04.29

참고https://react.dev/reference/react-dom/createPortal createPortal – ReactThe library for web and native user interfacesreact.dev https://abangpa1ace.tistory.com/entry/React-Portal-%ED%8F%AC%ED%83%88 [React] Portal (포탈), Modal 구현하기회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해abangpa1ace.tistory.comhttps://dev-bomdong.tistory.c..

zerobase

zero-base/ 모달에서 WAI-ARIA 접근성 고려하기

2023.05.16

접근성을 고려한 모달을 코드를 작성해보았다. 모달을 열었을 때 tabindex 속성을 추가해서 모달열기 버튼을 탭키로 접근되지 않도록 했다. aria-hidden을 조절해서 스크린리더에 안읽히도록 조정했다. See the Pen Untitled by 이아름 (@aahreum) on CodePen. aira-modal = 'true' => 모달 대화 상자임을 나타냄 role='dialog' => 대화형 창 역할을 함을 나타냄 aria-labelledby='modal-title' => 모달 제목을 나타내는 요소의 ID를 참조함 aria-describedby='modal-desc' => 모달 내용을 나타내는 요소의 ID를 참조함 참고 https://developer.mozilla.org/en-US/docs/W..

[React] 리액트 Portal(포탈) 사용해서 모달 구현하기

zero-base/ 모달에서 WAI-ARIA 접근성 고려하기

티스토리툴바