Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hyoseong1994 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a21848c
feat: add tests to aria-invalid and aria-required
hyoseong1994 Jan 6, 2026
4aae3ec
refactor: integration props radioGroup story
hyoseong1994 Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions src/components/Checkbox/Checkbox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,19 @@ describe("렌더링", () => {
expect(checkbox).toBeChecked();
});

test("invalid가 true이면 aria-invalid가 설정된다.", () => {
test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(<Checkbox label="테스트" />);
const checkbox = screen.getByRole("checkbox");
expect(checkbox).toHaveAttribute("aria-invalid", "false");
});

test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(<Checkbox label="테스트" invalid />);
const checkbox = screen.getByRole("checkbox");
expect(checkbox).toHaveAttribute("aria-invalid", "true");
});

test("invalid가 false이면 aria-invalid가 false로 설정된다.", () => {
test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(<Checkbox label="테스트" invalid={false} />);
const checkbox = screen.getByRole("checkbox");
expect(checkbox).toHaveAttribute("aria-invalid", "false");
Expand Down Expand Up @@ -142,13 +148,19 @@ describe("렌더링", () => {
).not.toBeInTheDocument();
});

test("required가 true이면 aria-required가 true로 설정된다.", () => {
test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
render(<Checkbox label="일반 체크박스" />);
const checkbox = screen.getByRole("checkbox");
expect(checkbox).not.toHaveAttribute("aria-required");
});

test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => {
render(<Checkbox label="필수 체크박스" required />);
const checkbox = screen.getByRole("checkbox");
expect(checkbox).toHaveAttribute("aria-required", "true");
});

test("required가 false이면 aria-required가 설정되지 않는다.", () => {
test("required가 false일 때 aria-required 속성이 올바르게 설정된다", () => {
render(<Checkbox label="일반 체크박스" required={false} />);
const checkbox = screen.getByRole("checkbox");
expect(checkbox).not.toHaveAttribute("aria-required");
Expand Down
36 changes: 36 additions & 0 deletions src/components/PasswordInput/PasswordInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,42 @@ test("접근성 속성을 제공한다 (aria-label, aria-pressed)", async () =>
expect(toggle).toHaveAttribute("aria-pressed", "true");
});

test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(<PasswordInput />);
const input = screen.getByLabelText(/패스워드/, { selector: "input" });
expect(input).not.toHaveAttribute("aria-invalid");
});

test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(<PasswordInput invalid />);
const input = screen.getByLabelText(/패스워드/, { selector: "input" });
expect(input).toHaveAttribute("aria-invalid", "true");
});

test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(<PasswordInput invalid={false} />);
const input = screen.getByLabelText(/패스워드/, { selector: "input" });
expect(input).not.toHaveAttribute("aria-invalid");
});

test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
render(<PasswordInput />);
const input = screen.getByLabelText(/패스워드/, { selector: "input" });
expect(input).not.toHaveAttribute("aria-required");
});

test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => {
render(<PasswordInput required />);
const input = screen.getByLabelText(/패스워드/, { selector: "input" });
expect(input).toHaveAttribute("aria-required", "true");
});

test("required가 false일 때 aria-required 속성이 올바르게 설정된다", () => {
render(<PasswordInput required={false} />);
const input = screen.getByLabelText(/패스워드/, { selector: "input" });
expect(input).not.toHaveAttribute("aria-required");
});

