Gatsby: [v2] Contenedor div adicional

@ reach / router lo agrega para que pueda administrar automáticamente el enfoque como parte de asegurarse de que los lectores de pantalla puedan usar los sitios.

https://reach.tech/router/accessibility

Me doy cuenta de que esto es bastante tonto, pero creo que sería preferible si solo hubiera un div de envoltura.

No parece haber nada especial en el div de alcance, ¿sería posible fusionar el div de alcance con el div de envoltura id="___gatsby" agregando los atributos html allí?

Lamentablemente, no es posible fusionar los dos. Quizás podrías trabajar con @ reach / router en ellos reutilizando el div donde está montado React.

Necesito agregar height: 100% pero no hay class o id en él. Intenté buscarlo en la aplicación pero no lo encuentro. ¿Puedes decirme cómo puedo agregarle id ?

@colmtuite No es ideal, pero dado que la agrupación div es el único hijo de <div id="___gatsby"> , simplemente puede orientarla a través de

#___gatsby > * {
  height: 100%;
}

Actualización: una solución un poco mejor podría ser usar este selector más específico sugerido por @ironblock aquí .

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

Actualización 2 : en 2018, este no era el caso, pero hoy en día, el div en cuestión tiene una identificación de gatsby-focus-wrapper . Entonces el selector puede ser mucho menos oscuro:

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

Problema relevante: https://github.com/reach/router/issues/63

Personalmente, creo que esto está equivocado y es una fuente de problemas para quienes no usan componentes con estilo.

@kaishin ¿Podrías ampliar lo que quieres decir? ¿Qué es exactamente equivocado?

@janosh Me refería a la decisión de los mantenedores de alcance / enrutador de no proporcionar una forma de deshabilitar, o al menos personalizar este div contenedor. Soy un gran defensor del HTML semántico y me molesta tener que lidiar con otro div contenedor que solo sirve como un gancho a una biblioteca que apenas conocía antes de enfrentar este problema.

Entiendo tu punto ahora y estoy bastante de acuerdo. Siento lo mismo sobre el marcado no semántico.
Estaba confundido al final de tu comentario.

... es una fuente de problemas para quienes no utilizan componentes con estilo

ya que no veo por qué las personas que _ están_ usando styled-components se verían afectadas.

No puedo creer que este problema se haya cerrado con una solución tan irrazonable.

@ danielo515 Bueno, el problema es una dependencia, así que es algo comprensible.

Este comentario ofrece una solución CSS: https://github.com/reach/router/issues/63#issuecomment -428050999

ya que no veo por qué las personas que utilizan componentes con estilo no se verían afectadas.

@janosh Desde que abrí este número, no tuve ningún problema con el estilo. Entonces, ¿cuál es el problema aquí en realidad?

@LekoArts Marcado styled-components y conocer un selector de CSS de solución alternativa no hace que el contenedor div sea ​​más semántico.

De forma nativa, cuando haces clic en algún lugar del cuerpo y luego presionas la pestaña, se enfocará el elemento enfocable más cercano. Sin embargo, esta envoltura significa que hacer clic en el cuerpo enfocará la envoltura, restableciendo el orden de tabulación al principio en lugar de cerca del elemento. No estoy seguro de si se trata de un problema de accesibilidad, pero es algo que noté al intentar hacer clic cerca de un elemento y luego presionar la pestaña para enfocarlo.

@colmtuite Considere usar algo como altura: 100vh;

@skinenbayev @colmtuite
O con flex,

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

@Schmerb Creo que configurar 100vh en su clase dedicada de CSS es una forma más conveniente que manipular con algún código generado.

@skinenbayev
Supongo que debería haberlo aclarado ... 100vh es genial si quieres que tu aplicación tenga una altura fija del mismo tamaño que tu ventana gráfica ...

PERO si necesita que la aplicación ocupe todo el espacio disponible

(esencialmente lo que todos los que tienen height: 100% están intentando, pero lo más probable es que estén fallando debido a que el padre no tiene una altura establecida)

luego Flexbox al rescate.

Para aclarar aún más mi caso específico, capturas de pantalla de ambos intentos:
El borde azul / naranja es un componente /page . El div 'gancho' aleatorio que coloca Gatsby es el espacio en blanco. Con height: 100vh el espacio en blanco se puede ver extendiéndose muy por debajo de la parte inferior de la ventana gráfica ... empujando el pie de página fuera de la página a pesar de que la página en sí misma no tiene contenido.

Usando flex con su eje principal cambiado ( flex-direction: column lugar de flex-direction: row defecto) y la propiedad flex-grow, puede ver que ocupa muy bien todo el espacio disponible.

con height: 100vh;

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

Todo lo que veo son soluciones para un problema que ni siquiera debería existir.
¿Qué pasa si su navegador de destino no es compatible con flexbox?

También he tenido problemas con un error al configurar 'height: 100vh' donde cuando se requiere desplazamiento, obtengo una barra de desplazamiento doble en Chrome.

La forma en que resolví un problema similar es en lugar de usar height: 100vh; , es agregar min-height: 100vh; a mi componente Layout envolvente. Cuando combinas eso con algo como la configuración:
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

Ahora, el componente de ajuste siempre será _al menos_ la altura del puerto de visualización, pero si el contenido es lo suficientemente grande como para requerir desplazamiento, el elemento de pie de página se presionará para permanecer en la parte inferior de la pantalla.

Pero (¡pero grande!) Desafortunadamente, grid tiene menos soporte de navegador que flexbox, pero personalmente se siente menos 'hacky'.

Tal vez no sea una respuesta para ayudar con la falta de soporte flexible, pero tal vez una forma más ordenada de hacer que un pie de página se pegue al final de la página.

Desafortunadamente, aunque la línea de código en cuestión aborda la accesibilidad, también causa un error de accesibilidad. He registrado un problema en https://github.com/reach/router/issues/257.

Tenga en cuenta que 100vh puede significar algo diferente para los navegadores de Android.
La búsqueda rápida en Google revela un ejemplo: https://stackoverflow.com/q/30148956

Por alguna razón, div[role="group"][tabindex] no está aplicando ningún estilo a ese div. Tuve que especificar la identificación #gatsby-focus-wrapper

¿Todavía no hay una solución razonable al problema de la altura?