Dialog

Dialogは、アクセシビリティに関してWAI-ARIA Dialog (Modal) Patternに従います。

• ダイアログが開くと、自動的にダイアログ内の最初の無効ではない要素またはinitialFocusRefで設定された要素にフォーカスされます。
• ダイアログが閉じると、ダイアログが開く前にフォーカスされていた要素またはfinalFocusRefで設定された要素にフォーカスされます。
• ダイアログのオーバーレイをクリックすると、ダイアログを閉じます。
• ダイアログの背後にある要素はスクロールがブロックされます。

ダイアログを開くトリガーとなる要素にaria-haspopup="dialog"を設定すると、スクリーンリーダーがダイアログを開くことをユーザーに伝えることができます。

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button aria-haspopup="dialog" onClick={onOpen}>
      Open Dialog
    </Button>

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)

キーボード操作

ダイアログが開くと、フォーカスはダイアログ内にロックされます。つまり、ダイアログを閉じない限り、ダイアログ外の要素をフォーカスすることはできません。

ARIAロールと属性