公開日: 2024 年 12 月 16 日
9 月に、カスタマイズ可能な選択機能の試験運用版についてフィードバックをお願いしました。寄せられたフィードバックには、ユースケース（デザインシステム、コンボボックスなど）、API の入力モードに関する考え、ベーススタイルに関するフィードバックが含まれていました。懸念事項には、ユーザー補助機能、ブラウザの互換性、検索機能の必要性、複数選択のサポートの要望などがありました。本番環境で API を使用したいとお考えのようですが、懸念事項や特定の機能のリクエストがあるようです。
これらの情報はすべて、Chrome のエンジニアとマネージャーがこの機能について情報に基づいた意思決定を行うために使用されています。この記事では、カスタマイズ可能な選択型アンケートの各質問から得られた主な知見をご紹介します。
この新しい API で何を構築しますか？
さまざまなユースケースが共有されましたが、一般的には次のようなものがあります。
- デザインシステム コンポーネントの作成: デザインシステム用に選択したコンポーネントを作成することで、プロジェクト全体で一貫性とカスタマイズ性を維持できます。
- さまざまな種類のセレクタの作成: 言語セレクタ、国セレクタ、ユーザー権限セレクタなど。
- 既存の選択要素の強化: 画像、SVG、豊富なスタイル設定などの機能を使用して、既存の選択要素を強化できます。
- カスタム選択の実装の置き換え: カスタムビルドの選択コンポーネントを標準化されたネイティブ ソリューションに置き換えます。
- コンボボックスとカスタム ピッカーの作成: コンボボックス、電話番号、タイムゾーン、通貨などのデータ型のカスタム ピッカーなど、より複雑な機能。
- フォームの UI の改善: 視覚的に魅力的で機能的な選択要素を作成して、フォームを改善します。
これらの回答は、新しい API の汎用性と、幅広いウェブ アプリケーションのユーザー エクスペリエンスと開発効率を改善する可能性を示しています。
ベースラインが一般提供に達したら、この API を本番環境で使用することを計画していますか？
新しい API をお試しになりましたか？使用した場合、目的のものを作成できましたか？
カスタマイズ可能な選択ツールの入力モード（<select> 要素の appearance: base-select と ::picker(select)）について、ご意見をお聞かせください。
この入力モードに関するフィードバックは、賛否両論です。
- 中には、このアプローチが許容できる、合理的である、または現在の状況よりも優れていると考える人もいます。
<select>要素を段階的に強化する「論理的な」または「適切な」方法と見なしています。 - 他のユーザーは、混乱している、または構文が使いにくいと述べています。2 つのプロパティ（
appearance: base-selectと::picker(select)）を使用することは、冗長または不要と見なされます。名前の付け方（base-selectは誤解を招く可能性がある）と、基盤となるコンセプトに不慣れな新規ユーザーが混乱する可能性があることについて懸念が提起されています。 - 一部の回答者は、単一のプロパティまたはセレクタを使用する、
appearanceプロパティを完全に回避するなど、別の方法を提案しています。
全体的に、現在の入力モードに満足している回答者もいれば、混乱している回答者や、明確かつシンプルに改善することを提案している回答者もいます。このフィードバックは、デベロッパーが新しい API を効果的に使用できるように、明確なドキュメントと例を提供することの重要性を強調しています。
カスタマイズ可能な選択ツールの既存のベース（ユーザー エージェント）スタイルについて、フィードバックをお寄せください。
スタイルが許容範囲内または良いと考える回答者もいれば、具体的な批判や提案をする回答者もいます。フィードバックには次のような内容が含まれます。
- チェックマーク アイコンが美しくなく、シンプルにできる。
- 項目の横にチェックマークを付けるスペースがない。
- ベーススタイルは窮屈な印象で、フォーカス リングが切れており、チェックアイコンとテキストの間に隙間がありません。
- スタイルは、OS プラットフォーム スタイルまたは
<dialog>要素に近いものにできます。 - デフォルトの矢印は下を向いており、開くと上を向きます。
- ベースのユーザー エージェント スタイルを削除するには、リセットが必要になる場合があります。
この機能について、ご質問、ご意見、または気になる点などがありましたら、
新しいカスタマイズ可能な select API について、さまざまなフィードバック、質問、懸念が寄せられました。主なテーマは次のとおりです。
- ユーザー補助機能: スクリーン リーダーやキーボード ナビゲーションなど、ユーザー補助機能に関する懸念が複数の回答者から寄せられました。
- 複数選択とコンボボックス: 複数選択機能とコンボボックスのサポートが強く求められています。
- 検索機能: 選択したオプション内で検索できる機能がリクエストされています。
- スタイル設定とブラウザの互換性: スタイル設定オプション、ブラウザの互換性、CSS リセットの必要性について懸念が寄せられました。
- 実装の詳細: フォーカス ロック、レンダリング動作、カスタム チルドレンなど、実装の具体的な詳細について質問がありました。
- 一般的なフィードバック: 回答者の中には、よりシンプルな API 入力モードや、ブラウザの Chrome の外部でレンダリングする機能を求めるなどの一般的なフィードバックを共有した人もいました。
全体的に、ユーザー補助機能の改善、複数選択や検索などの追加機能、スタイル設定とブラウザの互換性に関する明確なガイダンスの必要性がフィードバックから明らかになりました。
他にもご意見がございましたらお聞かせください
回答者の考えや提案の主なテーマは次のとおりです。
- 複数選択とコンボボックスの機能の要望: 複数の回答者が、複数選択とコンボボックスの機能の追加を特にリクエストしています。
- ユーザー補助の重要性: ユーザー補助機能に引き続き重点を置く必要があると回答した人もいます。
- 肯定的なフィードバックと機能リクエスト: API のリリースを喜び、検索オプションや
@supportsを使用したサポートの検出機能などの提案を行っているユーザーもいます。 - 特定のユースケース: ブラウザの Chrome の外部でのレンダリングや、
<select>要素内のカスタム値の許可など、サポートを希望する特定のユースケースについて言及している回答者が数名いました。 - 一般的なコメント: 一般的な称賛や、ブラウザ間での外観の統一を求めるコメントが寄せられています。
全体的に、このフィードバックは、複数選択とコンボボックスの機能に対する需要を裏付け、ユーザー補助の重要性を強調し、潜在的なユースケースと改善の余地について追加の分析情報を提供しています。
改めて皆様からのフィードバックに感謝申し上げます。このコミュニティ フィードバックの概要が実装者とデベロッパーの皆様のお役に立ち、ユーザーとデベロッパーの皆様にとってよりカスタマイズ可能な選択エクスペリエンスの実現につながれば幸いです。