Dialog

רכיב התיבת הדו-שיח הוא רכיב שימושי שמייצג כל סוג של תיבת דו-שיח ב-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 לא עובר בירושה.

בדיקת ההבנה

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