chore: storybookのInputのerror表示にミスがあったため調整する

[AtsushiM]

関連URL

概要

変更内容

確認方法

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@4977

commit: f6561bd

[uknmr]

Chromatic も差分出てなさそうですが、どのあたりにミスがあるんですか?

[Qs-F]

まだ表示されてないかもです…？

[uknmr]

Input だけ error にすることはないにしても、コンポーネントとして error が渡ってきたときは赤枠になる挙動を残しても良いように思いました。
FormControl で aria-invalid を消し込む必要がないかもしれません。

smarthr-ui/packages/smarthr-ui/src/components/FormControl/FormControl.tsx

Lines 244 to 245 in ab62d9b

	} else {
	input.removeAttribute('aria-invalid')

[AtsushiM]

@uknmr

FormControl で aria-invalid を消し込む必要がないかもしれません。

FormControlでエラー表示を正しくするためには以下の処理が必要です。

• FormControlにerrorMessagesが設定された場合、aria-invalidを設定する

上記仕様は別の言い方をすれば

• FormControlにerrorMessagesが設定されなかった場合、aria-invalidを削除する

必要があります。
(例えば エラー表示 -> エラー解決でメッセージがなくなる などの遷移をした場合、エラーを消さなければならない)

error propsが指定された場合、そちらを優先するならば 内部コンポーネントでerrorが指定されていること がわかるような属性、例えばdata-force-errorとかが存在するかどうかを判定する必要がありそうです。
aria-invalidはFormControl or Input自体のどちらからでも設定されうるため、どちらで設定されたのかが判定できないためです。

そこまでやる必要があるかどうかが論点になりそうですね

[AtsushiM]

@Qs-F すいません！true | false 間違えていました！