fix(Tooltip): 접근성(a11y) 개선 및 스타일 코드 개선 by minji0214 · Pull Request #245 · sipe-team/side

minji0214 · 2026-04-19T11:44:57Z

Changes

role="tooltip"을 trigger wrapper가 아닌 실제 tooltip 엘리먼트에 배치하고, useId로 생성한 id로 aria-describedby 연결
click trigger일 때 aria-expanded로 열림/닫힘 상태 노출
Space/Enter 키 이벤트 처리 버그 수정 ('space' → 'Space')
scroll/resize 시 tooltip 위치 재계산 추가
styleVariants → vanilla-extract recipe()로 스타일 구조 통일
TooltipPosition, TooltipTrigger를 string literal type에서 enum-style const 객체로 변환

Visuals

as-is

2026-04-19.10.18.00.mov

to-be

2026-04-19.10.21.54.mov

Checklist

Have you written the functional specifications?
Have you written the test code?

Additional Discussion Points

~~현재 테스트 코드가 컴포넌트마다 한글/영어로 혼재되어 있어요. 어느 언어로 통일하면 좋을지 한번 같이 이야기해보면 좋을 것 같습니다! 🙂~~(논의완)

changeset-bot · 2026-04-19T11:45:00Z

🦋 Changeset detected

Latest commit: 4154442

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@sipe-team/tooltip	Patch
@sipe-team/side	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-04-19T11:45:03Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (2)

