Skip to content

Instantly share code, notes, and snippets.

@yamanoku
Created April 18, 2021 13:11
Show Gist options
  • Save yamanoku/ddd54620f5610fa914824c4fde5274bd to your computer and use it in GitHub Desktop.
Save yamanoku/ddd54620f5610fa914824c4fde5274bd to your computer and use it in GitHub Desktop.

機能

数値フィールドは <input type="number"> で構築できますが、ブラウザやプラットフォーム間で動作が非常に一貫しておらず、ローカライズされた書式設定オプションが限られています。また、ステッパーボタンのスタイルを設定するのが困難です。useNumberFieldは、国際化フォーマットオプションをサポートし、必要に応じてスタイル設定できるアクセス可能な数値フィールドを実現します。

  • 小数点、パーセント、通貨値、単位などの国際化された数値フォーマットおよび解析のサポート
  • ラテン、アラビア、および漢数字システムといった30以上の言語のサポート
  • 使用されている番号付けシステムを自動的に検出し、国ごとのデフォルトの番号付けシステムにない番号の解析をサポートします
  • 標準または会計表記の記号、コード、名前など、複数の通貨書式をサポート
  • ユーザーからの入力におけるキーボード入力を検証し、国および番号付けシステムに従った有効な数値入力のみが受け入れられるようにします
  • インプット・メソッド・エディタ (Pinyinなど) から組版された入力を処理します。
  • 現在のプラットフォームと許可されている値に従って、モバイルに適したソフトウェアキーボードを自動的に選択します。
  • 設定可能な分数桁数への丸めをサポート
  • 設定可能な最小値と最大値の間の値の固定、およびステップ値へのスナップをサポート
  • ステップ値に応じて値を増減するステッパーボタンと矢印キーのサポート
  • ステッパボタンを押したままにして、連続的に増減することができます。
  • 増分、減分、およびステップへのスナップ時に浮動小数点丸め誤差を処理します
  • スクロールホイールによる値の増減をサポートします。
  • ARIAを使用したカスタムのローカライズされた役割記述を持つテキストフィールドとして、支援技術に公開されます。
  • スピンボタンARIAパターンに従います。
  • spinbuttonロールを使用してVoiceOverのバグを回避する
  • ARIAライブ・リージョンを使用して、値の変更がアナウンスされるようにします。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment