マルチプロダクトナビゲーションのレスポンシブ改善
Web Awesomeのドキュメントサイトにおいて、ナビゲーショントグルの表示制御をコンテナクエリから wa-pageのview属性 に変更し、レスポンシブ動作を改善しました。これにより、サイドバーの表示状態とナビゲーショントグルの可視性が一貫して連動するようになります。
背景
#2057 でマルチプロダクトナビゲーションを実装した際、ナビゲーショントグルの表示制御にコンテナクエリを使用していました。しかし、コンテナクエリはヘッダー要素の幅に基づいて判定するため、wa-pageコンポーネントが管理するサイドバーの表示状態と直接連動しませんでした。
このPRでは、表示制御の基準をwa-pageのview属性に変更することで、サイドバーが非表示の時に確実にトグルボタンが表示されるようにしています。併せて、#2057の実装過程で見つかったアクセシビリティとスタイリングの問題も修正しています。
技術的な変更
表示制御の変更
utils.cssにおいて、コンテナクエリによる制御からビュー属性による制御に変更されました。
変更前:
@container header (inline-size <= 80ch) {
.header-logo-simple,
.header-toggle-nav {
display: block;
}
}
@container header (inline-size > 80ch) {
.header-logo-simple,
.header-toggle-nav {
display: none;
}
}
変更後:
/* Nav toggle: show when sidebar is hidden (wa-page mobile view), hide when sidebar is shown */
wa-page[view='mobile'] > [slot='header'] .header-toggle-nav {
display: block;
}
wa-page[view='desktop'] > [slot='header'] .header-toggle-nav {
display: none;
}
.header-logo-simpleは引き続きコンテナクエリで制御されますが、.header-toggle-navのみがwa-pageのview属性に基づいて表示・非表示が切り替わります。
アクセシビリティの改善
単体で使用されるアイコンにlabel属性が追加され、スクリーンリーダーでの読み上げが可能になりました。
<wa-icon name="microphone-lines" family="classic" variant="solid" label="Podcast Awesome"></wa-icon>
<wa-icon name="newspaper" family="classic" variant="solid" label="Blog Awesome"></wa-icon>
<wa-icon family="brands" name="github" label="View Project on GitHub" class="icon-embiggen"></wa-icon>
<wa-icon name="star" variant="regular" label="Star Project on GitHub" class="icon-embiggen"></wa-icon>
また、nav-docs.njkではアイコンをslot="start"に配置することで、ボタンテキストとの視覚的な関係が明確になりました。
<wa-icon slot="start" name="trowel-bricks" variant="regular" label="Components" class="icon-embiggen"></wa-icon>
Components
スタイリングの統一
ナビゲーション全体で間隔をwa-gap-2xsに統一しました。
-<div id="docs-toolbar" class="wa-cluster gap-s">
+<div id="docs-toolbar" class="wa-cluster wa-gap-2xs">
-<div class="header-nav wa-cluster wa-gap-s">
+<div class="header-nav wa-cluster wa-gap-2xs">
この変更により、ヘッダー内の要素間の視覚的なリズムが統一されています。
HTMLセマンティクスの改善
インライン要素には<span>タグを使用するよう修正されました。
-<p class="wa-caption-xs wa-cluster wa-gap-xs">
+<span class="wa-caption-xs wa-cluster wa-gap-xs">
Version {{ package.version }}
-</p>
-<p class="wa-caption-xs">© Fonticons, Inc.</p>
+</span>
+<span class="wa-caption-xs">© Fonticons, Inc.</span>
これらのコンテンツは段落ではなく単なるインラインテキストであるため、<span>の使用がHTMLの意味構造により適合します。
テンプレートファイルの統合
個別のロゴSVGテンプレートファイル（logo-eleventy.njk、logo-font-awesome.njk）が削除されました。ロゴの表示にはwa-iconコンポーネントが使用されるようになり、テンプレートの管理が簡素化されています。
設計判断
コンテナクエリではなくview属性を使用する方式が採用されました。
コンテナクエリはヘッダーの幅に基づいて判定するため、実際のサイドバーの表示状態と乖離する可能性がありました。wa-pageのview属性は、サイドバーの表示・非表示を直接管理する状態であるため、ナビゲーショントグルの制御に適しています。
この判断により、画面幅に関わらずサイドバーが非表示の時は必ずトグルボタンが表示され、表示中は必ず非表示になるという一貫した動作が保証されます。
本PRは、#2057で実装されたマルチプロダクトナビゲーションの実運用での検証を通じて見つかった問題点を修正したものです。コンポーネントの状態管理と表示制御の一貫性を高めることで、より予測可能なUIを実現しています。