main
release/v1

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 851350d5-32df-410a-8619-deb17a2dc01b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/tooltip-a11y

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-04-19T11:57:07Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/tooltip/src/Tooltip.css.ts	`100.00% <100.00%> (ø)`
packages/tooltip/src/Tooltip.test.tsx	`100.00% <100.00%> (ø)`
packages/tooltip/src/Tooltip.tsx	`100.00% <100.00%> (ø)`
...ckages/tooltip/src/hooks/useTooltip/useTooltip.tsx	`98.33% <100.00%> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

3o14

고생하셨습니다! 테스트 코드만 논의된 대로 영어로 통일되면 좋을 것 같습니다 👍🏻

minji0214 · 2026-04-20T14:45:46Z

고생하셨습니다! 테스트 코드만 논의된 대로 영어로 통일되면 좋을 것 같습니다 👍🏻

영어로 변경했습니다!

G-hoon · 2026-04-21T04:22:13Z

@Yeom-JinHo
진호님 이거 컴포넌트 변경 changeset 추가 안해도 되는지 검토 부탁드립니다~!

G-hoon · 2026-04-21T04:25:24Z

 }

-interface CalculateTooltipPositionParams {
+export interface CalculateTooltipPositionParams {


이거는 왜 export 하셨을까요~?

타입 정리하다가 잘못수정된거 같아요. 제거하였습니다!

Yeom-JinHo · 2026-04-21T13:04:21Z

@Yeom-JinHo 진호님 이거 컴포넌트 변경 changeset 추가 안해도 되는지 검토 부탁드립니다~!

@minji0214 changeset 한번 돌려주세요~

minji0214 · 2026-04-21T15:21:12Z

@Yeom-JinHo 진호님 이거 컴포넌트 변경 changeset 추가 안해도 되는지 검토 부탁드립니다~!

@minji0214 changeset 한번 돌려주세요~

반영하였습니다!

G-hoon

@minji0214 님,
일단 Approve 해드리는데,
이거 Tooltip 컴포넌트 전반적으로 수정이 필요할 것 같아요...

useTooltip.tsx -> useTooltip.ts 로 되어야 할 것 같고.
handlePosition은 매 이벤트마다 DOM rect를 읽고 state를 업데이트합니다. scroll/resize는 매우 빈번하게 scroll 및 resize 가 매 렌더마다 발생하는데, requestAnimationFrame 혹은 쓰로틀링 걸어야 할 것 같아요
아래 코드에서, createPortal 된 순간 isVisible 값이 항상 true 인데, 아래 className 속성 isVisible 값이 있을 필요가 없을 것 같아요.

createPortal(
          <div
            ref={tooltipRef}
            className={clsx(styles.tooltip({ placement: placementProp }), tooltipClassName, isVisible && 'visible')}
            style={

froggy1014 · 2026-04-22T15:03:14Z

-  | 'bottom-right'
-  | 'left'
-  | 'right';
+export const TooltipPosition = {


더 나은 패턴이네요 좋당 ~

froggy1014

너무 수고많으셨습니다.

일단 SIDE 디자인시스템에 Tooltip에 대한 명확한 요구사항이 없어서 뭐가 맞다 틀리다는 없지만

WCAG 기준은 마저 다 충족하는게 좋을거같네요 !

froggy1014 · 2026-04-22T15:13:26Z

+export type TooltipPosition = (typeof TooltipPosition)[keyof typeof TooltipPosition];

-export type TooltipTrigger = 'hover' | 'click';
+export const TooltipTrigger = {


@minji0214

기존에 trigger 방식이 hover, click 을 명시적으로 정해서 사용하는 패턴으로 구현이 되어있었네요.

SIDE 디자인 시스템에 요구사항이 명확히 없었어서 아마 임의로 작업을 했던거같습니다.

저도 의아해서 조금 찾아보니까

https://base-ui.com/react/components/tooltip

https://www.radix-ui.com/primitives/docs/components/tooltip

https://ark-ui.com/docs/components/tooltip#examples

trigger 방식을 명시적으로 정해놓지는 않고 click과 hover는 항상 이벤트는 받고있는거 같고, 필요하면 Controlled(제어) 할 수 있도록 boolean을 넘겨주는 패턴이 좀 있는거 같아요.

일단 지금 문제점은 trigger 방식을 hover로 해놨을때, tab을 통해서 keyboard focus하게되면 툴팁이 안나오는거 같습니다. 이거는 지원해주는게 옳을거 같은데 어떻게 생각하시나요?

froggy1014 · 2026-04-22T15:18:40Z


-export type TooltipTrigger = 'hover' | 'click';
+export const TooltipTrigger = {
+  hover: 'hover',


@minji0214

저도 다른거 찾아보다가 알게된거인데, hover했을때 나오는 Tooltip Content에 마우스가 이동했을때 Unmount되면 안된다고 해요

Screen.Recording.2026-04-23.at.00.15.25.mov

https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html

minji0214 added 4 commits April 19, 2026 19:52

fix(tooltip): add aria-label for screen readers

f3446f5

refactor(tooltip): migrate styles to vanilla-extract recipe

95993f5

test(tooltip): improve accessibility test coverage

01c484f

refactor(tooltip): use enum instead of string literal

92d3bb3

minji0214 self-assigned this Apr 19, 2026

minji0214 requested review from 3o14, G-hoon, KYBee, Yeom-JinHo, froggy1014, haedawn, minjeeki and osohyun0224 as code owners April 19, 2026 11:44

fix(tooltip): resolve type import error

3608fb0

3o14 reviewed Apr 20, 2026

View reviewed changes

test(tooltip): translate test descriptions to English

8bf2e74

3o14 approved these changes Apr 20, 2026 •

edited

Loading

View reviewed changes

G-hoon reviewed Apr 21, 2026

View reviewed changes

Yeom-JinHo approved these changes Apr 21, 2026

View reviewed changes

chore(tooltip): remove export and add changeset

4154442

G-hoon approved these changes Apr 22, 2026

View reviewed changes

froggy1014 reviewed Apr 22, 2026

View reviewed changes

froggy1014 requested changes Apr 22, 2026

View reviewed changes

Conversation

minji0214 commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Visuals

as-is

to-be

Checklist

Additional Discussion Points

Uh oh!

changeset-bot Bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

codecov Bot commented Apr 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

3o14 left a comment

Choose a reason for hiding this comment

Uh oh!

minji0214 commented Apr 20, 2026

Uh oh!

Uh oh!

G-hoon commented Apr 21, 2026

Uh oh!

G-hoon Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

minji0214 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Yeom-JinHo commented Apr 21, 2026

Uh oh!

minji0214 commented Apr 21, 2026

Uh oh!

G-hoon left a comment

Choose a reason for hiding this comment

Uh oh!

froggy1014 Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

froggy1014 left a comment

Choose a reason for hiding this comment

Uh oh!

froggy1014 Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

froggy1014 Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

minji0214 commented Apr 19, 2026 •

edited

Loading

changeset-bot Bot commented Apr 19, 2026 •

edited

Loading

coderabbitai Bot commented Apr 19, 2026 •

edited

Loading

codecov Bot commented Apr 19, 2026 •

edited

Loading