Gatsby: [v2] wrapper div supplémentaire

@ reach / router l'ajoute afin qu'il puisse gérer automatiquement la mise au point afin de s'assurer que les sites sont utilisables par les lecteurs d'écran.

https://reach.tech/router/accessibility

Je me rends compte que c'est assez idiot, mais je pense qu'il serait préférable qu'il n'y ait qu'une seule div d'emballage.

Cela ne semble pas être quelque chose de spécial à propos de la div de portée, serait-il peut-être possible de fusionner la div de portée avec le wrapping id="___gatsby" div en ajoutant les attributs html à la place?

Il n'est malheureusement pas possible de fusionner les deux. Vous pourriez peut-être travailler avec @ reach / router sur eux en réutilisant le div où React est monté.

Je dois y ajouter height: 100% mais il n'y a pas de class ou id dessus. J'ai essayé de le chercher dans l'application mais je ne le trouve pas. Pouvez-vous me dire comment je peux y ajouter un id ?

@colmtuite Ce n'est pas idéal mais puisque le groupement div est le seul enfant de <div id="___gatsby"> , vous pouvez simplement le cibler via

#___gatsby > * {
  height: 100%;
}

Mise à jour: Une solution légèrement meilleure pourrait être d'utiliser ce sélecteur plus spécifique suggéré par @ironblock ici .

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

Mise à jour 2 : En 2018, ce n'était pas le cas mais de nos jours, le div en question a un identifiant de gatsby-focus-wrapper . Le sélecteur peut donc être beaucoup moins obscur:

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

Problème pertinent: https://github.com/reach/router/issues/63

Personnellement, je pense que c'est une erreur et que c'est une source de problèmes pour ceux qui n'utilisent pas de composants stylisés.

@kaishin Pourriez-vous développer ce que vous voulez dire? Qu'est-ce qui est exactement erroné?

@janosh Je voulais dire la décision des responsables de la portée / du routeur de ne pas fournir un moyen de désactiver, ou du moins de personnaliser ce div wrapper. Je suis un grand partisan du HTML sémantique et je suis déçu d'avoir à faire face à une autre div wrapper qui ne sert que de crochet à une bibliothèque que je connaissais à peine avant de faire face à ce problème.

Je comprends maintenant votre point de vue et je suis tout à fait d'accord. Je ressens à peu près la même chose à propos du balisage non sémantique.
J'étais juste confus à la fin de votre commentaire

... est une source de problèmes pour ceux qui n'utilisent pas de composants stylisés

car je ne vois pas pourquoi les gens qui _utilisent_ styled-components ne seraient pas affectés.

Je ne peux pas croire que ce problème ait été résolu avec une solution aussi déraisonnable.

@ danielo515 Eh bien, le problème vient d'une dépendance, donc c'est assez compréhensible.

Ce commentaire propose une solution de contournement CSS: https://github.com/reach/router/issues/63#issuecomment -428050999

car je ne vois pas pourquoi les gens qui utilisent des composants stylisés ne seraient pas affectés.

@janosh Depuis que j'ai ouvert ce numéro, je n'ai eu aucun problème avec le style. Alors, quel est le problème ici en fait?

@LekoArts Balisage styled-components et connaître un sélecteur CSS de contournement ne rend pas le wrapper div plus sémantique.

En mode natif, lorsque vous cliquez quelque part sur le corps, puis appuyez sur l'onglet, il se concentrera sur l'élément focalisable le plus proche. Cependant, ce wrapper signifie que cliquer sur le corps concentrera le wrapper, réinitialisant l'ordre de tabulation au début au lieu de près de l'élément. Je ne sais pas s'il s'agit d'un problème d'accessibilité, mais c'est quelque chose que j'ai remarqué en essayant de cliquer près d'un élément, puis d'appuyer sur l'onglet pour le mettre en évidence.

@colmtuite Envisagez d'utiliser quelque chose comme height: 100vh;

@skinenbayev @colmtuite
Ou avec flex,

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

@Schmerb Je pense que définir 100vh sur votre classe dédiée css est un moyen plus pratique que de manipuler avec du code généré.

@skinenbayev
J'imagine que j'aurais dû clarifier ... 100vh est génial si vous voulez que votre application ait une hauteur fixe de la même taille que votre fenêtre d'affichage ...

MAIS si vous avez besoin que l'application occupe tout l'espace disponible

(essentiellement ce que tout le monde avec height: 100% essaie mais échoue probablement parce que le parent n'a pas une hauteur définie)

puis Flexbox à la rescousse.

Pour clarifier davantage mon cas spécifique, captures d'écran des deux tentatives:
La bordure bleue / orange est un composant /page . Le div «crochet» aléatoire que Gatsby place est l'espace blanc. Avec height: 100vh l'espace blanc peut être vu s'étendre bien en dessous du bas de la fenêtre ... en poussant le pied de page hors de la page même si la page elle-même n'a essentiellement pas de contenu.

En utilisant flex avec son axe principal commuté ( flex-direction: column au lieu de flex-direction: row par défaut) et la propriété flex-grow, vous pouvez voir qu'elle prend très bien tout l'espace disponible.

avec height: 100vh;

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

Tout ce que je vois sont des solutions de contournement pour un problème qui ne devrait même pas exister.
Que faire si votre navigateur cible ne prend pas en charge Flexbox?

J'ai également eu des problèmes avec un bogue lors du réglage de `height: 100vh 'où lorsque le défilement est requis, j'obtiens une double barre de défilement dans chrome.

La façon dont j'ai résolu un problème similaire est plutôt que d'utiliser height: 100vh; , c'est d'ajouter min-height: 100vh; à mon composant Layout . Lorsque vous combinez cela avec quelque chose comme le réglage:
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

Désormais, le composant d'habillage sera toujours _au moins_ la hauteur du port de vue, mais si le contenu est suffisamment grand pour nécessiter un défilement, l'élément de pied de page sera poussé pour rester au bas de l'écran.

Mais (gros mais!) Malheureusement, grid a moins de support de navigateur que flexbox, mais il se sent moins «hacky» personnellement.

Peut-être pas une réponse pour ne pas avoir de support flexible, mais peut-être un moyen plus simple de coller un pied de page au bas de la page?

Malheureusement, si la ligne de code en question traite de l'accessibilité, elle provoque également une erreur d'accessibilité. J'ai signalé un problème sur https://github.com/reach/router/issues/257.

Sachez que 100vh peut signifier quelque chose de différent pour les navigateurs Android.
Exemple de recherche rapide sur Google: https://stackoverflow.com/q/30148956

Pour une raison quelconque, div[role="group"][tabindex] n'applique aucun style à ce div. J'ai dû spécifier l'identifiant #gatsby-focus-wrapper

Toujours pas de solution raisonnable au problème de hauteur?