Dialog

תיבת דו-שיח מודאלית היא סוג מיוחד של תיבה קופצת בדף אינטרנט: חלון קופץ שמפריע למשתמש להתמקד בעצמו. יש כמה תרחישים לדוגמה מתאימים לפתיחת תיבת דו-שיח, אבל כדאי להביא בחשבון שצריך לבצע לפני כן. תיבות דו-שיח מודאליות מאלצות את המשתמשים להתמקד בתוכן ספציפי, ובאופן זמני לפחות, מתעלמים מהם שאר הדף.

תיבות הדו-שיח יכולות להיות מודאליות (אפשר לנהל אינטראקציה רק עם התוכן שבתיבת הדו-שיח) או לא להיות מודאליות (עדיין אפשר לקיים אינטראקציה בתוכן שנמצא מחוץ לתיבת הדו-שיח). תיבות דו-שיח עם מודלים מוצגים מעל לשאר התוכן בדף. השאר של הדף הוא אינרט, וכברירת מחדל, מוסתר על ידי רקע שקוף למחצה.

רכיב ה-HTML הסמנטי <dialog> כדי ליצור תיבת דו-שיח כולל סמנטיקה, אינטראקציות עם המקלדת וכל המאפיינים והשיטות של הממשק HTMLDialogElement.

תיבות דו-שיח מודאליות

כאן יש דוגמה לחלון מודאלי של <dialog>. פותחים את תיבת הדו-שיח עם 'פתיחת תיבת דו-שיח של חלון העזר'. לחצן. לאחר הפתיחה, יש שלוש דרכים לסגור את תיבת הדו-שיח: המקש Escape, שליחת טופס עם לחצן עם הסמל formmethod="dialog" מוגדרת (או אם הוגדר method="dialog" בטופס עצמו), והשיטה HTMLDialogElement.close().

ל-HTMLDialogElement יש שלוש שיטות עיקריות, יחד עם כל השיטות שעברו בירושה מ-HTMLElement.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

כי <dialog> נפתח דרך HTMLDialogElement.showModal() זוהי תיבת דו-שיח של מודל. פתיחה של תיבת דו-שיח מודאלית משביתה ומסתירה את כל התוכן מלבד תיבת הדו-שיח עצמה. אם מעבירים את העכבר מעל ממשק המשתמש מחוץ לתיבת הדו-שיח, כדי לראות שכל הרכיבים מתנהגים כאילו pointer-events: none; הוגדר; גם הלחצן שפותח את תיבת הדו-שיח לא מגיב לאינטראקציות.

כשתיבת הדו-שיח נפתחת, המיקוד עובר לתיבת הדו-שיח. המיקוד מוגדר ברכיב הראשון בסדר הניווט הרציף במקלדת בתוך תיבת הדו-שיח. אם מקישים על המקש tab שוב ושוב, אפשר לראות שרק התוכן שבתיבת הדו-שיח יכול לקבל מיקוד בזמן שתיבת הדו-שיח פתיחה. כל מה מחוץ לתיבת הדו-שיח של החלון אינו קבוע כל עוד תיבת הדו-שיח פתוחה.

כאשר תיבת דו-שיח נסגרת, בחלון מודאלי או לא, המיקוד מוחזר לרכיב שפתח את תיבת הדו-שיח. אם בהתקנה פרוגרמטית לפתוח תיבת דו-שיח שלא על סמך פעולת המשתמש, ולבדוק מחדש. אם אתם חייבים, ודאו שהמיקוד מוחזר למקום שבו הוא היה לפני פתיחת תיבת הדו-שיח, במיוחד אם המשתמש סוגר את תיבת הדו-שיח בלי לקיים איתה אינטראקציה.

יש מאפיין inert גלובלי שבאמצעותו אפשר להשבית רכיב ואת כל הצאצאים שלו, חוץ מאלה פעילים כשנפתחת תיבת דו-שיח של חלון מודאלי באמצעות showModal(), האינטנסיביות או ההשבתה לא כרוכות בתשלום. המאפיין שההגדרות לא מוגדרות במפורש.

אפשר לעצב את הרקע שמסתיר כל דבר מלבד תיבת הדו-שיח באמצעות הסמל ::backdrop פסאודו-רכיב. הרקע מוצג רק כשמוצג <dialog> באמצעות ה-method .showModal(). הרכיב המדומה הזה תואם לכל הרקעים, כולל הרקע שמוצג כשמשתמשים ב-FullScreen API, למשל, כשצופים בסרטון במצב מסך מלא שאין לו אותו יחס גובה-רוחב כמו במסך או בצג.

תיבות דו-שיח לא מודאליות

גם ב-HTMLDialogElement.show() נפתחת תיבת דו-שיח, אבל בלי להוסיף רקע ובלי לגרום לשום דבר להיות אינטנסיבי. המקש Escape לא סוגר תיבות דו-שיח שאינן מודאליות. לכן חשוב עוד יותר לוודא שכוללים שיטה של סגירת תיבת הדו-שיח שאינה מודאלית. במקרה כזה, אם הפריים נמצא מחוץ לתיבת הדו-שיח, הוא מבין שהמיקוד יעבור לאלמנט שפתחה את תיבת הדו-שיח, וייתכן שחוויית המשתמש היא לא הכי טובה.

