포커스 링
포커스 링 (Focus Ring)
Chakra UI에서 포커스 상태를 스타일링하는 방법을 알려드려요. 접근성을 높이면서도 쉽게 포커스 링을 적용할 수 있어요.
출처: 문서
본문
포커스 링은 페이지에서 현재 포커스된 요소를 식별하는 데 사용돼요. 접근성 측면에서 중요하지만, 모든 컴포넌트에 포커스 링을 일일이 스타일링하는 건 번거로울 수 있어요.
Chakra UI는 focusRing과 focusVisibleRing 스타일 prop을 제공해서 포커스 링을 쉽게 스타일링할 수 있게 해줘요. focusRing prop의 값은 "outside", "inside", "mixed"가 될 수 있어요.
포커스 링
이 포커스 링은 &:is(:focus, [data-focus]) CSS 선택자에 매핑돼요.
포커스 링이 있는 버튼을 처음부터 스타일링하는 방법이에요.
<chakra.button px="4" py="2" focusRing="outside">
Click me
</chakra.button>
Focus Visible 링
이 포커스 링은 &:is(:focus-visible, [data-focus-visible]) CSS 선택자에 매핑돼요.
<chakra.button px="4" py="2" focusVisibleRing="outside">
Click me
</chakra.button>
Focus Ring과 Focus Visible Ring의 차이
Focus Visible Ring은 Focus Ring과 비슷하게 동작하지만, 핵심 차이가 있어요. 요소가 키보드 포커스를 받을 때만 포커스 표시 스타일을 적용해요.
이렇게 하면 키보드로 탐색할 때만 포커스 링이 보이게 되어, 마우스 상호작용에 영향을 주지 않으면서 접근성을 높여줘요.
내장 포커스 링
지원되는 포커스 링 미리보기예요.
커스터마이징
링 색상
포커스 링 색상을 커스터마이징하는 방법은 세 가지가 있어요.
1. 컴포넌트별 - focusRingColor prop을 사용하세요.
<Button focusRingColor="red.500">Click me</Button>
2. 전역 - 전역 CSS에 설정하세요.
const config = defineConfig({
globalCss: {
"*": {
focusRingColor: "red.500 !important",
},
},
})
export const system = createSystem(defaultConfig, config)
3. 색상 팔레트별 - 각 팔레트에 시맨틱 토큰을 정의하세요.
const config = defineConfig({
theme: {
semanticTokens: {
colors: {
gray: {
focusRing: { value: "blue.500" },
},
blue: {
focusRing: { value: "blue.400" },
},
},
},
},
})
export const system = createSystem(defaultConfig, config)
링 너비
특정 컴포넌트의 포커스 링 너비를 바꾸려면 focusRingWidth prop을 사용하세요.
<Button focusRingWidth="2px">Click me</Button>
링 스타일
특정 컴포넌트의 포커스 링 스타일을 바꾸려면 focusRingStyle prop을 사용하세요.
<Button focusRingStyle="dashed">Click me</Button>