Storybook と Vitest の統合したコンポーネントテスト
Note Storybook Vitest Plugin は 2024 年 10 月 5 日現在実験的な機能として提供されており、API が将来にわたって変更される可能性があります。 Storybook v8.3 より、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。今までも composeStories 関数で作成済みのストーリーを使いまわし、Jest などのテストランナーを用いてたテストを行うことができましたが、複雑なセットアップが必要でした。 また Vitest では ブラウザモード により、ヘッドレスブラウザ上で Storybook のテストを高速に実行できる点が特徴です。ヘッドレスブラウザ上でテストを実行することにより、例えば jsdom や happy-dom などのシミュレーションを使用する方法と比べて、実際のブラウザでの挙動をよ
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec
import "@typespec/http"; using TypeSpec.Http; model User { id: string; name: string; birthday?: utcDateTime; address: Address; } model Address { street: string; city: string; state: string; zip: string; } @route("/users") interface Users { list(@query limit: int32, @query skip: int32): User[]; create(@body user: User): User; get(@path id: string): User; } openapi: 3.0.0 info: title: (title) versio
aria-label を使いすぎない
aria-label を使いすぎない 2023.06.25 aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的な形式でテキストを提供することが望ましいです。 aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。<button> 要素はデフォルトではコンテンツの中身がアクセシブルな名前として使われます。しかし、アイコン要素は通常テキストを持たないため、アクセシブルな名前を持たないことになります。アクセシブルな名前を持たない要素は、単にボタンであることしかスクリーンリーダーを利用する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
