feat(config-converter): JSON Schema 検証パネルに Cmd/Ctrl+Enter ショートカットを追加

[fumtas1k]

概要

JSON Schema 検証パネルのスキーマ textarea にフォーカスした状態で Cmd+Enter（Mac）/ Ctrl+Enter（Windows/Linux）を押すと検証が実行されるキーボードショートカットを追加します。

変更内容

• src/components/ui/InputField.tsx
  • optional な onKeyDown prop を追加し、<textarea> / <input> 両方に forward
• src/components/tools/ConfigConverter.tsx
  • スキーマ用 InputField に onKeyDown ハンドラを追加
  • ボタンの disabled 条件（!output || !schemaText || isValidating）と完全に一致させてショートカットのガードを実装
  • ボタン横に "Cmd/Ctrl+Enter" のヒントテキストを追加（caption + colors.muted を使用）

テスト

• npm run test: 256 件 pass
• npm run test:e2e: 127 件 pass（1 skipped）
• 新規 E2E テスト 1 件追加
  • スキーマ textarea にフォーカスした状態で Meta+Enter / Control+Enter を送信し、スキーマ検証成功メッセージが表示されることを確認

Closes #137

[cloudflare-workers-and-pages]

Deploying devtools with    Cloudflare Pages

Latest commit:	66fedb8
Status:	✅  Deploy successful!
Preview URL:	https://88fac5de.devtools-d9w.pages.dev
Branch Preview URL:	https://feat-137-config-converter-sc.devtools-d9w.pages.dev

View logs

[fumtas1k]

レビュー概要

JSON Schema 検証パネルのスキーマ textarea にフォーカスした状態で Cmd/Ctrl+Enter で検証を実行できるショートカットを追加する PR です。Issue #137 の要件をスコープどおりに実装しており、変更は 53 行 / 0 削除と最小限。InputField への onKeyDown 追加、ConfigConverter 側のハンドラ実装、ヒント文字列追加、E2E テスト 1 件追加で構成されています。

良い点

• InputField.tsx の変更が破壊的変更でない（optional prop の追加のみ）。textarea / input の双方に forward しており、他ツールでも再利用可能な汎用拡張になっている。
• ショートカット発火条件 !output || !schemaText || isValidating がボタン disabled 条件と完全に一致しており、ボタン押下時とキーボード操作時の挙動が一貫する。e.preventDefault() をガード後に置いて textarea の改行抑制も正しく実装されている。
• ヒントテキストが Tailwind カラークラスではなく caption + colors.muted を使用しており、docs/shared-agent-rules.md 7 章のスタイルルールに準拠している。
• E2E テストで process.platform === 'darwin' を判別して Meta+Enter / Control+Enter を出し分けており、CI / ローカル双方で動作する設計になっている。Issue feat(config-converter): JSON Schema 検証パネルに Cmd/Ctrl+Enter ショートカットを追加 #137 の AC（ショートカットによる検証実行）も検証されている。
• コミットメッセージ・PR 説明文・テストコメントいずれも日本語で記述されており、6 章のルールに準拠。

指摘事項

🔴 必須（Must）

特になし。機能・規約遵守ともに合格水準。

🟡 推奨（Should）

1. IME 変換確定 Enter での誤発火リスク

日本語 IME で変換確定のために Enter を押した瞬間 metaKey/ctrlKey を同時に押している状況は通常ないため実害は低いものの、IME 関連は OS / ブラウザ実装差が大きく、念のため e.nativeEvent.isComposing のガードを入れておくと安全です。

onKeyDown={(e) => {
  if (e.nativeEvent.isComposing) return;
  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
    if (!output || !schemaText || isValidating) return;
    e.preventDefault();
    handleValidate();
  }
}}

スキーマ JSON は通常コピペ前提で日本語入力する場面はほぼないため、本 PR スコープ外として別 issue 化（docs/shared-agent-rules.md 6.4 に従う）でも構いません。

2. ヒントテキストとボタンの関連付け（アクセシビリティ）

<span style={{ ...caption, color: colors.muted }}>Cmd/Ctrl+Enter</span> は視覚的にショートカットを示しますが、スクリーンリーダ利用者には「ボタンに紐づくショートカット」という関係が伝わりません。以下のいずれかを推奨します。

• 検証ボタンに aria-keyshortcuts="Meta+Enter Control+Enter" を付与（W3C ARIA 1.2 準拠の値形式）
• もしくは span に id を持たせ、ボタンの aria-describedby にその id を指定

ヒント span は装飾的なので aria-hidden="true" を併用するとさらに整理されます。

3. プラットフォーム判定によるヒント表記の最適化（軽微）

ヒントテキストが常に Cmd/Ctrl+Enter と両表記になっていますが、Windows ユーザーには Cmd が冗長で、Mac ユーザーには Ctrl が冗長です。navigator.platform または navigator.userAgent から判定して片側だけ出す方が UX 上わかりやすいです。ただし Issue #137 にこの要件はないため、対応は任意です。SSR (Astro) では hydration 後に判定する必要がある点に注意してください。

🟢 提案（Nit）

1. ハンドラのインライン化と useCallback 化

現状 onKeyDown ハンドラは JSX 内インライン定義されており、schemaText 等の state 変化のたびに新しい関数が生成されます。InputField は memo 化されていないため実害はありませんが、将来 InputField を React.memo で最適化する場合に備え、useCallback 化または関数として切り出しておくとキレイです。優先度は低いです。

2. ヒント span のセマンティクス

