FocusLock

FocusLockは、モーダルやダイアログなどの要素でフォーカスを制限し、フォーカスをその範囲内にロックすることで、アクセシビリティを向上させるコンポーネントです。

const { open, onToggle } = useDisclosure()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse open={open}>
      <FocusLock>
        <VStack mt="lg" bg="bg.panel" p="lg" rounded="l2">
          <Input placeholder="This is Input" bg="bg" />

          <Button alignSelf="flex-end">Button</Button>
        </VStack>
      </FocusLock>
    </Collapse>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { FocusLock } from "@yamada-ui/react"

import { FocusLock } from "@/components/ui"

import { FocusLock } from "@workspaces/ui"

<FocusLock />

Props

Prop	デフォルト	型 / 説明
`autoFocus`	`false`	`boolean` If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.
`contentRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the wrapper for which the focus-lock wraps.
`disabled`	`false`	`boolean` If `true`, focus trapping will be disabled.
`finalFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to return focus to when `FocusLock` unmounts.
`initialFocusRef`	-	`RefObject<HTMLElement \| null>` `ref` of the element to receive focus initially.
`lockFocusAcrossFrames`	`false`	`boolean` Enables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active. - If `false`: allows focus to move outside of iframe.
`persistentFocus`	`false`	`boolean` If `true`, disables text selections inside, and outside focus lock.
`restoreFocus`	`false`	`boolean` If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.

類似のコンポーネント

VisuallyHiddenは、視覚的な表示からコンテンツを隠しながらスクリーンリーダーで読み取り可能にする、ウェブアクセシビリティで一般的に使用される手法です。

使用されているコンポーネント・フック

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

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