refactor: aria-invalid, aria-required default false

Author: hyoseong1994

src/components/Checkbox/Checkbox.test.tsx

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

@@ -85,7 +85,7 @@ test("접근성 속성을 제공한다 (aria-label, aria-pressed)", async () =>
 test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => {
   render(<PasswordInput />);
   const input = screen.getByLabelText(/패스워드/, { selector: "input" });
-  expect(input).not.toHaveAttribute("aria-invalid");
+  expect(input).toHaveAttribute("aria-invalid", "false");
 });
 
 test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => {
@@ -97,13 +97,13 @@ test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다",
 test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => {
   render(<PasswordInput invalid={false} />);
   const input = screen.getByLabelText(/패스워드/, { selector: "input" });
-  expect(input).not.toHaveAttribute("aria-invalid");
+  expect(input).toHaveAttribute("aria-invalid", "false");
 });
 
 test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
   render(<PasswordInput />);
   const input = screen.getByLabelText(/패스워드/, { selector: "input" });
-  expect(input).not.toHaveAttribute("aria-required");
+  expect(input).toHaveAttribute("aria-required", "false");
 });
 
 test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => {
@@ -115,7 +115,7 @@ test("required가 true일 때 aria-required 속성이 올바르게 설정된다"
 test("required가 false일 때 aria-required 속성이 올바르게 설정된다", () => {
   render(<PasswordInput required={false} />);
   const input = screen.getByLabelText(/패스워드/, { selector: "input" });
-  expect(input).not.toHaveAttribute("aria-required");
+  expect(input).toHaveAttribute("aria-required", "false");
 });
 
 test("키보드(Space/Enter)로 가시성을 토글할 수 있다", async () => {

src/components/PasswordInput/PasswordInput.tsx

@@ -50,8 +50,8 @@ export function PasswordInput({
         disabled={disabled}
         className={inputStyles()}
         aria-label="패스워드"
-        aria-invalid={invalid ? true : undefined}
-        aria-required={required ? true : undefined}
+        aria-invalid={invalid}
+        aria-required={required}
         {...rest}
       />
       <button

src/components/Select/Select.test.tsx

@@ -440,7 +440,10 @@ describe("접근성 및 기타", () => {
         <option value="react">React</option>
       </Select>,
     );
-    expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-invalid");
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-invalid",
+      "false",
+    );
   });
 
   test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => {
@@ -461,7 +464,10 @@ describe("접근성 및 기타", () => {
         <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 속성이 올바르게 설정된다", () => {
@@ -470,7 +476,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("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => {
@@ -491,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}
       >

src/components/TextInput/TextInput.test.tsx

@@ -58,7 +58,7 @@ describe("TextInput", () => {
   test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => {
     render(<TextInput />);
     const inputElement = screen.getByRole("textbox");
-    expect(inputElement).not.toHaveAttribute("aria-invalid");
+    expect(inputElement).toHaveAttribute("aria-invalid", "false");
   });
 
   test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => {
@@ -70,13 +70,13 @@ describe("TextInput", () => {
   test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => {
     render(<TextInput invalid={false} />);
     const inputElement = screen.getByRole("textbox");
-    expect(inputElement).not.toHaveAttribute("aria-invalid");
+    expect(inputElement).toHaveAttribute("aria-invalid", "false");
   });
 
   test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => {
     render(<TextInput />);
     const inputElement = screen.getByRole("textbox");
-    expect(inputElement).not.toHaveAttribute("aria-required");
+    expect(inputElement).toHaveAttribute("aria-required", "false");
   });
 
   test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => {
@@ -88,7 +88,7 @@ describe("TextInput", () => {
   test("required가 false일 때 aria-required 속성이 올바르게 설정된다", () => {
     render(<TextInput required={false} />);
     const inputElement = screen.getByRole("textbox");
-    expect(inputElement).not.toHaveAttribute("aria-required");
+    expect(inputElement).toHaveAttribute("aria-required", "false");
   });
 
   test("leadingIcon과 trailingIcon이 제공될 때 올바르게 렌더링되어야 한다.", () => {

src/components/TextInput/TextInput.tsx

@@ -24,8 +24,8 @@ export interface TextInputProps extends Omit<
  * - `disabled` prop으로 비활성화 상태를 제어할 수 있으며, `state` prop을 통해 'error'와 같은 특정 상태를 표현할 수 있습니다.
  */
 export function TextInput({
-  invalid,
-  required,
+  invalid = false,
+  required = false,
   className,
   leadingIcon,
   trailingIcon,
@@ -57,8 +57,8 @@ export function TextInput({
         className={inputStyles()}
         ref={ref}
         disabled={disabled}
-        aria-invalid={invalid ? true : undefined}
-        aria-required={required ? true : undefined}
+        aria-invalid={invalid}
+        aria-required={required}
         {...rest}
       />
       {trailingIcon && renderIcon(trailingIcon)}