createPortal 사용하여 접근성 높인 모달 구현하기

// Modal.tsx
import { useEffect } from "react";
import { createPortal } from "react-dom";

function Modal({ onClick }: { onClick: () => void }) {
  const handleModalClose = (e: KeyboardEvent) => {
    if (e.key !== "Escape") return;
    onClick();
  };
  useEffect(() => {
    document.body.style.cssText = `position: fixed; top: -${window.scrollY}px`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = `position: ""; top: "";`;
      window.scrollTo(0, parseInt(scrollY || "0") * -1);
    };
  }, []);

  useEffect(() => {
    document.addEventListener("keyup", handleModalClose);
    return () => document.removeEventListener("keyup", handleModalClose);
  });
  return createPortal(
    <div>
      <article role="dialog" aria-modal="true" className="Dialog">
        <header className="Dialog__header">
          <h2>React 포털로 연 다이얼로그(with 모달)</h2>
        </header>
        <div className="Dialog__body">
          <p>여기가 React 앱 밖의 세상인가요?!</p>
        </div>
        <footer className="Dialog__footer">
          <button
            type="button"
            className="closeButton"
            aria-label="모달 다이얼로그 닫기"
            title="모달 다이얼로그 닫기"
            onClick={onClick}
          >
            <svg
              width="24"
              height="24"
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
            >
              <path d="M12 11.293l10.293-10.293.707.707-10.293 10.293 10.293 10.293-.707.707-10.293-10.293-10.293 10.293-.707-.707 10.293-10.293-10.293-10.293.707-.707 10.293 10.293z" />
            </svg>
          </button>
        </footer>
      </article>
      <div className="Dialog__dim" onClick={onClick}></div>
    </div>,
    document.getElementById("modal") as HTMLElement
  );
}

export default Modal;

createPortal로 root 태그가 아닌 새로운 id가 modal인 태그에 modal을 생성하였다.
Esc 키를 눌러 모달을 끌 수 있게 하였다.
모달이 열려있을 때, 모달 뒤의 배경이 스크롤되지 않도록 하였다.

// App.tsx
import { useState } from "react";
import "./App.css";
import Modal from "./Modal";
import ModalBtn from "./ModalBtn";

function App() {
  const [modalOpen, setModalOpen] = useState(false);

  const handleModalOpen = () => setModalOpen(true);
  const handleModalClose = () => setModalOpen(false);
  return (
    <div className="App">
      <ModalBtn onClick={handleModalOpen} modalOpen={modalOpen} />
      {modalOpen && <Modal onClick={handleModalClose} />}
    </div>
  );
}

export default App;

ModalBtn을 클릭하여 모달을 열 수 있게한다.

// ModalBtn.tsx
function ModalBtn({
  onClick,
  modalOpen,
}: {
  onClick: () => void;
  modalOpen: boolean;
}) {
  return (
    <div className="box">
      <button
        type="button"
        className="openDialogButton"
        aria-haspopup="dialog"
        aria-label="모달 다이얼로그 열기"
        title="모달 다이얼로그 열기"
        onClick={onClick}
        tabIndex={modalOpen ? -1 : 0}
      >
        <svg
          width="24"
          height="24"
          xmlns="http://www.w3.org/2000/svg"
          fill-rule="evenodd"
          clip-rule="evenodd"
        >
          <path d="M14 4h-13v18h20v-11h1v12h-22v-20h14v1zm10 5h-1v-6.293l-11.646 11.647-.708-.708 11.647-11.646h-6.293v-1h8v8z" />
        </svg>
      </button>
    </div>
  );
}

export default ModalBtn;

ModalBtn에 모달 상태를 전달하여 모달이 열려있다면 모달 배경에 포커스가 가지 않도록 하였다.

배경 요소에 모든 focus 요소에 tabIndex 속성을 설정해줘야하는 번거로움이 있다.

리액트 접근성 높이는 모달 구현하기

createPortal 사용하여 접근성 높인 모달 구현하기

loco9939