Gatsby: [v2]追加のdivラッパー

@ reach / routerはそれを追加して、サイトがスクリーンリーダーで使用できるようにする一環としてフォーカスを自動的に管理できるようにします。

https://reach.tech/router/accessibility

これはかなりばかげていると思いますが、ラッピングdivが1つしかない方が望ましいと思います。

リーチdivについて特別なことは何もないようですが、代わりにhtml属性を追加することで、リーチdivをラッピングid="___gatsby" divとマージすることは可能でしょうか？

残念ながら、この2つをマージすることはできません。 おそらく、Reactがマウントされているdivを再利用して、@ Reach / routerで作業することができます。

height: 100%を追加する必要がありますが、 classまたはidがありません。 アプリで探してみましたが見つかりません。 idを追加する方法を教えてください。

@colmtuite理想的ではありませんが、グループ化divは<div id="___gatsby">の唯一の子であるため、次の方法で簡単にターゲティングできます。

#___gatsby > * {
  height: 100%;
}

アップデート：Aわずかに良い解決策が@ironblockによって提案され、この複数の特定のセレクタを使用するかもしれないここに。

div[role="group"][tabindex] {
  height: 100%;
}

更新2 ：2018年にはそうではありませんでしたが、現在、問題のdivのIDはgatsby-focus-wrapperです。 したがって、セレクターははるかにわかりにくくなります。

#gatsby-focus-wrapper {
  height: 100%;
}

関連する問題： https ：

個人的には、これは誤った方向に進んでおり、スタイル付きコンポーネントを使用していない人にとっては問題の原因であると思います。

@kaishinどういう意味ですか？ 何が間違っているのですか？

@janoshリーチ/ルーターメンテナーが無効にする方法を提供しない、または少なくともこのラッパーdivをカスタマイズするという決定を意味しました。 私はセマンティックHTMLの大きな支持者であり、この問題に直面する前はほとんど知らなかったライブラリへのフックとしてのみ機能する、さらに別のラッパーdivを処理する必要があることに悩まされています。

私は今あなたの主張を理解し、完全に同意します。 非セマンティックマークアップについても同じように感じます。
コメントの終わりで混乱しました

...スタイル付きコンポーネントを使用していない人にとっては問題の原因です

styled-componentsを使用している人が影響を受けない理由がわかりません。

この問題がそれほど不合理な解決策で解決されたとは信じられません。

@ danielo515まあ、問題は依存関係にあるので、ある程度理解できます。

このコメントはCSSの回避策を提供します： https ：

スタイル付きコンポーネントを使用している人が影響を受けない理由がわからないためです。

@janoshこの号を開いてから、スタイリングに何の問題もありませんでした。 では、実際にここでの問題は何ですか？

@LekoArts十分なコンテンツがない場合でも、ウィンドウの下部にフッターを保持するためのCSSソリューションを壊すstyled-componentsを使用し、回避策のCSSセレクターを知っていても、ラッパーdivはセマンティックになりません。

本来、ボディのどこかをクリックしてからTabキーを押すと、最も近いフォーカス可能な要素にフォーカスされます。 ただし、このラッパーは、本文をクリックするとラッパーがフォーカスされ、タブの順序が要素の近くではなく先頭にリセットされることを意味します。 これがアクセシビリティの問題であるかどうかはわかりませんが、要素の近くをクリックしてからTabキーを押してフォーカスしようとしたときに気づいたことがあります。

@colmtuite高さのようなものを使用することを検討してください：100vh;

@skinenbayev @colmtuite
またはフレックスで、

div[role="group"][tabindex] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@Schmerb css専用クラスに100vhを設定する方が、生成されたコードを操作するよりも便利な方法だと思います。

@skinenbayev
明確にすべきだったと思います... 100vhは、アプリの高さをビューポートと同じサイズに固定したい場合に最適です...

ただし、利用可能なすべてのスペースを占有するためにアプリが必要な場合

（基本的に、 height: 100%持つすべての人が試みていますが、親が設定された高さを持っていないために失敗している可能性があります）

それからFlexboxが救助に。

私の特定のケースをさらに明確にするために、両方の試みのスクリーンショット：
青/オレンジの境界線は/pageコンポーネントです。 Gatsbyが配置するランダムな「フック」divは空白です。 height: 100vhすると、ビューポートの下部のかなり下に空白が広がっているのがわかります...ページ自体に基本的にコンテンツがない場合でも、フッターをページから押し出します。

使用してflexその主軸とする（切り替えflex-direction: columnの代わりにデフォルトのflex-direction: row ）とプロパティをFlexは、成長、あなたは非常にうまくそれを参照してくださいすべての利用可能なスペースを取ることができます。

height: 100vh;

display: flex; flex-direction: column; flex-grow: 1;

私が目にするのは、存在すらしてはならない問題の回避策だけです。
ターゲットブラウザがフレックスボックスをサポートしていない場合はどうなりますか？

`height：100vh 'を設定すると、スクロールが必要なときにクロムの二重スクロールバーが表示されるというバグもありました。

同様の問題を解決する方法は、 height: 100vh;使用するのではなく、ラッピングLayoutコンポーネントにmin-height: 100vh;を追加することです。 それを設定のようなものと組み合わせると：
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

これで、折り返しコンポーネントは常にビューポートの高さになりますが、コンテンツがスクロールを必要とするほど大きい場合は、フッター要素が押されて画面の下部に残ります。

しかし（大きいですが！）残念ながら、グリッドはフレックスボックスよりもブラウザのサポートが少ないですが、個人的には「ハッキー」ではないと感じています。

フレックスサポートがないことを支援するための答えではないかもしれませんが、フッターをページの下部に貼り付けるためのより良い方法でしょうか？

残念ながら、問題のコード行はアクセシビリティに対応していますが、アクセシビリティエラーも発生します。 https://github.com/reach/router/issues/257で問題をログに記録しました

100vhは、Androidブラウザとは異なる意味を持つ可能性があることに注意してください。
クイックグーグルは例を明らかにします： https ：

何らかの理由で、 div[role="group"][tabindex]はそのdivにスタイルを適用していません。 IDを指定する必要がありました#gatsby-focus-wrapper

高さの問題に対する合理的な解決策はまだありませんか？