<kbd> 要素を使うと「キーボード入力」というセマンティクスが伝わり、ブラウザのデフォルトスタイル（等幅フォント・枠線）も付与されます。

<kbd style={{ ...caption, color: colors.muted, fontFamily: 'monospace' }}>
  Cmd/Ctrl+Enter
</kbd>

スタイルポリシーには反しないため、見た目を整える方向の改善案としてご検討ください。

3. E2E テストの待機方法

page.waitForFunction で textarea[readonly] の値が "name" を含むまで待機していますが、既存テスト群（64 行目以降）は expect(page.getByLabel('JSON', { exact: true })).not.toHaveValue('') のように Playwright の retry 付き assertion で記述されています。プロジェクト内の慣習に揃えると一貫性が増します。

await expect(page.getByLabel('JSON', { exact: true })).toHaveValue(/"name"/);

テスト

• 新規 E2E ケース 1 件で「ショートカットによる検証成功」を検証しており、Issue feat(config-converter): JSON Schema 検証パネルに Cmd/Ctrl+Enter ショートカットを追加 #137 の AC をカバー。
• 一方で次のケースは未カバーです。スコープ判断としては妥当ですが、追加可能であれば堅牢性が増します。
  • disabled 条件下（output 未生成 or schemaText 空）でショートカットを送信しても検証が走らないこと
  • 通常の Enter（修飾キーなし）では改行のみが入り、検証が走らないこと
• npm run test 256 件 / npm run test:e2e 127 件 pass の記載あり。差分はキーボード経路の追加のみで、既存ロジックへの影響は限定的。

総合的に、規約遵守・実装の正確さ・テストカバレッジともに必要水準を満たしており、必須の修正項目はありません。Should 項目（特に IME ガードと aria-keyshortcuts）は次回以降のブラッシュアップ対象として検討してください。

[fumtas1k]

Should 1〜2 および Nit 2〜3 を対応しました（コミット c2b36be）。

• e.nativeEvent.isComposing ガードを追加（IME 変換確定 Enter での誤発火防止）
• 検証ボタンに aria-keyshortcuts="Meta+Enter Control+Enter" を付与
• ヒントテキスト span に aria-hidden="true" を追加
• <span> → <kbd style={{ fontFamily: 'monospace' }}> に変更（キーボード入力のセマンティクス）
• E2E の waitForFunction → expect(page.getByLabel('JSON', { exact: true })).toHaveValue(/"name"/) に置換

Should 3（プラットフォーム別ヒント表記）は Issue #137 のスコープ外かつ SSR hydration の考慮が必要なため今回は見送りました。
Nit 1（useCallback 化）は InputField が未 memo 化のため現時点では実効性がなく、優先度低として保留します。

[fumtas1k]

再レビュー結果

最新差分（+57 / -0）と該当コミット c2b36be fix(config-converter): レビュー指摘対応（isComposing ガード・アクセシビリティ・E2E 修正） を確認しました。

前回指摘事項の対応状況

🟡 推奨

• [✅] IME ガード: if (e.nativeEvent.isComposing) return; がハンドラ冒頭に追加され、Cmd/Ctrl+Enter 判定の前段で確実に短絡している。位置・条件ともに想定どおり。
• [✅] aria-keyshortcuts: 「検証する」ボタンに aria-keyshortcuts="Meta+Enter Control+Enter" を付与済み。値も W3C ARIA 1.2 準拠（修飾子 + キー名、複数はスペース区切り）。
• [⏭️] Mac/Win ヒント表記の出し分け: 採用見送り。Astro の SSR / hydration を考慮するとコストが見合わないため、両表記据え置きは妥当な判断。

🟢 提案

• [⏭️] useCallback 化: 採用見送り。InputField は memo 化されておらず実害がないため、現状の判断に同意。
• [✅] <kbd> 要素: span → <kbd> に変更され、aria-hidden="true" も併用されており、視覚的・スクリーンリーダ双方で意図どおりに機能する形。fontFamily: 'monospace' も明示されている。
• [✅] E2E 待機方法の統一: page.waitForFunction(...) を await expect(page.getByLabel('JSON', { exact: true })).toHaveValue(/"name"/) に置き換え、既存テスト群と一貫したパターンに揃った。

追加の指摘

確認した範囲では新規問題なし。 補足として小さな観察のみ:

• aria-keyshortcuts と <kbd aria-hidden> の組み合わせは ARIA Authoring Practices と一致しており、スクリーンリーダ利用者とそれ以外の利用者で重複読み上げを避ける構成として適切。
• ヒント要素はボタンの右隣に配置されているが、<kbd> のデフォルト styling（ブラウザ依存）は等幅フォントを継承しつつ枠線等は付かない実装が多いため、現状のインラインスタイルで OS 間差異を吸収できている。
• e.nativeEvent.isComposing のガードは React の KeyboardEvent 型では isComposing が直接生えていないため nativeEvent 経由参照が必須で、書き方として適切。

前回挙げた E2E カバレッジの未補填項目（disabled 条件下 / 修飾なし Enter）は本 PR では追加されていないが、Issue #137 の AC 範囲外であり、スコープ判断として妥当。必要なら別 issue 化が docs/shared-agent-rules.md 6.4 に沿った扱い。

総評

前回の 🟡 推奨 3 件のうち実質対応すべき 2 件（IME・aria-keyshortcuts）が両方対応済み、🟢 提案 3 件のうち採用された 2 件（kbd・E2E 統一）も実装品質が水準を満たしている。残りの見送り項目（Mac/Win 出し分け・useCallback）も判断として合理的。

マージ可能と判断します。 追加対応は不要です。