컴포넌트 접근성 개선(aria-invalid, aria-required) #724

hyoseong1994 · 2026-01-06T08:02:26Z

변경 사항

Checkbox, PasswodInput, RadioGroup, Select, TextInput 에 aria-invalid, arid-required 테스트 보강 및 통일
RadioGroup
- invalid, required 기능 추가
- danger 스타일 수정 (기존 스타일이 피그마와 동일하지 않아서 수정했습니다.)

목적

invalid, required 기능이 있는 컴포넌트에 대해서 aria-invalid와 aria-required를 같이 설정하도록 수정하여 컴포넌트의 접근성을 높입니다.

리뷰어에게

checkbox 컴포넌트의 경우 ark-ui 때문에 invalid 동작이 다릅니다. (aria-invalid 가 없을때 false 로 동작)
radioGroup에 invalid, required 가 없어서 추가하였습니다.

PR 작성자 체크 리스트

UI Review를 요청하고 검토를 받았나요?
UI Tests를 진행했나요?

codecov · 2026-01-06T08:03:38Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

codecov · 2026-01-06T12:06:52Z

Bundle Report

Changes will increase total bundle size by 22.63kB (4.08%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
daleui-bundle-esm	577.65kB	22.63kB (4.08%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: daleui-bundle-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/index-*.js`	22.13kB	276.28kB	8.71% ⚠️
`assets/index-*.css`	503 bytes	64.46kB	0.79%

DaleSeo · 2026-01-15T00:33:20Z

checkbox 컴포넌트의 경우 ark-ui 때문에 invalid 동작이 다릅니다. (aria-invalid 가 없을때 false 로 동작)

@hyoseong1994 동작이 달라도 괜찮다는 말씀이신가요? 추가 검토가 필요하시다는 말씀이신가요?

DaleSeo · 2026-01-15T00:35:12Z

src/components/RadioGroup/RadioGroup.tsx

  }

-  const { tone, disabled: groupDisabled } = context;
+  const { tone, disabled: groupDisabled, invalid: GroupInvalid } = context;


GroupInvalid만 대문자로 시작해야하는 이유가 있을까요?

Suggested change

const { tone, disabled: groupDisabled, invalid: GroupInvalid } = context;

const { tone, disabled: groupDisabled, invalid: groupInvalid } = context;

티켓 분리로 인하여 제거되었습니다. 감사합니다.

DaleSeo · 2026-01-15T00:37:07Z

src/components/RadioGroup/RadioGroup.stories.tsx

        className={css({ display: "flex", flexDirection: "column", gap: "32" })}
      >
        <RadioGroup
+          {...args}


나이스 캐치!

DaleSeo · 2026-01-15T00:40:07Z

src/components/RadioGroup/RadioGroup.stories.tsx

+  argTypes: {
+    name: {
+      control: false,
+    },
+    label: {
+      control: false,
+    },
+    orientation: {
+      control: false,
+    },
+    defaultValue: {
+      control: false,
+    },
+  },


💯 다른 팀원들도 배울 수 있도록 컨벤션 문서에 요런 스토리 작성 관련 모범 관례나 팁을 추가해주셔도 좋을 것 같습니다.

컨벤션 문서에 내용 추가했습니다.

https://github.com/DaleStudy/daleui/wiki/Conventions#%EC%8A%A4%ED%86%A0%EB%A6%AC

항상 고정되어야 하는 prop은 Story의 argTypes에서 control: false로 선언합니다.
ex) Orientation Story에서 orientation props

DaleSeo · 2026-01-15T00:42:08Z

src/components/RadioGroup/RadioGroup.tsx

+  /**
+   * true이면 이 라디오 버튼이 에러 상태가 됩니다.
+   * @default false
+   */
+  invalid?: boolean;


개별 Radio 컴포넌트에 invalid 속성을 추가했는데, 어떤 사용 케이스를 생각하셨는지 궁금합니다. (그리고 컴포넌트의 API를 변경하는 것은 본 티켓의 목표에서 벗어날 수 있겠다는 생각도 드네요.)

사실 사용케이스를 고민한것은 아니고 figma에 디자인이 되어있는데 해당 기능이 없길래 누락된건가 싶어서 추가했습니다.
개별 라디오에 대해서는 invalid가 필요하지 않겠네요 사용케이스가 없을거같습니다.
API 변경에 대해서 동의합니다. 후속 티켓 생성하여 작업 분리하도록하겠습니다.

sounmind · 2026-01-15T01:40:40Z

src/components/TextInput/TextInput.test.tsx

+    expect(inputElement).not.toHaveAttribute("aria-required");
  });

-  it("leadingIcon과 trailingIcon이 제공될 때 올바르게 렌더링되어야 합니다.", () => {


아직도 it 친구가 있었구나!

hyoseong1994 · 2026-01-15T05:21:08Z

@DaleSeo 안녕하세요 달레님

@hyoseong1994 동작이 달라도 괜찮다는 말씀이신가요? 추가 검토가 필요하시다는 말씀이신가요?

동작이 달라서 여기만 왜 다른지에 대한 질문이 있을거같아서 작성해둔내용입니다.
해당 내용은 안건화하도록하겠습니다.

checkbox를 직접구현
aria-invalid를 false 로 통일(ark-ui 랑 동일하게)

feat: add tests to aria-invalid and aria-required

a21848c

hyoseong1994 linked an issue Jan 6, 2026 that may be closed by this pull request

컴포넌트 접근성 개선(aria-invalid, aria-required) #645

Open

github-actions bot assigned hyoseong1994 Jan 6, 2026

hyoseong1994 force-pushed the 645-aria-invalid-and-required branch 2 times, most recently from c79ed00 to 7dfdb37 Compare January 8, 2026 23:32

hyoseong1994 marked this pull request as ready for review January 13, 2026 00:07

hyoseong1994 requested a review from a team as a code owner January 13, 2026 00:07

hyoseong1994 deployed to chromatic January 13, 2026 00:07 — with GitHub Actions View deployment

hyoseong1994 marked this pull request as draft January 13, 2026 00:07

hyoseong1994 force-pushed the 645-aria-invalid-and-required branch from 497009a to 27e592b Compare January 13, 2026 00:08

hyoseong1994 marked this pull request as ready for review January 13, 2026 00:10

hyoseong1994 deployed to chromatic January 13, 2026 00:10 — with GitHub Actions View deployment

DaleSeo reviewed Jan 15, 2026

View reviewed changes

sounmind reviewed Jan 15, 2026

View reviewed changes

hyoseong1994 deployed to chromatic January 15, 2026 05:05 — with GitHub Actions View deployment

hyoseong1994 mentioned this pull request Jan 15, 2026

Sprint 21 중간 회의 #738

Open

refactor: integration props radioGroup story

4aae3ec

hyoseong1994 force-pushed the 645-aria-invalid-and-required branch from bd06ec5 to 4aae3ec Compare January 15, 2026 05:24

hyoseong1994 deployed to chromatic January 15, 2026 05:24 — with GitHub Actions View deployment

hyoseong1994 requested a review from DaleSeo January 15, 2026 05:30

	const { tone, disabled: groupDisabled, invalid: GroupInvalid } = context;
	const { tone, disabled: groupDisabled, invalid: groupInvalid } = context;

Uh oh!

컴포넌트 접근성 개선(aria-invalid, aria-required) #724

Are you sure you want to change the base?

컴포넌트 접근성 개선(aria-invalid, aria-required) #724

Uh oh!

Conversation

hyoseong1994 commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

변경 사항

목적

리뷰어에게

PR 작성자 체크 리스트

Uh oh!

codecov bot commented Jan 6, 2026

Codecov Report

Uh oh!

codecov bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

DaleSeo commented Jan 15, 2026

Uh oh!

DaleSeo Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

hyoseong1994 Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DaleSeo Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

DaleSeo Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

hyoseong1994 Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

DaleSeo Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

hyoseong1994 Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sounmind Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

hyoseong1994 commented Jan 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hyoseong1994 commented Jan 6, 2026 •

edited

Loading

codecov bot commented Jan 6, 2026 •

edited

Loading

hyoseong1994 Jan 15, 2026 •

edited

Loading

hyoseong1994 Jan 15, 2026 •

edited

Loading