ハンバーガーメニューを開くボタンのaria-controlsの出力を調整 #423
Conversation
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
gatsby-plugin-algolia-config.ts
Outdated
| @@ -115,5 +115,5 @@ export const algoliaConfig = { | |||
| indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME, | |||
| queries: [...mdxQueries, ...airtableQueries], | |||
| dryRun: process.env.BRANCH !== 'main', | |||
| continueOnFailure: false, | |||
| continueOnFailure: true, | |||
There was a problem hiding this comment.
algoliaの設定のようですが、今回の問題に関係ありますか？
There was a problem hiding this comment.
すみません、別の問題なので一旦戻します。
| @@ -68,17 +73,19 @@ export const Header: FC<Props> = ({ isIndex = false }) => { | |||
| </ul> | |||
| <MenuContainer> | |||
| <StyledOpenButton | |||
| // サーバー時は対象となるDialogコンポーネントをレンダリングできないため、aria-controlsは出力しない | |||
| {...(isClient && { 'aria-controls': 'panel-menu' })} | |||
There was a problem hiding this comment.
ここはわざわざuseStateとuseEffect使わないと駄目なんだでしょうか？
{...(typeof window !== 'undefined' && { 'aria-controls': 'panel-menu' })} だと動作しないですかね？
出来るだけ、useStateやuseEffectは使わないほうが良いかなと思い。
There was a problem hiding this comment.
@tomof useEffectでないと、CSRでも出力されないようです。<Dialog>と同じように、<StyledOpenButton>要素ごとtypeof window...で制御するのはできるので、そのほうが良いでしょうか？
yuw27b
force-pushed
the
fix/dialog-menu-aria
branch
from
18bbd81 to
b1ab896
Compare
|
ボタン側の |
|
バリデーションエラーは出ないものの、SSR時と出力される要素が変わることから、コンソールにエラーが出る問題がありました。 |
|
バリデーターのスコアを気にして、コードを複雑化するだけで本質的なアクセシビリティの問題が解決されない対応となってしまうため、このPRは一旦取り下げることにしました🙇♂️ w3cのissueや議論もまだ続いているように思います。 |
課題・背景
https://github.com/kufu/smarthr-design-system-issues/issues/1142
やったこと
SSR時（
windowオブジェクトが存在しない場合）には、ハンバーガーメニューを開くボタンのaria-controls="panel-menu"を出力しないようにしました。コントロール対象となる
id="panel-menu"の要素は、smarthr-uiのDialogコンポーネントを利用していますが、このコンポーネントも（documentを利用するため）SSR時は出力しないようになっているので、ボタンのaria-controlsも同じ条件で出力しています。動作確認
https://deploy-preview-423--smarthr-design-system.netlify.app/
HTMLのバリデーションエラーは出なくなりました。また、ブラウザでのレンダリング時には
aria-controlsが出力されています。キャプチャ
見た目や動作に影響はありません。