Lebih Detail tentang `details`

Banyak obrolan di sekitar yang lama <details> dan <summary> elemen akhir-akhir ini! saya melihat Lea Verou baru-baru ini men-tweet sebuah observasi tentang elemen display perilaku dan itu agak terpecah menjadi lebih banyak pengamatan dan catatan penggunaan dari orang-orang, termasuk a diskusi yang dihidupkan kembali Apakah <summary> harus diizinkan mengandung elemen interaktif atau tidak.

Ada banyak titik untuk dihubungkan dan saya akan melakukan yang terbaik di sini untuk melakukan hal itu.

Bisakah kita mengubah tampilan elemen yang bersarang di <details> elemen?

Di aplikasi yang saya buat, saya menggunakan untuk panel tetapi mengalami beberapa keanehan ukuran.
kotak fleksibel: https://t.co/noZvxAN35G
Kisi: https://t.co/pis0lPjvXk
Awalnya saya pikir itu bug, tetapi ketiga mesin setuju. Tidak ada dalam stylesheet UA untuk sepertinya menjelaskannya.

— Lea Verou (@LeaVerou) 28 Agustus 2022

Sangat aneh! Jika kami membuka DevTools, lembar gaya agen pengguna memberi tahu kami <details> adalah ditampilkan sebagai elemen blok.

Perhatikan yang diperlukan <summary> elemen dan dua tambahan <div>ada di sana. Kita bisa menimpa displaybukan?

Apa yang mungkin kita harapkan adalah itu <details> sekarang memiliki tinggi eksplisit 40vh dan tiga baris di mana baris ketiga mengambil sisa ruang yang tersisa dari dua baris pertama. Seperti ini:

Ugh, tapi baris ketiga tidak… melakukan… itu.

Rupanya yang kita hadapi adalah wadah kisi yang tidak dapat menerapkan perilaku kisi ke item kisinya. Tetapi spesifikasi HTML memberi tahu kami:

Grafik details elemen adalah diharapkan untuk dirender sebagai kotak blok. Elemen tersebut juga diharapkan memiliki internal pohon bayangan dengan dua slot.

(Tekankan milikku)

Dan beberapa saat kemudian:

Grafik details elemen kedua celah diharapkan memiliki style atribut disetel ke “display: block; content-visibility: hidden;" ketika details elemen tidak memiliki open atribut. Ketika itu memiliki open atribut, itu style atribut diharapkan akan dihapus dari yang kedua celah.

(Tekankan milikku, sekali lagi)

Jadi, spesifikasi mengatakan slot kedua — dua tambahan <div>s dari contoh — hanya dipaksa menjadi elemen blok ketika <details> ditutup. Ketika terbuka- <details open> — mereka harus sesuai dengan tampilan kisi yang menggantikan gaya agen pengguna… benar?

Itulah perdebatan. Saya mengerti itu slots diatur ke display: contents secara default, tetapi memasukkan elemen bersarang ke dalam slot dan menghapus kemampuan untuk menatanya tampaknya tidak aktif. Apakah ini masalah spesifikasi bahwa isinya adalah slot, atau masalah browser yang tidak dapat kami atasi display meskipun mereka berada di pohon kotak? Orang yang lebih pintar dapat mencerahkan saya tetapi sepertinya implementasi yang salah.

Is <details> wadah atau elemen interaktif?

Banyak orang menggunakan <details> untuk beralih menu terbuka dan tertutup. Ini adalah praktik dipopulerkan oleh GitHub.

Tampaknya masuk akal. Spesifikasi pasti memungkinkannya:

Grafik details elemen merupakan widget pengungkapan tempat pengguna dapat memperoleh informasi tambahan atau kontrol.

(Tekankan milikku)

Baiklah, jadi kita mungkin mengharapkan itu <details> adalah wadahnya (memiliki implisit role=group) Dan <summary> adalah elemen interaktif yang mengatur wadah open negara. Masuk akal karena <summary> memiliki implikasi button peran dalam beberapa konteks (tetapi tidak ada peran WAI-ARIA yang sesuai).

Tapi Melanie Sumner melakukan penggalian yang tampaknya tidak hanya bertentangan dengan itu, tetapi mengarah pada kesimpulan bahwa menggunakan <details> sebagai menu mungkin bukan yang terbaik. Lihat apa yang terjadi ketika <details> diberikan tanpa <summary> elemen:

Ia melakukan persis seperti yang disarankan oleh spesifikasi ketika tidak ada <summary> - itu membuat sendiri:

