[♻️ Refactor/#45] 폼 필드 불필요 코드 정리

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 스타일을 확장하는 클래스 이름

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;
 }

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의 기본 스타일을 확장하는 클래스 이름

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,

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의 기본 스타일을 확장하는 클래스 이름

src/shared/ui/textarea/TextArea.types.ts

@@ -51,13 +51,13 @@ type TextAreaLengthProps =
 type TextAreaFieldProps = TextAreaFieldBaseProps & TextAreaLengthProps;
 
 /** Label은 Root가 제공하는 id와 required 상태를 상속합니다. */
-type TextAreaLabelProps = Omit<ComponentPropsWithoutRef<'label'>, 'htmlFor'> & {
+interface TextAreaLabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'htmlFor'> {
   children: ReactNode;
-};
+}
 
 /** Root가 invalid일 때 유효성 검증 오류를 표시하는 문구입니다. */
-type TextAreaErrorMessageProps = Omit<ComponentPropsWithoutRef<'p'>, 'id'> & {
+interface TextAreaErrorMessageProps extends Omit<ComponentPropsWithoutRef<'p'>, 'id'> {
   children?: ReactNode;
-};
+}
 
 export type { TextAreaErrorMessageProps, TextAreaFieldProps, TextAreaLabelProps, TextAreaProps };

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({
     <div className="relative w-full">
       <textarea
         {...props}
-        aria-describedby={describedBy}
+        aria-describedby={showCount ? countId : undefined}
         aria-errormessage={ariaErrorMessageId}
         aria-invalid={invalid || undefined}
-        aria-required={required || undefined}
         className={cn(
           'textarea-scrollbar block min-h-81.75 resize-y py-5',
           showCount ? 'pb-12' : undefined,