`<dialog>`: iletişim kutusu öğesi

• HTML `` öğesi, tarayıcının yerel modal ve modal olmayan iletişim kutularını oluşturur; modal olanlar sayfanın geri kalanını inert durumuna getirerek etkileşimi engeller
• Açma ve kapatma için temel yöntemler showModal(), show(), close() olup, form, Invoker Commands API ve Popover API ile de bildirime dayalı kontrol mümkündür
• closedby özniteliği, kullanıcının iletişim kutusunu kapatabileceği yolları any, closerequest, none olarak ayırır ve varsayılan davranış açılma biçimine göre değişir
• Erişilebilirlikte ilk odak ve açık bir kapatma düğmesi önemlidir; showModal() ile açılan iletişim kutuları varsayılan olarak ilk odaklanabilir öğeye odak verir ve Esc tuşuyla kapatmayı destekler
• Stillemede :modal, :open, ::backdrop kullanılır; animasyonlar içinse display, overlay, @starting-style, transition-behavior: allow-discrete gibi ayrık geçiş işleme teknikleri gerekir

---

`` öğesinin rolü ve modal davranış

• HTML `` öğesi, modal ve modal olmayan iletişim kutuları oluşturmak için kullanılan bir öğedir
• Modal iletişim kutuları, diğer UI öğeleriyle etkileşimi engeller ve sayfanın geri kalanını inert durumuna getirir
• Modal olmayan iletişim kutuları ise açıkken sayfanın geri kalanıyla etkileşimi sürdürür

Açık durumu ve kapatma politikası

• `` tüm genel öznitelikleri içerir, ancak tabindex özniteliği kullanılmamalıdır
  • `` öğesinin kendisi etkileşimli bir öğe değildir ve odak almaz
  • İçerdiği içerik ve kapatma düğmeleri odak alabilir ve etkileşime girebilir
• open özniteliği, iletişim kutusunun etkin ve etkileşime açık olduğunu gösterir
  • open özniteliği yoksa kullanıcıya görünmez
  • İletişim kutusunu göstermek için open özniteliği yerine .show() veya .showModal() kullanılması önerilir
  • open özniteliğiyle açılan `` modal değildir
  • Modal olmayan iletişim kutularının açık/kapalı durumu open özniteliği açılıp kapatılarak değiştirilebilir, ancak bu önerilmez
• closedby özniteliği, kullanıcının iletişim kutusunu hangi yollarla kapatabileceğini belirtir
  • any: üç yöntemin tümüyle kapatılabilir
    • İletişim kutusunun dışına tıklama veya dokunma gibi light dismiss
    • Esc tuşu, mobilde geri gitme ya da kapatma hareketi gibi platforma özgü davranışlar
    • HTMLDialogElement.close() çağıran bir düğme veya form gönderimi gibi geliştirici tarafından belirlenen yöntemler
  • closerequest: platforma özgü davranışlar ve geliştirici tarafından belirlenen yöntemlerle kapatılabilir
  • none: yalnızca geliştirici tarafından belirlenen yöntemlerle kapatılabilir
  • Geçerli bir closedby değeri yoksa, showModal() ile açıldığında closerequest gibi; diğer durumlarda none gibi davranır

JavaScript ve bildirime dayalı kontrol

• JavaScript ile `` öğesinin gösterilmesi ve kapatılması doğrudan kontrol edilebilir
  • showModal(): modal iletişim kutusunu gösterir
  • show(): modal olmayan iletişim kutusunu gösterir
  • close(): iletişim kutusunu kapatır
  • `` içindeki form, method="dialog" ile gönderilerek de kapatılabilir
  • Modal iletişim kutuları Esc tuşuyla da kapatılabilir
• Invoker Commands API, yalnızca düğme öznitelikleriyle modal iletişim kutularını açıp kapatmayı sağlar
  • button üzerinde commandfor ve command öznitelikleri belirtilir
  • İletişim kutusu için kullanılabilecek komutlar "show-modal", "close", "request-close" şeklindedir

Open dialog

  This dialog was opened using an invoker command.

  Close