Pertama summary anak elemen dari elemen, jika ada, merupakan ringkasan atau legenda detail. Jika tidak ada anak summary elemen, agen pengguna harus memberikan legendanya sendiri (misalnya "Rincian").

(Tekankan milikku)

Melanie menjalankannya melalui validator HTML dan — kejutan! — itu tidak valid:

Jadi, <details> membutuhkan <summary>. Dan kapan <summary> hilang, <details> membuatnya sendiri, meskipun itu disampaikan sebagai markup yang tidak valid. Semuanya keren dan valid ketika <summary> disana:

Semuanya mengarah ke pertanyaan baru: kenapa <summary> diberikan implisit button peran kapan <details> apa yang tampak sebagai elemen interaktif? Mungkin ini adalah kasus lain di mana implementasi browser salah? Kemudian lagi, spesifikasinya mengkategorikan keduanya sebagai elemen interaktif. Anda dapat melihat betapa membingungkannya semua ini.

Bagaimanapun, kesimpulan akhir Melanie yang harus kita hindari menggunakan <details> untuk menu didasarkan pada bagaimana teknologi bantu membaca dan mengumumkan <details> yang mengandung unsur interaktif. Elemen diumumkan, tetapi tidak disebutkan tentang kontrol interaktif di luar itu sampai Anda, eh, berinteraksi dengan <details>. Hanya dengan begitu sesuatu seperti daftar tautan akan diumumkan.

Selain itu, konten di dalam runtuh <details> dikecualikan dari pencarian dalam halaman (kecuali di browser Chromium, yang dapat mengakses konten yang diciutkan pada saat penulisan), membuat segalanya semakin sulit ditemukan.

Harus <summary> izinkan elemen interaktif?

Itulah pertanyaan yang diajukan dalam utas terbuka ini. Idenya adalah bahwa sesuatu seperti ini tidak valid:

<details>
  <summary><a href="...">Link element</a></summary>
</details>

<!-- or -->

<details>
  <summary><input></summary>
</details>

Scott O'Hara menyimpulkan dengan baik mengapa ini menjadi masalah?:

Tautan tidak dapat ditemukan sama sekali ke JAWS saat menavigasi dengan kursor virtualnya. Jika menavigasi ke elemen ringkasan melalui tombol Tab, JAWS mengumumkan "contoh teks, tombol" sebagai nama dan peran elemen. Jika menekan tombol Tab lagi, JAWS kembali mengumumkan "contoh teks, tombol" meskipun fokus keyboard ada di tautan.

[...]

Ada lebih banyak yang bisa saya lanjutkan dengan berbagai masalah yang dimiliki AT berbeda dengan model konten untuk ringkasan ... tetapi itu hanya akan memperluas komentar ini melampaui apa yang diperlukan. tldr; model konten ringkasan menghasilkan pengalaman yang sangat tidak konsisten dan terkadang hanya datar untuk orang yang menggunakan AT.

Scott membuka tiket untuk memperbaiki perilaku ini di Khrom dan WebKit. Terima kasih, Scott!

Namun, ini adalah HTML yang valid:

Scott melangkah lebih jauh dalam terpisah posting blog. Misalnya, dia menjelaskan bagaimana menampar role=button on <summary> mungkin tampak seperti perbaikan yang masuk akal untuk memastikannya diumumkan secara konsisten oleh teknologi bantu. Itu juga akan menyelesaikan perdebatan tentang apakah— <summary> harus memungkinkan elemen interaktif karena tombol tidak boleh berisi elemen interaktif. Satu-satunya masalah adalah Safari kemudian memperlakukan <summary> sebagai tombol standar, yang kehilangannya expanded dan collapsed negara bagian. Jadi, peran yang benar diumumkan, tetapi sekarang statusnya tidak.

Kemana kita pergi sekarang?

Apakah Anda takut untuk menggunakan? <details>/<summary> dengan semua masalah dan inkonsistensi ini? Saya yakin, tetapi hanya untuk memastikan bahwa apa yang ada di dalamnya memberikan pengalaman dan harapan yang tepat bagi pengguna.

Saya senang percakapan ini terjadi dan terjadi di tempat terbuka. Karena itu, Anda dapat mengomentari tiga solusi yang diusulkan Scott tentang bagaimana model konten untuk <summary> ditentukan, upvote tiketnya, dan laporkan masalah Anda sendiri dan kasus penggunaan saat Anda melakukannya. Mudah-mudahan, semakin baik kita memahami bagaimana elemen digunakan dan apa yang kita harapkan dari mereka, semakin baik penerapannya.