접근 가능한 모달 구축

프론트엔드 개발자라면 모달이 웹의 유비쿼터스 UI 요소라는 것을 알고 계실 것입니다.
오늘은 어려운 문제를 해결하는 방법을 구현하는 방법을 보여 드리겠습니다.



마우스를 사용할 때 모든 것이 이것으로 작동합니다.

💡 But what if we weren't using mouse?
What if we were navigating with the keyboard, so we can start here if I press Tab, it moves to the next element, I press Enter, it opens the modal.

그리고 여기서 첫 번째 문제에 부딪힙니다.
보시다시피 제 초점은 여전히 ​​이 버튼에 있고 저는 여전히 여기 배경에서 떠다니고 있습니다.



관련 문제는 내 초점을 이 모달에 고정해야 한다는 것입니다.
따라서 최종 대화형 요소에서 Tab 키를 누르면 포커스가 다시 탈출 버튼으로 순환됩니다.
그래서 나는 큰 루프, 끝없는 루프에서 이것들을 통해 이동해야 합니다.



셋째, Esc를 눌러 모달을 닫을 수 있어야 합니다.
그리고 이것은 마우스 사용자인 경우에도 일반적으로 기대하는 것이지만 키보드 사용자에게는 특히 중요합니다.



다음으로 네 번째 문제는 모달을 닫을 때 초점이 어디에 있습니까?
잃어버릴지도 모르죠.



모달이 열리기 전에 초점이 맞춰진 요소(일반적으로 모달 트리거)로 복원되어야 합니다.
이 버튼을 클릭하면 버튼에 포커스가 맞춰집니다.
그런 다음 모달을 닫을 때 모달을 닫을 때 이 요소에 포커스를 복원해야 합니다.



다섯째, 마크업에 주석을 달아 사람들이
이것이 모달이라는 것을 알고 있으므로 이 배경 콘텐츠를 모두 비활성화했습니다.

💡 Problems:
In this modal component, how is it supposed to know where to restore focus, once you close the modal, we would need to have that in global state where we are constantly keeping track of what's focused.
And then knowing how to restore when we close the modal, it's non trivial stuff, it's really really hard.

고맙게도 우리는 그러한 문제를 스스로 해결할 필요가 없습니다. 왜냐하면 그것을 할 수 있는 도구가 존재하기 때문입니다.

그리고 오늘 우리가 사용할 제품은
Reach UI .

그래서 여기서는 Reach UI 을 사용하고 DialogOverlay 및 DialogContent 를 가져옵니다.

import {
  DialogOverlay,
  DialogContent
} from "@reach/dialog";

다음으로 Reach 구성 요소가 열려 있는지 여부를 실제로 알려야 합니다.
따라서 우리가 일찍 구제하기 전에는 이 모달 구성 요소가 isOpen 진실하지 않고 호출되면 그냥 구제하는 것이었습니다.
대신 오버레이로 바로 전달하겠습니다.
그래서 나는 isOpen={isOpen}라고 말할 것입니다.
또한 Reach UI에 onDismiss 콜백을 사용하여 모달을 닫는 기능을 제공하여 handleDismiss와 같게 할 것입니다.

function Modal({
  title,
  isOpen,
  handleDismiss,
  children
}) {
  return (
    <Overlay
      isOpen={isOpen}
      onDismiss={handleDismiss}
    >
      <Content aria-label={title}>
        <Header>
          <Title>{title}</Title>
          <CloseButton onClick={handleDismiss}>
            <X />
            <VisuallyHidden>
              Dismiss modal
            </VisuallyHidden>
          </CloseButton>
        </Header>
        <ChildWrapper>{children}</ChildWrapper>
      </Content>
    </Overlay>
  );
}

키보드로 이 작업을 시도하면 Enter 키를 누르면 열립니다.
내 초점이 어디로 이동하는지 확인하세요. 탈출 버튼으로 이동합니다.
Tab 키를 누르면 모달의 대화형 요소 사이를 이동하지만 요소 사이를 순환하면서 이러한 배경 요소에 포커스를 놓을 수 없도록 합니다.

그리고 정말 어려운 역학에 Reach UI을 사용하고 CSS를 직접 관리하는 데 꽤 기분이 좋습니다.