(BUSAN.SASHIMI)
terminal
Weekly Digest // DESIGN_SYSTEMS — Week 9-2026
architectureWeekly Report

Async ReactのAction PropsでDesign Componentを構築… — 2026年 第9週 デザインシステム

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 9-2026
コンポーネント

Async ReactのAction PropsでDesign Componentを構築 | Aurora Scharff

Aurora Scharffが、Async Reactで導入された"action prop"パターンを活用し、TabListとインラインEditableTextフィールドという2つの再利用可能なデザインコンポーネントをゼロから構築する過程を詳しく解説します。各コンポーネントはuseTransitionとuseOptimisticで非同期処理を内部にカプセル化し、利用側はvalueとactionコールバックを渡すだけで済みます。TabListはクリック時に楽観的タブ切り替えを行い、スコープ付きスピナーを表示して失敗時は自動ロールバックします。EditableTextは楽観的な現在値を受け取るdisplayValueフォーマッタ関数をサポートし、通貨などのフォーマット済み出力がコミット直後に更新されます。さらにhideSpinnerのエスケープハッチとTailwindのgroup-has-data-pending:バリアントを組み合わせた、周囲DOMへのカスタムローディング処理も紹介されています。

Async ReactのAction PropsでDesign Componentを構築 | Aurora Scharff
Read Articlearrow_forward
Video · アクセシビリティ52:55

WCAGルールをいくつか破ってみよう - Elise Kristiansen - NDC London 2026

フロントエンド開発者Elise KristiansenによるNDC Londonのトークは、意図的なルール違反のデモとして構成されています。alt textの欠如、見出し階層の不在、色のみによるコントラスト不足、flex-direction:row-reverseによるキーボードタブ順序の破壊、キーボードトラップ、時間制限、自動再生アニメーションなど、WCAG AおよびAAの基準をカテゴリー別に違反した後、ライブで修正して影響を説明します。主要な統計: 94.8%のウェブサイトが少なくとも1つのAA違反を持ち、79.8%はカラーコントラストが不十分です。実用的なツールとしてコマンドライン監査用のPa11yとパイプライン統合用のPa11y CIを推奨しています。トークはMats Steen（Ibelin）の物語でアクセシビリティ欠如の人的コストを示すことから始まり、div-with-onclickパターンの代わりに正しいセマンティックHTMLタグを使うよう呼びかけて締めくくられています。

AI_INFOGRAPHIC
WCAGルールをいくつか破ってみよう - Elise Kristiansen - NDC London 2026 — infographicWATCH_VIDEOarrow_forward
Video · ガイド41:09

IntercomのデザイナーとしてVibe Codingする方法

IntercomのスタッフプロダクトデザイナーDomingoが、Figma Code Connectを通じてすべてのFigmaコンポーネントをコードベースに接続し、デザイナーが単一スクリプトで実際のプロダクションデザインシステムコンポーネントを使って直接プロトタイピングできる"design playground"を構築した経緯を紹介します。Claude Codeはインターコム全社で必須のAIコーディングツールであり、カスタムClaude SkillsがFigma MCPの上に品質チェック、コンポーネントインポートルール、ビルドデプロイ自動化を追加し、Claudeがボタンやダイアログを再生成する代わりに既存コンポーネントをインポートするよう保証します。デプロイスキルは一つのコマンドでGitHubドラフトPRと共有可能なexperimentalビルドURLを生成します。また、Git基礎、環境設定、各ワークフローのビデオチュートリアルを含むチーム向けガイドPrototyping Hubも紹介されています。

AI_INFOGRAPHIC
IntercomのデザイナーとしてVibe Codingする方法 — infographicWATCH_VIDEOarrow_forward
Article · アクセシビリティREAD TIME: 4m

aria-haspopupは思った通りに動かないかもしれない - Manuel Matuzovic

Manuel Matuzovićは、ナビゲーションボタンにおけるaria-haspopupの広範な誤用を指摘します。ARIA仕様ではポップアップコンテナにmenu、listbox、tree、grid、またはdialogのroleを明示する必要がありますが、多くのサブナビゲーションは通常のlist要素を使用しています。navigation（リンク集）とmenu（アクション項目）の区別は意味論的に重要です。この不一致によりJAWSは「Spaceを押してメニューを開き、矢印キーで移動」と案内しますが、listが適切なmenuウィジェットでないため矢印キーが機能しません。VoiceOver、NVDA、Narrator、TalkBackはそれぞれ異なる挙動を示し、ユーザーに一貫性のないアクセス体験を与えます。正しい修正はaria-haspopupを削除し、ボタンにaria-expandedをトグルすることです。