• Popover API, modal olmayan iletişim kutularını bildirime dayalı biçimde açmayı, kapatmayı ve değiştirmeyi sağlar
  • `` öğesine popover özniteliği eklenerek bir popover yapılır
  • Düğme ya da giriş öğesinde popovertarget, popovertargetaction belirtilir
  • Popover iletişim kutuları modal olmadığından dışarı tıklanarak kapatılabilir
  • popover değeri belirtilmezse varsayılan "auto" kullanılır ve light dismiss etkin olur
  • popover="manual", light dismiss'i devre dışı bırakır; kapatma düğmesi gibi ayrı bir yönteme ihtiyaç duyulur
  • popovertargetaction belirtilmezse varsayılan olarak toggle kullanılır

Form gönderimi ve kapatma işleme

• Tüm `` öğelerinde, fiziksel klavyesi olmayan cihazlarda da çalışacak bir kapatma mekanizması gerekir
• Kapatma yöntemleri çeşitlidir
  • İçteki form öğesinde method="dialog" ayarlanıp gönderim yapılması
  • Light dismiss etkinse iletişim kutusunun dışına tıklanması
  • İzin verilen iletişim kutularında Esc tuşuna basılması
  • HTMLDialogElement.close() çağrılması
• form veya gönderim düğmesindeki formmethod="dialog", iletişim kutusunu kapatır
  • Form kontrol durumları kaydedilir ancak form gönderilmez
  • returnValue, etkinleştirilen düğmenin değeri olarak ayarlanır
• Zorunlu giriş alanları içeren formlarda, kullanıcı aracısı değer sağlanana kadar normal gönderimle iletişim kutusunun kapanmasını engeller
  • Kapatma düğmesinde formnovalidate kullanmak form doğrulamasını atlamayı sağlar
  • JavaScript'te dialog.close() çağrılarak da kapatılabilir

Odak ve erişilebilirlik

• `` showModal() ile açıldığında, varsayılan olarak ilk iç içe odaklanabilir öğeye odak verilir
• Belirli bir iletişim kutusunda en uygun ilk odak konumunu belirtmek için autofocus özniteliği kullanılabilir
  • Hemen etkileşime girilecek bir öğe yoksa, autofocus özniteliğinin kapatma düğmesine verilmesi önerilir
  • Dinamik olarak render edilen iletişim kutuları gibi ilk odak konumu belirsizse, `` öğesinin kendisi uygun bir ilk odak noktası olabilir
• Tüm kullanıcıların kapatabilmesi için onay, iptal veya kapat düğmesi gibi açık düğmeler eklemek en sağlam yöntemdir
• showModal() ile açılan iletişim kutuları varsayılan olarak Esc tuşuyla kapanır
  • Modal olmayan iletişim kutuları varsayılan olarak Esc tuşuyla kapanmaz
  • Klavye kullanıcıları, modal iletişim kutularının Esc tuşuyla kapanmasını bekler
  • Birden fazla modal iletişim kutusu açıksa, Esc tuşu yalnızca en son gösterilen iletişim kutusunu kapatmalıdır; `` kullanıldığında tarayıcı bu davranışı sağlar
• Yerel ``, başka öğelerle oluşturulan özel iletişim kutularında elle kopyalanması gereken kullanılabilirlik ve erişilebilirlik özellikleri sunar
• Tarayıcılar, `` öğesini ARIA role="dialog" kullanan özel iletişim kutularına benzer şekilde sunar
  • showModal() ile açılan ``, örtük olarak aria-modal="true" taşır
  • show(), open özniteliği veya varsayılan display değişikliğiyle gösterilen ``, aria-modal="false" olarak sunulur
  • Modal iletişim kutusu uygulanırken, `` ve içeriği dışındaki her şey inert olarak render edilmelidir; showModal() kullanıldığında tarayıcı bunu sağlar

CSS stillemesi ve backdrop

• ``, normal bir öğe gibi öğe adıyla seçilebilir
• Duruma bağlı stillemede :modal ve :open sözde sınıfları kullanılabilir
• Modal iletişim kutusunun arka planı ::backdrop sözde öğesiyle stillendirilebilir
  • showModal() ile iletişim kutusu gösterildiğinde `` arkasında görünen backdrop'a uygulanır
  • inert durumundaki arka içerik bulanıklaştırılabilir, karartılabilir veya örtülebilir

Örneklerle kullanım desenleri

