デートピッカーを国際的な(そしてアクセシブルな)コンポーネントに一変させたAdobe
(この記事は、2022年9月4日に公開された記事「Adobe transforms the date picker into a world ready (and accessible) component」の日本語訳です。)
あなたには、単純なことに思えるかもしれません。
Webサイトのフォームで、日付を入力できるようにする必要が生じたとします。そこであなたは、<form> 要素内に <input type="text"> を設け、日付ラベルを設定し、その日の作業を終えたとしましょう。
そしてある日、次のような日付の入力データを受け取ったとします:
2/7/2023
2023年2月7日のことだと思いきや、フォームを送信した人はイギリスにおり、この表記が実際には2023年7月2日を意味していることに気づくのです。
これは、最近の発表された2種類のオープンソースなReactコンポーネントのリリースで言及されている通りです:
多くのデートピッカーでは、現在選択されている日付を表示する、シンプルなテキスト入力欄を含んでいます。ユーザーは、その入力欄に日付を入力することもできますが、どのような日付形式が想定されているかを知っている必要があり、間違いを起こしやすいため、使いにくいものであることが少なくありません。ユーザーが日付を入力する際には、さまざまなフォーマット、言語、ナンバリング方法などで入力する可能性もあり、国際化における課題にもなっています。中には曖昧なフォーマットもあります。例えば、「2/3/2022」は「2月3日」と「3月2日」のどちらでしょう?その答えは、地域によって異なります。実際、ユーザーが日付の入力欄に入力する自由な形式のテキストを確実に解析するには、入力され得るバリエーションをすべて考慮するとなると、ほぼ不可能です。
Adobeは、そんなデートピッカーをレベルアップさせました。React Ariaのデートピッカーは、国際化されているばかりでなく、アクセシブルです。そのライブラリの利点を活かしたいのであれば、Reactに縛られる必要はないことも、付け加えておきましょう。
このデートピッカーが完成に至る道のりに興味があるなら、Date and Time Pickers for All - React Spectrum Blogにおいて、取り組みの詳細をぜひご覧ください。