status · @awesome-ds/react
Progress
処理の完了割合を示す進捗バー。
状態マトリクス
未開始
進行中
完了
構造
- ラベル
- 進捗トラック
- 進捗量
キーボード操作契約
操作対象にせず、進捗更新によってフォーカスを移動しません。
スクリーンリーダー契約
処理名、現在値、最小値、最大値をprogressbarとして通知します。
コンテンツ規則
- 対象の処理名を示します。
- 実態のない増加表示を作りません。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
value | number | 必須 | 外部から制御する現在値。 |
label | string | 必須 | 利用者と支援技術へ示す名前。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
進捗: 55%
コピー可能な実装例
import { Progress } from "@awesome-ds/react";
<Progress value={40} label="Upload" />