Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Modal

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

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

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

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

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


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


    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalHeader>ドラゴンボール</ModalHeader>


      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>


      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

キーボード操作

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

キー説明状態
Tabモーダル内の無効ではない次の要素にフォーカスします。最後の要素の場合は最初の無効ではない要素をフォーカスします。isOpen={true}
Shift + Tabモーダル内の前の無効ではない要素をフォーカスします。最初の要素の場合は最後の無効ではない要素をフォーカスします。isOpen={true}
Escapeモーダルを閉じます。isOpen={true} + closeOnEsc={true}

ARIAロールと属性

コンポーネントロールと属性使い方
Modalrole="dialog"ダイアログであることを示します。
aria-modal="true"表示されているウィジェットがモーダルであることを示します。
aria-labelledby関連したModalHeaderのidを設定します。
aria-describedby関連したModalBodyのidを設定します。
ModalOverlayaria-hidden="true"要素をアクセシビリティツリーから除外します。
ModalCloseButtonaria-label="Close modal""Close modal"を設定します。
ModalHeaderidModalと関連付けるために使用するid。
ModalBodyidModalと関連付けるために使用するid。

GitHubでこのページを編集する

前オーバーレイ次Dialog