Merge pull request #724 from DaleStudy/645-aria-invalid-and-required

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

Author: hyoseong1994

src/components/Checkbox/Checkbox.test.tsx

@@ -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");
@@ -142,16 +148,22 @@ describe("렌더링", () => {
     ).not.toBeInTheDocument();
   });
 
-  test("required가 true이면 aria-required가 true로 설정된다.", () => {
+  test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
+    render(<Checkbox label="일반 체크박스" />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toHaveAttribute("aria-required", "false");
+  });
+
+  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");
+    expect(checkbox).toHaveAttribute("aria-required", "false");
   });
 });
 

src/components/Checkbox/Checkbox.tsx

@@ -45,7 +45,7 @@ export const Checkbox = ({
   checked,
   defaultChecked,
   disabled,
-  invalid,
+  invalid = false,
   tone = "brand",
   required = false,
   onChange,
@@ -111,10 +111,7 @@ export const Checkbox = ({
           )}
         </ArkCheckbox.Label>
       )}
-      <ArkCheckbox.HiddenInput
-        data-test-tone={tone}
-        aria-required={required ? true : undefined}
-      />
+      <ArkCheckbox.HiddenInput data-test-tone={tone} aria-required={required} />
     </ArkCheckbox.Root>
   );
 };

src/components/PasswordInput/PasswordInput.test.tsx

@@ -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).toHaveAttribute("aria-invalid", "false");
+});
+
+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).toHaveAttribute("aria-invalid", "false");
+});
+
+test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
+  render(<PasswordInput />);
+  const input = screen.getByLabelText(/패스워드/, { selector: "input" });
+  expect(input).toHaveAttribute("aria-required", "false");
+});
+
+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).toHaveAttribute("aria-required", "false");
+});
+
 test("키보드(Space/Enter)로 가시성을 토글할 수 있다", async () => {
   const user = userEvent.setup();
   render(<PasswordInput />);

src/components/PasswordInput/PasswordInput.tsx

@@ -23,6 +23,7 @@ export interface PasswordInputProps extends Omit<
  */
 export function PasswordInput({
   invalid = false,
+  required = false,
   disabled = false,
   placeholder = "패스워드를 입력해주세요.",
   ref,
@@ -49,7 +50,8 @@ export function PasswordInput({
         disabled={disabled}
         className={inputStyles()}
         aria-label="패스워드"
-        aria-invalid={invalid ? true : undefined}
+        aria-invalid={invalid}
+        aria-required={required}
         {...rest}
       />
       <button

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -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}
           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,
+    },
+  },
 };
 
 export const GroupDisabled: Story = {
@@ -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 = () => {

src/components/Select/Select.test.tsx

@@ -434,7 +434,19 @@ describe("상태 관리", () => {
 });
 
 describe("접근성 및 기타", () => {
-  test("invalid가 true일 때 오류 메시지가 표시된다", () => {
+  test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => {
+    render(
+      <Select placeholder="라이브러리를 선택하세요">
+        <option value="react">React</option>
+      </Select>,
+    );
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-invalid",
+      "false",
+    );
+  });
+
+  test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => {
     render(
       <Select invalid placeholder="라이브러리를 선택하세요">
         <option value="react">React</option>
@@ -446,13 +458,28 @@ describe("접근성 및 기타", () => {
     );
   });
 
-  test("invalid가 false일 때 오류 메시지가 표시되지 않는다", () => {
+  test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => {
     render(
       <Select invalid={false} placeholder="라이브러리를 선택하세요">
         <option value="react">React</option>
       </Select>,
     );
-    expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-invalid");
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-invalid",
+      "false",
+    );
+  });
+
+  test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
+    render(
+      <Select placeholder="라이브러리를 선택하세요">
+        <option value="react">React</option>
+      </Select>,
+    );
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-required",
+      "false",
+    );
   });
 
   test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => {
@@ -473,7 +500,10 @@ describe("접근성 및 기타", () => {
         <option value="react">React</option>
       </Select>,
     );
-    expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-required");
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-required",
+      "false",
+    );
   });
 
   test("disabled 옵션이 있을 때 해당 옵션은 disabled 속성을 가진다", () => {

src/components/Select/Select.tsx

@@ -52,8 +52,8 @@ export function Select({
   value,
   defaultValue,
   disabled,
-  required,
-  invalid,
+  required = false,
+  invalid = false,
   clearButtonName,
   placeholder,
   children,
@@ -165,8 +165,8 @@ export function Select({
         onChange={handleChange}
         disabled={disabled}
         required={required}
-        aria-invalid={invalid ? true : undefined}
-        aria-required={required ? true : undefined}
+        aria-invalid={invalid}
+        aria-required={required}
         className={selectStyles({ invalid, showClearButton })}
         {...rest}
       >