Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

Drawer

Drawerは、画面の端から表示されるパネルのコンポーネントです。

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

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

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

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


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


    <Drawer isOpen={isOpen} onClose={onClose}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>


      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>


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

キーボード操作

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

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

ARIAロールと属性

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

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

前Dialog次Menu