הלחצן לסגירה של תיבת הדו-שיח לא נדרש באופן רשמי לפי המפרט, אבל הוא נדרש כפי שנדרש. מקש Escape יסגור תיבת דו-שיח של חלון, אבל לא תיבת דו-שיח שאינה מודאלית. לחצן גלוי שיכול לקבל מיקוד משפר את הנגישות חוויית המשתמש.

סגירה של תיבת דו-שיח

לא צריך את השיטה HTMLDialogElement.close() כדי לסגור תיבת דו-שיח. אין צורך ב-JavaScript בכלל. כדי לסגור את <dialog> בלי JavaScript, צריך לכלול טופס עם שיטת דו-שיח באמצעות ההגדרה method="dialog" ב-<form> או ב-formmethod="dialog" על הלחצן.

כשמשתמש שולח באמצעות השיטה dialog, מצב הנתונים שהוזנו על ידי המשתמשים נשמר. למרות שיש אירוע שליחה, הטופס עובר אימות אילוץ (אלא אם מוגדר novalidate) – נתוני המשתמש לא נמחקים ולא נשלחו. לחצן סגירה ללא JavaScript יכול להיכתב כך:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

אולי שמתם לב למאפיין autofocus מוגדר בסגירה <button> בדוגמה הזו. רכיבים עם מאפיין autofocus שמוגדר בתוך <dialog> לא יקבלו להתמקד בטעינת הדף (אלא אם הדף נטען ותיבת הדו-שיח מוצגת). עם זאת, הם יתמקדו כשתיבת הדו-שיח תיפתח.

כברירת מחדל, כשנפתחת תיבת דו-שיח, המיקוד על הרכיב הראשון שניתן להתמקד בו בתוך תיבת הדו-שיח יהיה זמין, אלא אם בתוך תיבת הדו-שיח עם קבוצת המאפיינים autofocus. הגדרת המאפיין autofocus בלחצן הסגירה מבטיחה המיקוד מקבל כשתיבת הדו-שיח נפתחת. אבל כולל autofocus בתוך <dialog> צריך לעשות זאת רק עם מחשבה רבה. המערכת תדלג על כל הרכיבים ברצף שמופיעים לפני הרכיב עם המיקוד האוטומטי. נדון במאפיין הזה בהרחבה בשיעור המיקוד.

הממשק של HTMLDialogElement כולל returnValue לנכס. שליחת טופס עם method="dialog" מגדירה את המאפיין returnValue כ-name, אם קיים, של לחצן השליחה המשמש שולחים את הטופס. אם היינו כותבים <button type="submit" name="toasty">close</button>, הערך של returnValue הוא toasty.

כשנפתחת תיבת דו-שיח, המאפיין הבוליאני open קיים, כלומר שתיבת הדו-שיח פעילה וניתן לתקשר איתה. כשנפתחת תיבת דו-שיח על ידי הוספת המאפיין open מאשר דרך .show() או .showModal(), תיבת הדו-שיח תהיה ללא חלון. HTMLDialogElement.open הפונקציה מחזירה true או false, בהתאם לאפשרות שתיבת הדו-שיח זמינה לאינטראקציה – לא אם תיבת הדו-שיח זמינה או לא.

JavaScript היא השיטה המועדפת לפתיחת תיבת דו-שיח, כולל המאפיין open בטעינת דף, ולאחר מכן הסרה אותו עם .close(), יכול להבטיח שתיבת הדו-שיח תהיה זמינה גם כש-JavaScript לא זמין.

פרטים נוספים

אין להשתמש ב-tabindex

הרכיב שמופעל כדי לפתוח את תיבת הדו-שיח ולחצן הסגירה שכלול בה (ויכול להיות שתוכן אחר) יכולים לקבל להתמקד בהם והם אינטראקטיביים. הרכיב <dialog> אינו אינטראקטיבי ואינו מקבל מיקוד. לא להוסיף את הנכס tabindex לתיבת הדו-שיח עצמה.

תפקידים ב-ARIA

התפקיד המשתמע הוא dialog. אם תיבת הדו-שיח הוא חלון אישור שבו מוצגת הודעה חשובה שמחייבת אישור או תגובה אחרת של המשתמש, עם ההגדרה role="alertdialog". בתיבת הדו-שיח צריך להיות גם שם נגיש. אם אפשר להזין טקסט גלוי בשדה של השם הנגיש, צריך להוסיף aria-labelledby="idOfLabelingText".

ברירות המחדל של CSS

חשוב לשים לב שדפדפנים מספקים את סגנון ברירת המחדל של dialog. Firefox, Chrome ו-Edge הוגדרו color: CanvasText; background-color: Canvas; ו-Safari מגדיר את color: black; background-color: white; בגיליונות הסגנון של סוכן המשתמש. השדה color עובר בירושה מ-dialog ולא מ-body או :root. מצב כזה יכול להיות לא צפוי. הנכס background-color לא עובר בירושה.

בדיקת ההבנה

בוחנים את הידע שלכם לגבי רכיב תיבת הדו-שיח.