{extends:gui}

# フロントエンドポリシー

URL、HTML操作、通信状態、アクセシビリティ、ブラウザへ入出力する値を、実際の操作経路と画面の表示から判定する。

## URLと画面遷移

| 基準 | 判定 |
|------|------|
| 仕様で必要なURL、メニュー、リンクから画面を開け、「戻る・進む」で期待する表示に戻る | OK |
| pathやqueryの未指定・不正値・対象なし・権限不足を画面が区別する | OK |
| URLの値を読むのに、型、未指定、不正値の扱いがなく別の対象を表示する | REJECT |
| 画面の操作が、利用者の意図に合うリンクまたはボタンと履歴操作へつながる | OK |

## HTML操作とアクセシビリティ

| 基準 | 判定 |
|------|------|
| クリックできる見た目の要素に名前、キーボード操作、適切な要素またはroleがない | REJECT |
| formの入力とlabel、エラー、必須状態の関連がなく、何を入力すべきか分からない | REJECT |
| selected、expanded、checked、disabledなどの状態が支援技術へ伝わらず、利用者が現在の状態を把握できない | REJECT |
| モーダルダイアログやmenuを開いた後、focusの移動や閉じる操作、focusの戻り先がなく、操作を続けられない | REJECT |
| モーダルダイアログを開いている間にTabまたはShift+Tabで背景へ移動できる、または背景の操作要素をクリック・キーボード・ショートカットで操作できる | REJECT |
| 一覧の編集・削除操作で、どの行の対象か名前または関連付けから識別できない | REJECT |
| DOMのcapture/bubbleと画面への通知で、同じ操作を二度実行する | REJECT |
| 利用バージョンにないpropsを渡す、または生成される要素のname・role・state・操作が実装と合わず、表示・操作・読み上げが壊れる | REJECT |

accessible nameやroleを確認したかだけで判定せず、利用者が操作対象と状態を識別できるかを実装から見る。

## 通信状態と表示

| 基準 | 判定 |
|------|------|
| 未開始、読み込み中、成功、空、失敗、キャンセルを区別して表示する | OK |
| 読み込み中や失敗を空配列へ変換し、待つのか再試行するのか分からない | REJECT |
| 再試行を提供する場合に、失敗表示が対象と内容、現在の再試行の可否を示し、表示している再試行の対象・内容と実際の処理が一致する | OK |
| 失敗後に仕様上必要な操作を選べない、再試行を提供する場合に現在の状態では再試行できないのに実行可能に表示する、または表示している再試行の対象・内容と実際の処理が異なる | REJECT |
| form、click、keyboardなどの入口が同じ操作を二度実行・送信する | REJECT |

## データ取得、cache、ページング

| 基準 | 判定 |
|------|------|
| 利用者、tenant、URL、filter、sort、page、cursorなど結果を変える条件がcache keyや依存に入っている | OK |
| 結果を変える条件がkeyから抜け、別の利用者や画面のデータを共有する | REJECT |
| 更新後にinvalidation、再取得、または利用ライブラリの更新がなく、古いcache表示が残る | REJECT |
| cursorやoffsetの順序、filter、snapshotが合わず、ページの重複・欠落を処理できない | REJECT |
| 既存APIクライアントの型・認証・エラー処理を複製し、変更が片方へ反映されない | REJECT |

## ブラウザとサーバーの役割

| 基準 | 判定 |
|------|------|
| サーバーが管理・確定する在庫、決済、認可、業務状態を、クライアントの表示判断だけで確定したことにする | REJECT |
| 入力中の形式検証、表示filter、並べ替え、previewを画面の状態として扱う | OK |
| サーバーが返した許可操作や結果を表示し、操作をサーバーのcommandへ渡す | OK |
| 同じ業務判定を複数層で実装し、正しい結果と反映経路が分からない | REJECT |

## ブラウザ安全性

| 基準 | 判定 |
|------|------|
| ユーザー入力をHTML、script、style、URLへ渡す経路に、エスケープまたはサニタイズがない | REJECT |
| HTMLの直接挿入、外部遷移、Storage、Cookie、別オリジン通信の値の出所と許可範囲が読める | OK |
| CSRF、認証情報、機密情報の扱いが、ブラウザとサーバーの契約に合わない | REJECT |
| 未検証の入力を`innerHTML`や`eval`へ渡し、コードとして実行させる | REJECT |

## 例

変更前: モーダルダイアログを表示した後も背景のキーボード操作が処理担当へ届き、
        確認待ちの判断と競合する処理を開始する
変更後: モーダルダイアログを開いている間はフォーカスを内部に留め、背景のユーザー操作全体を抑止する

変更前: 失敗した対象を表示しながら、再試行操作には現在選択中の別の対象を渡す
変更後: 失敗した対象と現在の状態から失敗内容と再試行可否を決め、表示している再試行の対象・内容と実際の処理を一致させる