Gatsby: [v2] Pembungkus div tambahan

@ reach / router menambahkannya sehingga dapat secara otomatis mengelola fokus sebagai bagian dari memastikan situs dapat digunakan oleh pembaca layar.

https://reach.tech/router/accessibility

Saya menyadari ini cukup konyol tetapi saya pikir akan lebih baik jika hanya ada satu div pembungkus.

Tampaknya tidak ada yang istimewa tentang div jangkauan, mungkinkah menggabungkan div jangkauan dengan pembungkus id="___gatsby" div dengan menambahkan atribut html di sana?

Sayangnya tidak mungkin untuk menggabungkan keduanya. Mungkin Anda bisa bekerja dengan @ reach / router untuk menggunakan div tempat React dipasang.

Saya perlu menambahkan height: 100% tapi tidak ada class atau id . Saya mencoba mencarinya di aplikasi tetapi tidak dapat menemukannya. Dapatkah Anda memberi tahu saya bagaimana saya dapat menambahkan id ke dalamnya?

@colmtuite Ini tidak ideal tetapi karena pengelompokan div adalah satu-satunya turunan dari <div id="___gatsby"> , Anda dapat menargetkannya melalui

#___gatsby > * {
  height: 100%;
}

Pembaruan: Solusi yang sedikit lebih baik mungkin menggunakan pemilih yang lebih spesifik ini yang disarankan oleh @ironblock di sini .

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

Pembaruan 2 : Kembali pada tahun 2018, ini bukan masalahnya tetapi saat ini, div dimaksud memiliki id gatsby-focus-wrapper . Jadi pemilih bisa jadi sangat tidak jelas:

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

Masalah yang relevan: https://github.com/reach/router/issues/63

Saya pribadi berpikir ini salah arah dan merupakan sumber masalah bagi mereka yang tidak menggunakan komponen bergaya.

@ KAishin Bisakah Anda memperluas apa yang Anda maksud? Apa sebenarnya yang salah arah?

@janosh Maksud saya keputusan pengelola jangkauan / router untuk tidak menyediakan cara untuk menonaktifkan, atau setidaknya menyesuaikan div pembungkus ini. Saya adalah pendukung besar HTML semantik dan saya kecewa karena saya harus berurusan dengan div pembungkus lain yang hanya berfungsi sebagai pengait ke perpustakaan yang hampir tidak saya ketahui sebelum menghadapi masalah ini.

Saya mengerti maksud Anda sekarang dan sangat setuju. Saya merasakan hal yang sama tentang markup non-semantik.
Saya hanya bingung dengan akhir komentar Anda

... adalah sumber masalah bagi mereka yang tidak menggunakan komponen bergaya

karena saya tidak mengerti mengapa orang yang _are_ menggunakan styled-components tidak akan terpengaruh.

Saya tidak percaya masalah ini telah ditutup dengan solusi yang tidak masuk akal.

@ danielo515 Nah, masalahnya ada pada ketergantungan, jadi ini agak bisa dimengerti.

Komentar ini menawarkan solusi CSS: https://github.com/reach/router/issues/63#issuecomment -428050999

karena saya tidak mengerti mengapa orang yang menggunakan komponen bergaya tidak akan terpengaruh.

@janosh Sejak saya membuka masalah ini, saya tidak memiliki masalah apa pun dengan gaya. Jadi sebenarnya apa masalahnya di sini?

@LekoArts Markup Unsemantic yang merusak solusi CSS untuk menjaga footer di bagian bawah jendela meskipun tidak ada konten yang memadai. Menggunakan styled-components dan mengetahui selektor CSS solusi tidak membuat pembungkus div semantik lagi.

Secara native, saat Anda mengklik di suatu tempat pada body lalu menekan tab, ini akan memfokuskan elemen terdekat yang dapat difokuskan. Namun pembungkus ini berarti mengklik badan akan memfokuskan pembungkus, mengatur ulang urutan tab ke awal, bukan di dekat elemen. Saya tidak yakin apakah ini adalah masalah aksesibilitas tetapi itu adalah sesuatu yang saya perhatikan ketika mencoba mengklik di dekat elemen dan kemudian tekan tab fokuskan.

@colmtuite Pertimbangkan untuk menggunakan sesuatu seperti height: 100vh;

@skinenbayev @colmtuite
Atau dengan flex,

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

@Schmerb Saya pikir pengaturan 100vh ke kelas khusus css Anda adalah cara yang lebih nyaman daripada memanipulasi dengan beberapa kode yang dihasilkan.

@bayu_joo
Saya kira saya harus menjelaskan ... 100vh bagus jika Anda ingin aplikasi Anda memiliki ketinggian tetap dengan ukuran yang sama dengan viewport Anda ...

TAPI jika Anda membutuhkan aplikasi untuk mengambil semua ruang yang tersedia

(pada dasarnya apa yang dicoba semua orang dengan height: 100% tetapi kemungkinan besar gagal karena orang tua tidak memiliki ketinggian yang ditetapkan)

lalu Flexbox untuk menyelamatkan.

Untuk lebih memperjelas kasus spesifik saya, tangkapan layar dari kedua upaya:
Perbatasan biru / oranye adalah komponen /page . Div 'hook' acak yang ditempatkan Gatsby adalah white space. Dengan height: 100vh ruang putih dapat dilihat membentang jauh di bawah bagian bawah viewport ... mendorong footer dari halaman meskipun halaman itu sendiri pada dasarnya tidak memiliki konten.

Menggunakan flex dengan sumbu utamanya dialihkan ( flex-direction: column alih-alih default flex-direction: row ) dan properti flex-grow, Anda dapat melihatnya dengan sangat baik menggunakan semua ruang yang tersedia.

dengan height: 100vh;

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

Semua yang saya lihat adalah solusi untuk masalah yang seharusnya tidak ada.
Bagaimana jika browser target Anda tidak mendukung flexbox?

Saya juga memiliki masalah dengan bug saat menyetel `height: 100vh 'di mana saat pengguliran diperlukan, saya mendapatkan bilah gulir ganda di chrome.

Cara saya memecahkan masalah serupa daripada menggunakan height: 100vh; , adalah menambahkan min-height: 100vh; ke pembungkus komponen Layout . Saat Anda menggabungkannya dengan sesuatu seperti pengaturan:
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

Sekarang, komponen pembungkus akan selalu _setidaknya_ tinggi port tampilan, tetapi jika konten cukup besar untuk perlu digulir, elemen footer akan didorong untuk tetap berada di bagian bawah layar.

Tapi (besar tapi!) Sayangnya, grid memiliki dukungan browser yang lebih sedikit daripada flexbox, tapi secara pribadi rasanya kurang 'hacky'.

Mungkin bukan jawaban untuk membantu karena tidak memiliki dukungan fleksibel, tetapi mungkin cara yang lebih baik untuk membuat footer menempel di bagian bawah halaman?

Sayangnya, meskipun baris kode yang dipermasalahkan membahas aksesibilitas, hal itu juga menyebabkan kesalahan aksesibilitas. Saya telah mencatat masalah di https://github.com/reach/router/issues/257.

Ketahuilah bahwa 100vh mungkin memiliki arti yang berbeda untuk browser Android.
Googling cepat mengungkap contoh: https://stackoverflow.com/q/30148956

Untuk beberapa alasan div[role="group"][tabindex] tidak menerapkan gaya apapun ke div itu. Saya harus menentukan id #gatsby-focus-wrapper

Masih belum ada solusi yang masuk akal untuk masalah ketinggian?