דו שיח

רכיב התיבת הדו-שיח הוא רכיב שימושי שמייצג כל סוג של תיבת דו-שיח ב-HTML.

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

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

רכיב ה-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> בשיטה .showModal(). רכיב הפסאודו הזה תואם לכל הרקעים, כולל הרקע שמוצג כשמשתמשים ב-FullScreen API, למשל כשצופים בסרטון במצב מסך מלא שאין לו את אותו יחס גובה-רוחב כמו המסך או הצג.

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

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

למרות שלפי המפרט אין חובה להציג לחצן לסגירה של תיבת הדו-שיח, מומלץ להציג אותו. לחצן 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 שמוגדר ב-close <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 לא עובר בירושה.

בדיקת ההבנה

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