diff --git a/src/shared/ui/form-control/FormControlLabel.tsx b/src/shared/ui/form-control/FormControlLabel.tsx index c2561c9..3ffbd94 100644 --- a/src/shared/ui/form-control/FormControlLabel.tsx +++ b/src/shared/ui/form-control/FormControlLabel.tsx @@ -19,7 +19,7 @@ import type { FormControlLabelProps } from './FormControl.types'; * ### 접근성 * * 필수 표시 `*`는 장식 요소이므로 스크린 리더에서 제외합니다. 실제 필수 상태는 Root와 - * 연결된 Field의 네이티브 `required` 및 `aria-required` 속성으로 전달합니다. + * 연결된 Field의 네이티브 `required` 속성으로 전달합니다. * * @param children - 입력 요소의 목적을 설명하는 Label 문구 * @param className - 공통 Label 스타일을 확장하는 클래스 이름 diff --git a/src/shared/ui/input/Input.types.ts b/src/shared/ui/input/Input.types.ts index 8c0264a..2e21068 100644 --- a/src/shared/ui/input/Input.types.ts +++ b/src/shared/ui/input/Input.types.ts @@ -40,7 +40,7 @@ interface InputFieldGroupProps extends ComponentPropsWithoutRef<'div'> { */ interface InputFieldProps extends Omit< ComponentPropsWithRef<'input'>, - 'aria-errormessage' | 'aria-invalid' | 'disabled' | 'id' | 'readOnly' | 'required' | 'type' + 'aria-errormessage' | 'aria-invalid' | 'disabled' | 'id' | 'required' | 'type' > { type?: InputType; } diff --git a/src/shared/ui/input/InputErrorMessage.tsx b/src/shared/ui/input/InputErrorMessage.tsx index ed27d68..6401133 100644 --- a/src/shared/ui/input/InputErrorMessage.tsx +++ b/src/shared/ui/input/InputErrorMessage.tsx @@ -11,8 +11,8 @@ import type { InputErrorMessageProps } from './Input.types'; * * ### 접근성 * - * `role="alert"`로 오류를 알리고 Field의 `aria-describedby` 및 `aria-errormessage`와 - * 자동으로 연결합니다. 사용자가 수정할 수 있는 구체적인 메시지를 전달합니다. + * `role="alert"`로 오류를 알리고 Field의 `aria-errormessage`와 자동으로 연결합니다. + * 사용자가 수정할 수 있는 구체적인 메시지를 전달합니다. * * @param children - 유효성 검증 오류 메시지 * @param className - ErrorMessage의 기본 스타일을 확장하는 클래스 이름 diff --git a/src/shared/ui/input/InputField.tsx b/src/shared/ui/input/InputField.tsx index 6d50b54..5737a1e 100644 --- a/src/shared/ui/input/InputField.tsx +++ b/src/shared/ui/input/InputField.tsx @@ -43,7 +43,6 @@ export function InputField({ className, ref, type = 'text', ...props }: InputFie {...props} aria-errormessage={ariaErrorMessageId} aria-invalid={invalid || undefined} - aria-required={required || undefined} className={cn( 'h-16.75', fieldBaseClassName, diff --git a/src/shared/ui/input/InputLabel.tsx b/src/shared/ui/input/InputLabel.tsx index 0b531a4..367f299 100644 --- a/src/shared/ui/input/InputLabel.tsx +++ b/src/shared/ui/input/InputLabel.tsx @@ -11,8 +11,8 @@ import type { InputLabelProps } from './Input.types'; * * ### 접근성 * - * 필수 표시 `*`는 장식 요소로 숨기고 실제 필수 상태는 Field의 네이티브 `required`와 - * `aria-required`로 전달합니다. + * 필수 표시 `*`는 장식 요소로 숨기고 실제 필수 상태는 Field의 네이티브 `required`로 + * 전달합니다. * * @param children - Field의 목적을 설명하는 Label 문구 * @param className - Label의 기본 스타일을 확장하는 클래스 이름 diff --git a/src/shared/ui/textarea/TextArea.types.ts b/src/shared/ui/textarea/TextArea.types.ts index 573b12e..cf3188e 100644 --- a/src/shared/ui/textarea/TextArea.types.ts +++ b/src/shared/ui/textarea/TextArea.types.ts @@ -51,13 +51,13 @@ type TextAreaLengthProps = type TextAreaFieldProps = TextAreaFieldBaseProps & TextAreaLengthProps; /** Label은 Root가 제공하는 id와 required 상태를 상속합니다. */ -type TextAreaLabelProps = Omit, 'htmlFor'> & { +interface TextAreaLabelProps extends Omit, 'htmlFor'> { children: ReactNode; -}; +} /** Root가 invalid일 때 유효성 검증 오류를 표시하는 문구입니다. */ -type TextAreaErrorMessageProps = Omit, 'id'> & { +interface TextAreaErrorMessageProps extends Omit, 'id'> { children?: ReactNode; -}; +} export type { TextAreaErrorMessageProps, TextAreaFieldProps, TextAreaLabelProps, TextAreaProps }; diff --git a/src/shared/ui/textarea/TextAreaField.tsx b/src/shared/ui/textarea/TextAreaField.tsx index d502cf7..8cc6010 100644 --- a/src/shared/ui/textarea/TextAreaField.tsx +++ b/src/shared/ui/textarea/TextAreaField.tsx @@ -44,7 +44,6 @@ export function TextAreaField({ const isControlled = value !== undefined; const currentLength = isControlled ? getValueLength(value) : uncontrolledLength; const countId = `${fieldId}-character-count`; - const describedBy = showCount ? countId : undefined; const ariaErrorMessageId = invalid && hasErrorMessage ? errorMessageId : undefined; const hasReachedMaxLength = maxLength !== undefined && currentLength >= maxLength; const hasExceededRecommendedLength = @@ -76,10 +75,9 @@ export function TextAreaField({