AI に銀行の振込フローを作らせてみた — 業界特有の画面が、2回前のフォームの隠れ a11y バグを炙り出した（やってみた #32）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は読者の発案で 業界特有の画面 = 日本のネットバンキングの振込フロー（振込元口座→振込先→金額→確認→本人確認→結果）。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。金額の桁区切り・口座番号マスキング・残高不足チェック・本人確認…金融特有の制約は、汎用画面では当たらない。

結果 — 4/5

tsc/build 緑・console 0・375px と desktop 検証済み・全フィールドの error が aria 連携。

この回の主役 — 厳格な金融フォームが、隠れていた a11y バグを暴いた

#29→#30 で作り込んだ Form system（FormField/FormControl が id/aria を自動配線）は、#30 の cold AI に「本物」と認定された。その2回あと、銀行フォームで実バグが出た:

🔴 FormControl が、FormDescription の無いフィールドにも aria-describedby="…-description" を注入していた — 存在しない id を指す。axe が弾く ARIA バグ。

振込フォームには 説明文の無いフィールド（銀行名・支店名・口座種別）が大量にある。説明文を毎フィールドに付ける汎用デモでは絶対に出ない穴が、金融という業界特有の「説明レス項目だらけ」の画面で初めて露出した。

直し（#175・同 PR で land）

FormField が子に FormDescription が在るかを見て、在るときだけ description id を予約。無ければ context は undefined ＝ FormControl が落とす。レンダー時決定で SSR/hydration 安全。ブラウザ実証: docs の説明レス3コントロールが aria-describedby: null（dangling ゼロ）に。

「業界特有」は別レイヤーの穴を出す

読者の直感どおりだった。汎用画面（設定・EC・ダッシュボード）では出なかった穴が、銀行フォームで噴き出した:

• 🟠 金額入力の primitive が無い — NumberInput は <input type=number> で 1,000,000（桁区切り）を表現できない。¥ プレフィックスも locale も無し。全 EC/請求/銀行画面の主役なのに手巻き（#176・最大の穴・Codex）。
• 🟠 マスク表示（普通 ****1234）の primitive 無し（#177）／確認サマリの DescriptionList 無し（#178）。
• 🟠 Stepper が非インタラクティブ（#157 再確認）／検証 state 層が無い（#166 再確認）。

それでも土台は強い — 複利は続く

cold AI が名指しで褒めたのは、また前ラウンドまでの修正だった:

• Form/FormField が standout:「wired フィールドに手書き aria はゼロ。4つの invalid が各 role=alert に describedby」。
• Select label(#164)・RadioGroupItem label(#162)・CardTitle/AlertTitle as(#116/#163)・StatusScreen headingLevel(#104)・PasswordInput（PIN を a11y ツリーに漏らさない） を全部称賛。
• ダークも自動で反転（bg-card 白→rgb(2,8,23)）。

学び

汎用デモ: 全フィールドに説明文 → バグは隠れたまま
業界特有(銀行): 説明レス項目だらけ → 隠れバグが露出

「使う業界」を変えると、コードの別の面が試される。 母艦の主張「ハードな2割を担保する」を、断定でなくこうして1つずつ実証していく。

次回予告（やってみた #33）

• 保険/医療フォーム / 物流トラッキング / POS など別業界。業界を変えるほど穴が出る。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#31
• GunjoUI by UIXHERO

まだ alpha。業界を変えたら、隠れていたバグが出た回。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->