UI v0.19.2 Field접근성개선 - #36

React.Fragment가 children으로 전달될 때의 런타임 경고를 방지하기 위해 Fragment 타입을 체크할 수 있도록 Fragment를 import 목록에 추가합니다.

개선 제안 및 고려사항

1. Fragment 방어 코드 추가: children이 단일 요소이지만 <React.Fragment>인 경우, cloneElement로 HTML 속성(id, aria-*)을 주입하면 런타임 경고가 발생합니다. child.type !== Fragment 조건을 추가하여 이를 방지하는 것이 안전합니다.
2. 기존 aria 속성 보존: 자식 요소가 이미 자체적으로 aria-describedby나 aria-invalid 속성을 가지고 있을 수 있습니다. 현재 방식은 이를 완전히 덮어쓰므로, 기존 속성이 있다면 이를 유지하거나 병합(aria-describedby인 경우 공백으로 구분하여 결합)하도록 개선하는 것이 좋습니다.
3. 커스텀 컴포넌트 전달 한계 (구조적 고려사항): DatePicker처럼 내부 대화형 요소(예: <button>)를 <div> 컨테이너로 감싸고 ...props를 컨테이너에 스프레드하는 컴포넌트의 경우, id와 aria-* 속성이 실제 버튼이 아닌 최상위 <div>에 부여됩니다. 이로 인해 라벨 클릭 시 포커스가 가지 않거나 스크린 리더 접근성이 깨질 수 있습니다. 향후 DatePicker 등 커스텀 입력 컴포넌트들이 id 및 aria-* 속성을 내부 대화형 요소로 전달하도록 수정하는 작업을 함께 검토해 주세요.

    const child = Children.only(children)
    if (isValidElement<InjectedInputProps>(child) && child.type !== Fragment) {
      inputId = child.props.id ?? inputId
      const existingDescribedBy = child.props['aria-describedby']
      content = cloneElement(child, {
        id: inputId,
        'aria-describedby': hasMessage
          ? (existingDescribedBy ? `${existingDescribedBy} ${messageId}` : messageId)
          : existingDescribedBy,
        'aria-invalid': error ? true : child.props['aria-invalid'],
      })
    }