test("키보드(Space/Enter)로 가시성을 토글할 수 있다", async () => {
const user = userEvent.setup();
render(<PasswordInput />);
Expand Down
2 changes: 2 additions & 0 deletions src/components/PasswordInput/PasswordInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export interface PasswordInputProps extends Omit<
*/
export function PasswordInput({
invalid = false,
required = false,
disabled = false,
placeholder = "패스워드를 입력해주세요.",
ref,
Expand Down Expand Up @@ -50,6 +51,7 @@ export function PasswordInput({
className={inputStyles()}
aria-label="패스워드"
aria-invalid={invalid ? true : undefined}
aria-required={required ? true : undefined}
{...rest}
/>
<button
Expand Down
94 changes: 46 additions & 48 deletions src/components/RadioGroup/RadioGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,35 +41,43 @@ export const WithDefaultValue: Story = {
};

export const Orientation: Story = {
render: () => {
render: (args) => {
return (
<div
className={css({ display: "flex", flexDirection: "column", gap: "32" })}
>
<RadioGroup
{...args}
Copy link
Member

@DaleSeo DaleSeo Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

나이스 캐치!

name="vertical-orientation"
label="세로 방향 (Vertical)"
orientation="vertical"
defaultValue="apple"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>

<RadioGroup
{...args}
name="horizontal-orientation"
label="가로 방향 (Horizontal)"
orientation="horizontal"
defaultValue="banana"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>
</div>
);
},
argTypes: {
name: {
control: false,
},
label: {
control: false,
},
orientation: {
control: false,
},
defaultValue: {
control: false,
},
},
Comment on lines +67 to +80
Copy link
Member

@DaleSeo DaleSeo Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@hyoseong1994 hyoseong1994 Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

};

export const GroupDisabled: Story = {
Expand Down Expand Up @@ -115,79 +123,69 @@ export const ItemDisabled: Story = {
};

export const Tones: Story = {
render: () => {
render: (args) => {
return (
<div
className={css({ display: "flex", flexDirection: "column", gap: "32" })}
>
<RadioGroup
{...args}
name="neutral-tone"
label="중립 색조 (Neutral)"
defaultValue="apple"
tone="neutral"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>

<RadioGroup
{...args}
name="brand-tone"
label="브랜드 색조 (Brand)"
defaultValue="apple"
tone="brand"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>

<RadioGroup
{...args}
name="danger-tone"
label="위험 색조 (Danger)"
defaultValue="apple"
tone="danger"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>

<RadioGroup
{...args}
name="warning-tone"
label="경고 색조 (Warning)"
defaultValue="apple"
tone="warning"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>

<RadioGroup
{...args}
name="success-tone"
label="성공 색조 (Success)"
defaultValue="apple"
tone="success"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>

<RadioGroup
{...args}
name="info-tone"
label="정보 색조 (Info)"
defaultValue="apple"
tone="info"
>
<Radio value="apple">사과</Radio>
<Radio value="banana">바나나</Radio>
<Radio value="orange">오렌지</Radio>
</RadioGroup>
/>
</div>
);
},
argTypes: {
name: {
control: false,
},
label: {
control: false,
},
tone: {
control: false,
},
},
args: {
defaultValue: "apple",
},
};

export const Controlled = () => {
Expand Down
22 changes: 20 additions & 2 deletions src/components/Select/Select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,16 @@ describe("상태 관리", () => {
});

describe("접근성 및 기타", () => {
test("invalid가 true일 때 오류 메시지가 표시된다", () => {
test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(
<Select placeholder="라이브러리를 선택하세요">
<option value="react">React</option>
</Select>,
);
expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-invalid");
});

test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(
<Select invalid placeholder="라이브러리를 선택하세요">
<option value="react">React</option>
Expand All @@ -446,7 +455,7 @@ describe("접근성 및 기타", () => {
);
});

test("invalid가 false일 때 오류 메시지가 표시되지 않는다", () => {
test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => {
render(
<Select invalid={false} placeholder="라이브러리를 선택하세요">
<option value="react">React</option>
Expand All @@ -455,6 +464,15 @@ describe("접근성 및 기타", () => {
expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-invalid");
});

test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
render(
<Select placeholder="라이브러리를 선택하세요">
<option value="react">React</option>
</Select>,
);
expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-required");
});

test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => {
render(
<Select required placeholder="라이브러리를 선택하세요">
Expand Down
Loading