焦点环

焦点环用于标识页面上当前获得焦点的元素。虽然这对于可访问性很重要，但为每个组件设置焦点环样式可能会很繁琐。

Chakra UI 提供了focusRing 和 focusVisibleRing 样式属性，可以轻松设置焦点环的样式。focusRing 属性的值可以是 "outside"（外部）、"inside"（内部）或 "mixed"（混合）。

焦点环

此焦点环映射到 &:is(:focus, [data-focus]) CSS 选择器。

以下是如何从头开始为按钮设置焦点环样式

<chakra.button px="4" py="2" focusRing="outside">
  Click me
</chakra.button>

可见焦点环

此焦点环映射到 &:is(:focus-visible, [data-focus-visible]) CSS 选择器。

<chakra.button px="4" py="2" focusVisibleRing="outside">
  Click me
</chakra.button>

焦点环与可见焦点环的区别

可见焦点环的功能与焦点环类似，但有一个关键区别：它仅在元素通过键盘获得焦点时应用焦点指示器样式。

这确保了焦点环仅在通过键盘导航时可见，从而在不影响鼠标交互的情况下提高了可访问性。

内置焦点环

以下是支持的焦点环预览。

import { Center, For, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <For each={["inside", "outside", "mixed"]}>
        {(focusRing) => (
          <Center
            h="20"
            bg="bg"
            borderWidth="1px"
            focusRing={focusRing}
            data-focus
          >
            {focusRing}
          </Center>
        )}
      </For>
    </Stack>
  )
}

自定义

环颜色

要更改特定组件的焦点环颜色，可以使用 focusRingColor 属性。

<Button focusRingColor="red.500">Click me</Button>

要全局更改焦点环的颜色，可以配置 focusRing 语义令牌。

const colors = defineSemanticTokens.colors({
  focusRing: {
    value: { base: "{colors.red.500}", _dark: "{colors.red.500}" },
  },
})

环宽度

要更改特定组件的焦点环宽度，可以使用 focusRingWidth 属性。

<Button focusRingWidth="2px">Click me</Button>

环样式

要更改特定组件的焦点环样式，可以使用 focusRingStyle 属性。

<Button focusRingStyle="dashed">Click me</Button>