• Invoker Commands API örneği, iletişim kutusunu command="show-modal" düğmesiyle açar ve command="close" düğmesiyle kapatır
  • “Open dialog” düğmesiyle açılabilir
  • “Close” düğmesi veya Esc tuşuyla kapatılabilir
• Popover API örneği, popover, popovertarget, popovertargetaction ile modal olmayan iletişim kutusunu açar ve kapatır
  • “Close” düğmesi, Esc tuşu veya iletişim kutusunun dışının seçilmesiyle kapatılabilir
  • popover="manual" kullanılırsa light dismiss devre dışı kalır
• open özniteliği örneği, sayfa yüklendiğinde zaten açık olan yalnızca HTML tabanlı modal olmayan bir iletişim kutusu oluşturur
  • form içindeki “OK” düğmesiyle kapatılabilir
  • Kapandıktan sonra yeniden açma yöntemi sunulmaz
  • Modal olmayan iletişim kutularını göstermek için HTMLDialogElement.show() tercih edilir
• Modal iletişim kutusu örneği, .showModal() ile açılır ve close() ile kapanır
  • ::backdrop ile degrade arka plan stillendirilir
  • İletişim kutusu açıldığında, iletişim kutusu dışı inert duruma geçer ve belgeyle etkileşim kurulamaz
• returnValue örneği, iletişim kutusunun dönüş değerini form ve düğme değerleriyle ele alır
  • Varsayılan returnValue, boş bir dize ya da iletişim kutusu içindeki formu gönderen düğmenin değeridir
  • “Confirm” düğmesi, seçilen değeri close() içine geçirerek dönüş değeri olarak kullanır
  • Esc tuşuyla kapatılırsa returnValue güncellenmez ve close olayı da tetiklenmez; bu yüzden output metni güncellenmez

`` animasyonları

• Gizli için `display: none`, görünür için display: block kullanılır
• Görünürlük durumu değiştiğinde top layer ve erişilebilirlik ağacına eklenir veya bunlardan çıkarılır
• `` öğesini canlandırmak için display özelliğinin animasyona uygun olması gerekir
  • Destekleyen tarayıcılar display özelliğini ayrık animasyon olarak işler
  • none durumundan block durumuna geçerken, 0% anında block'a geçilir ve tüm animasyon boyunca görünür kalır
  • block durumundan none durumuna geçerken, 100% anında none'a geçilir ve tüm animasyon boyunca görünür kalır

• CSS transition ile animasyon

  • CSS transition ile `` animasyonu yapmak için şu özellikler gerekir
  • @starting-style: iletişim kutusu her açıldığında geçişin başlangıç değerini sağlar
  • display geçişi: geçiş sırasında iletişim kutusunu görünür display değeriyle tutar
  • overlay geçişi: top layer'dan çıkarılmasını geçiş bitene kadar geciktirir
  • transition-behavior: allow-discrete: normalde animasyonlanmayan display ve overlay için ayrık geçişleri etkinleştirir
  • :open sözde sınıfını desteklemeyen tarayıcılarda açık durum dialog[open] öznitelik seçicisiyle stillendirilebilir
  • ``, her gösterildiğinde display: none durumundan display: block durumuna geçtiği için, her giriş geçişi @starting-style içinden dialog:open stiline geçer

• keyframe animasyonları

  • CSS keyframe animasyonları transition'lardan farklı kısıtlamalara sahiptir
  • @starting-style sağlamaz
  • display değeri keyframe içine dahil edilir
  • allow-discrete'in açıkça etkinleştirilmesi gerekmez
  • overlay değerinin keyframe içinde ayarlanmasına da gerek yoktur
  • Backdrop fade-out, iletişim kutusu kapanırken backdrop DOM'dan anında kaldırıldığı için animasyonlanamaz

Teknik özet

• İçerik kategorileri: flow content, sectioning root
• İzin verilen içerik: flow content
• Başlangıç ve bitiş etiketleri zorunludur; etiket atlama yoktur
• İzin verilen ebeveynler: flow content kabul eden tüm öğeler
• Örtük ARIA rolü: dialog
• İzin verilen ARIA rolü: alertdialog
• DOM arayüzü: HTMLDialogElement
• Şartname: HTML # the-dialog-element