READ_FULL_LOGarrow_forward
Article · アクセシビリティREAD TIME: 3m

role=presentationはaria-hidden=trueの代替ではない - Manuel Matuzovic

Manuel Matuzovićの#WebAccessibilityFailsシリーズで、よく混同される2つの属性の違いを明確に解説します。aria-hidden="true"は要素とその全サブツリーをアクセシビリティツリーから完全に除去しますが、role="presentation"は要素のネイティブroleを取り除くだけで、子要素やテキストコンテンツは依然として公開されます。アクセシブルな名前を持たないSVGにrole="presentation"を適用するとVoiceOver、TalkBack、JAWS、NVDAは無視しますが、aria-labelを追加すると多くのスクリーンリーダーは読み上げてしまいます。SVGのテキストノードも例外なく読み上げられます。img要素には空のalt属性が唯一の確実な方法であり、それ以外ではaria-hidden="true"を使用する必要があります。

READ_FULL_LOGarrow_forward
Article · アクセシビリティREAD TIME: 5m

figcaptionとalt textの比較

Martin Underhillは、alt textとfigcaptionの役割を明確に区別します。alt textは画像を見られないユーザーのために画像の意味を代替するものであり、figcaptionは画像が周囲のコンテンツの中で果たす役割を説明するものです。単独のプロフィールページではaltだけで十分ですが、複数の人物が登場する長い記事では「Martin Underhill of tempertemper」のようなfigcaptionが周辺テキストの負担を軽減します。複数の画像を一つのキャプションでグループ化する方法、複数の課題にまたがって番号付きで参照するfigureの活用、そしてtitle要素で説明テキストを提供するインラインSVGの利用法も紹介されています。重要なルール: altとcaptionは決して同一にしてはならず、一方は画像を代替し、もう一方は画像に文脈を与えます。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週のフィーチャー記事であるAurora ScharffのactionプロップについてのDeep Diveは、Async Reactにおける成熟しつつあるパターンを示しています。useTransitionとuseOptimisticを完全にカプセル化した再利用可能なTabListとEditableTextコンポーネントで、利用側はvalueとcallbackを渡すだけで済みます。このパターンはoptimistic updateとロールバックロジックをコンポーネントの境界内に保持し、単なるスタイル付きプリミティブを超えて、本当にフレームワークを意識したデザインシステムへの重要な一歩です。

アクセシビリティが今週の残りのトピックを占めました。Manuel Matuzovicが#WebAccessibilityFailsシリーズに2つの精密な分析を寄稿しました。1つ目はナビゲーションサブメニューでのaria-haspopupの広範な誤用を取り上げ、解決策はaria-haspopupを完全に削除してaria-expandedに置き換えることです。2つ目はrole="presentation"が要素自身のroleのみを削除して子要素は残す一方、aria-hidden="true"はサブツリー全体を除去するという違いを明確にしています。Martin Underhillはalt text(画像の代替)とfigcaption(画像の文脈化)の明確な違いを説明する3つ目のアクセシビリティ記事を追加しました。

最後に、Elise KristiansenのNDC Londonのトークでは主要なWCAG AAの違反カテゴリーをすべてライブで実演し、94.8%のウェブサイトが少なくとも1つの違反を持ち、AIコード生成器が正しいセマンティックHTMLではなくdiv-with-onclickを好むことでさらに格差を広げていると指摘しました。IntercomのDomingoは、Figma Code Connectとカスタム Claude Skillsがデザインチーム全体のデザインからコードへのループをどのように閉じるかを詳しく説明しました。

Key Takeaways
  • Async Reactのactionプロップパターンにより、デザインシステムコンポーネントがすべてのtransitionとoptimistic UIロジックを所有し、利用側にはvalueとcallbackのみを公開します。
  • ナビゲーションサブメニューでのaria-haspopupの誤用はスクリーンリーダーを壊します — aria-expandedに置き換え、role="presentation"はアクセシビリティツリーから子コンテンツを除去しません。
  • 94.8%のウェブサイトがWCAG AA違反を持ちAI生成コードがさらに悪化させています。IntercomのFigma Code Connectワークフローはデザインシステムでこの格差を縮める方法を示しています。