Known-date component validation bugs fixed

この PR は実験的コンポーネント <wa-known-date> のバリデーション挙動を根本的に修正し、インラインエラーメッセージを廃止し、ブラウザの ネイティブ制約バリデーション に統合、さらにフォーカスが誤ったフィールドに当たっていた問題を解消します。

背景

従来、<wa-known-date> は入力中に インラインエラーメッセージ を表示し、無効な月・日・年が入力された際には常に最初のフィールドへフォーカスが移動していました。これはユーザーがどの部分を修正すべきか直感的に把握できず、他のフォームコントロールと挙動が統一されていないという実用上の課題でした。関連するドキュメント (known-date.md) でも「バリデーションがフィールド下に表示される」旨が記載されており、実装と乖離していました。

技術的な変更

PartialDateValidator のロジックが刷新され、数字が入力されているが有効な日付に組み立てられない場合は badInput を返すようになりました。空入力は有効とし、必須チェックは新たに追加された RequiredValidator に委譲します。変更前後の差分は次の通りです。

@@ -2,40 +2,33 @@
- * Reports validity for the three-field model:
- *  - Partially filled (some but not all fields): `valueMissing` with a clearer message.
- *  - Fully filled but not a real calendar date (e.g. day 32, month 13, Feb 30): `badInput`, since the entry
- *    can't compose to a canonical value.
- * The empty + required case is left to the mirror validator so we inherit the browser-localized native
- * "Please fill out this field" message.
+ * Reports `badInput` for any entry that has digits but doesn't compose to a canonical date — a partially
+ * filled set of fields (some but not all) or a complete-but-impossible combination (e.g. day 32, month 13,
+ * Feb 30). Like `<wa-time-input>`, this surfaces through the native constraint validation flow (the browser
+ * popup on submit), not as live inline messaging.

RequiredValidator が validators 配列に追加され、PartialDateValidator の後に配置されました。これにより、部分的または範囲外の入力は badInput が優先され、必須チェックのメッセージが上書きされません。配列の新しい順序は以下のコードで確認できます。

static get validators() {
  const validators = isServer
+    ? []
+    : [
+        PartialDateValidator(),
+        RequiredValidator({
+          validationElement: Object.assign(document.createElement('input'), { required: true }),
+        }),
+        MirrorValidator(),
+      ];
  return validators;
}

known-date.styles.ts からインラインエラーパート ([part~='error']) が削除され、スタイルがシンプル化されました。これに伴い、CSS での表示ロジックは不要となり、ブラウザのバリデーションポップアップに委ねられます。

テスト (known-date.test.ts) も同様に更新され、badInput フラグの検証や aria-invalid="true" の付与が期待通りに動作することを確認しています。エラー領域の hidden 判定は削除されました。

翻訳ファイル全般 (translations/*.ts) でも incompleteDate 文言が「Enter a complete date.」から「Enter a valid date.」へ統一され、ユーザー向けメッセージが実装と整合しています。

設計判断

バリデーションを ネイティブ制約フロー に統合した設計は、既存の MirrorValidator と組み合わせて最小限のカスタムロジックで済む点が選択理由です。PartialDateValidator を先頭に置くことで、部分入力や不正日付が badInput として即座に報告され、RequiredValidator の必須エラーメッセージが不適切に優先されるケースを防止しています。インラインエラーメッセージを廃止し、スタイルからも削除したことは、DOM の負荷軽減とアクセシビリティ向上につながりますが、同時に firstInvalidField や validationTarget が内部で正しいフィールドへのフォーカスを実装している点が重要です。この変更は UI の一貫性とコードベースのシンプル化というトレードオフを意識した結果です。

まとめ

本 PR は <wa-known-date> のバリデーションロジックと UI をブラウザ標準に合わせ、誤ったインラインエラーとフォーカスバグを解消しました。バリデータの順序変更、スタイルの削除、翻訳メッセージの統一により、コンポーネントは他のフォーム要素と同等の挙動を示すようになり、開発者とエンドユーザーの双方にとって扱いやすくなります。