🎯 키보드 포커스 관리 미흡: 접근성 사각지대 생성

Why Wrong?

How to Fix?

// 잘못된 모달 구현 (포커스 관리 없음)
import React, { useState } from 'react';

const BadModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>

      {isOpen && (
        <div style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          backgroundColor: 'white',
          padding: '20px',
          border: '1px solid black',
          zIndex: 1000,
        }}>
          <h2>안녕하세요, 모달입니다!</h2>
          <p>여기에 중요한 내용이 있습니다.</p>
          <button onClick={() => setIsOpen(false)}>닫기</button>
          <input type="text" placeholder="입력" />
        </div>
      )}
      {isOpen && <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 999 }} />}
    </div>
  );
};

export default BadModal;

// 올바른 모달 구현 (접근성을 고려한 포커스 관리 포함)
import React, { useState, useRef, useEffect } from 'react';

const AccessibleModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const modalRef = useRef(null);
  const triggerRef = useRef(null); // 모달을 연 버튼 참조

  useEffect(() => {
    if (isOpen) {
      // 모달이 열리면 모달 자체에 포커스 (tabindex="-1" 필요)
      // 또는 모달 내 첫 번째 포커스 가능한 요소에 포커스
      modalRef.current.focus();

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          setIsOpen(false);
        }
        // TODO: 모달 내부에서만 포커스 순환 (tab 키)
        // 복잡하므로 ARIA APG 문서 참고하여 라이브러리 사용 권장
      };

      document.addEventListener('keydown', handleKeyDown);
      return () => {
        document.removeEventListener('keydown', handleKeyDown);
      };
    } else {
      // 모달이 닫히면 원래 모달을 열었던 버튼으로 포커스 복원
      triggerRef.current.focus();
    }
  }, [isOpen]);

  const openModal = () => {
    triggerRef.current = document.activeElement; // 현재 포커스된 요소 저장
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>모달 열기</button>

      {isOpen && (
        <div
          ref={modalRef}
          role="dialog"
          aria-modal="true" // 스크린 리더에 모달임을 알림
          tabIndex="-1" // 프로그래밍 방식으로 포커스 가능하게 함
          style={{
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            backgroundColor: 'white',
            padding: '20px',
            border: '1px solid black',
            zIndex: 1000,
          }}
        >
          <h2>안녕하세요, 모달입니다!</h2>
          <p>여기에 중요한 내용이 있습니다.</p>
          <button onClick={closeModal}>닫기</button>
          <input type="text" placeholder="입력" />
        </div>
      )}
      {isOpen && <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 999 }} onClick={closeModal} />}
    </div>
  );
};

export default AccessibleModal;

You Might Also Like