טאָאָלטיפּס פילן ווי דער קלענסטער UI פּראָבלעם איר קענען האָבן. זיי זענען קליינטשיק און יוזשאַוואַלי פאַרבאָרגן. ווען עמעצער פרעגט ווי צו בויען איינער, די טראדיציאנעלן ענטפער כּמעט שטענדיק קומט צוריק מיט עטלעכע דזשאַוואַסקריפּט ביבליאָטעק. און פֿאַר אַ לאַנג צייַט, דאָס איז געווען די פיליק עצה. איך האב עס אויך נאכגעפאלגט. אויף די ייבערפלאַך, אַ טאָאָלטיפּ איז פּשוט. האָווער אָדער פאָקוס אויף אַן עלעמענט, ווייַזן אַ קליין קעסטל מיט עטלעכע טעקסט, און באַהאַלטן עס ווען דער באַניצער איז אַוועק. אָבער אַמאָל איר שיקן איינער צו פאַקטיש ניצערס, די עדזשאַז אָנהייבן צו ווייַזן. קלאַוויאַטור יוזערז קלאָץ אין די צינגל, אָבער קיינמאָל זען די טאָאָלטיפּ. סקרין לייענער מעלדן עס צוויי מאָל אָדער נישט. די טאָאָלטיפּ פליקערט ווען איר מאַך די מויז צו געשווינד. עס אָוווערלאַפּס אינהאַלט אויף קלענערער סקרינז. דרינגלעך Esc טוט נישט פאַרמאַכן עס. פאָקוס געץ פאַרפאַלן. מיט דער צייט, מיין טאָאָלטיפּ קאָד געוואקסן אין עפּעס איך האט נישט טאַקע ווילן צו פאַרמאָגן ענימאָר. עווענט צוהערערס הויפן זיך. האָווער און פאָקוס האט צו זיין כאַנדאַלד סעפּעראַטלי. אַרויס קליקס דארף ספּעציעל קאַסעס. ARIA אַטריביוץ האָבן צו זיין סינק מיט האַנט. יעדער קליין פאַרריכטן צוגעגעבן אן אנדער שיכטע פון לאָגיק. ביבליאָטעקן געהאָלפֿן, אָבער זיי זענען אויך מער ווי שוואַרץ באָקסעס איך געארבעט אַרום אַנשטאָט פון גאָר פֿאַרשטיין וואָס איז געשעעניש הינטער די סינז. דאָס איז געווען וואָס פּושט מיר צו קוקן אין די נייַער Popover API. איך געוואלט צו זען וואָס וואָלט פּאַסירן אויב איך ריבילט אַ איין געצייַג מיט די געבוירן מאָדעל פון דעם בלעטערער אָן די הילף פון אַ ביבליאָטעק. ווען מיר אָנהייבן, עס איז כדאי צו באמערקן אַז, ווי מיט קיין נייַע שטריך, עס זענען עטלעכע זאכן וואָס זענען נאָך ייערנד. ווי געזאָגט, עס דערווייַל ינדזשויז גרויס בלעטערער שטיצן, כאָטש עס זענען עטלעכע טיילן פון די קוילעלדיק API וואָס זענען אין פלאַקס. עס איז ווערט צו האַלטן אַן אויג אויף Caniuse אין דער דערווייל. די "אַלט" מכשירים איידער די Popover API, ניצן אַ טאָאָלטיפּ ביבליאָטעק איז נישט אַ דורכוועג. עס איז געווען די פעליקייַט. בראַוזערז האָבן נישט אַ געבוירענער באַגריף פון אַ טאָאָלטיפּ וואָס געארבעט אַריבער מויז, קלאַוויאַטור און אַסיסטיוו טעכנאָלאָגיע. אויב איר זאָרגן וועגן ריכטיק, דיין בלויז אָפּציע איז געווען צו נוצן אַ ביבליאָטעק, און דאָס איז פּונקט וואָס איך האָב געטאָן. אין אַ הויך מדרגה, דער מוסטער איז שטענדיק דער זעלביקער: אַ צינגל עלעמענט, אַ פאַרבאָרגן טאָאָלטיפּ עלעמענט, און דזשאַוואַסקריפּט צו קאָואָרדאַנאַט די צוויי.
די ביבליאָטעק כאַנדאַלד די וויירינג וואָס ערלויבט די עלעמענט צו ווייַזן אויף האָווער אָדער פאָקוס, באַהאַלטן אויף בלער אָדער מויז לאָזן, און ריפּאַזישאַן / רעסיזע אויף מעגילע.
מיט דער צייט, די טאָאָלטיפּ קען ווערן שוואַך. קליין ענדערונגען געפירט ריזיקירן. מינערווערטיק פיקסיז געפֿירט ראַגרעשאַנז. ערגער, אַדינג נייַ מכשירים ינכעראַטיד די זעלבע קאַמפּלעקסיטי. טינגז טעקניקלי געארבעט, אָבער קיינמאָל פּעלץ געזעצט אָדער גאַנץ. דאָס איז געווען דער שטאַט פון טינגז ווען איך באַשלאָסן צו ריבילד די טאָאָלטיפּ מיט די געבוירן פּאָפּאָווער אַפּי פון דעם בלעטערער. דער מאָמענט איך געפרוווט די פּאָפּאָווער אַפּי איך האָב נישט באַשטימען צו ניצן די Popover API ווייַל איך געוואלט צו עקספּערימענט מיט עפּעס נייַ. איך סוויטשט ווייַל איך איז געווען מיד פון מיינטיינינג טאָאָלטיפּ נאַטור אַז איך געגלויבט אַז דער בלעטערער זאָל האָבן שוין פארשטאנען. איך איז געווען סקעפּטיקאַל אין ערשטער. רובֿ נייַע וועב אַפּיס צוזאָג פּאַשטעס, אָבער נאָך דאַרפן קליי, ברעג-פאַל האַנדלינג אָדער פאָלבאַקק לאָגיק וואָס שטיל ריקריייץ די זעלבע קאַמפּלעקסיטי אַז איר האָט טריינג צו אַנטלויפן. אַזוי, איך געפרואווט די Popover API אין דער קלענסטער וועג מעגלעך. דאָ איז ווי דאָס האָט אויסגעזען:
1. די קלאַוויאַטור "פונקט וואָרקס" קלאַוויאַטור שטיצן איז אָפענגען אויף קייפל לייַערס ריכטיק: פאָקוס האט צו צינגל די טאָאָלטיפּ, בלער האט צו באַהאַלטן עס, Esc האט צו זיין ווייערד מאַניואַלי, און טיימינג איז וויכטיק. אויב איר מיסט איין ברעג פאַל, די טאָאָלטיפּ וואָלט זיין אָפן צו לאַנג אָדער פאַרשווינדן איידער עס קען זיין לייענען. מיט די פּאָפּאָווער אַטריביוט באַשטימט צו אַוטאָ אָדער מאַנואַל, דער בלעטערער נעמט איבער די באַסיקס: טאַב און שיפט + טאַב ביכייווז נאָרמאַלי, Esc קלאָוזיז די טאָאָלטיפּ יעדער מאָל, און קיין עקסטרע צוהערערס זענען פארלאנגט.
וואָס פאַרשווונדן פון מיין קאָדעבאַסע זענען גלאבאלע קיידאַון האַנדלערס, עסק-ספּעציפיש קלינאַפּ לאָגיק און שטאַט טשעקס בעשאַס קלאַוויאַטור נאַוויגאַציע. די קלאַוויאַטור דערפאַרונג פארשטאפט זיין עפּעס איך האט צו טייַנען, און עס איז געווארן אַ בלעטערער גאַראַנטירן. 2. סקרעענרעאַדער פּרידיקטאַביליטי דאָס איז געווען דיביגאַסט פֿאַרבעסערונג. אפילו מיט אָפּגעהיט ARIA אַרבעט, די נאַטור וועריד, ווי איך אַוטליינד פריער. יעדער קליין ענדערונג פּעלץ ריזיקאַליש. ניצן אַ פּאָפּאָווער מיט אַ געהעריק ראָלע קוקט און פילז פיל מער סטאַביל און פּרידיקטאַבאַל ווי ווייַט ווי וואָס וועט פּאַסירן:
און דאָ ס אן אנדער געווינען: נאָך די באַשטימען, ליגהטהאָוסע פארשטאפט פלאַגינג פאַלש ARIA שטאַט וואָרנינגז פֿאַר די ינטעראַקשאַן, לאַרגעלי ווייַל עס זענען ניט מער מנהג ARIA שטאַטן פֿאַר מיר צו אַקסאַדענאַלי באַקומען פאַלש.
3. פאָקוס מאַנאַגעמענט פאָקוס איז געווען שוואַך. פריער, איך געהאט כּללים ווי: לאָזן פאָקוס צינגל ווייַזן טאָאָלטיפּ, מאַך פאָקוס אין טאָאָלטיפּ און טאָן ניט פאַרמאַכן, בלער צינגל ווען עס איז צו נאָענט, און נאָענט טאָאָלטיפּ און ומקערן פאָקוס מאַניואַלי. דאס געארבעט ביז עס האט נישט. מיט די Popover API, דער בלעטערער ענפאָרסיז אַ סימפּלער מאָדעל ווו פאָקוס קענען מער געוויינטלעך מאַך אין די פּאָפּאָווער. קלאָוזינג די פּאָפּאָווער קערט פאָקוס צו די צינגל, און עס זענען קיין ומזעיק פאָקוס טראַפּס אָדער פאַרפאַלן פאָקוס מאָומאַנץ. און איך האט נישט לייגן פאָקוס רעסטעריישאַן קאָד; איך האב עס אראפגענומען.
מסקנא די פּאָפּאָווער אַפּי מיטל אַז טאָאָלטיפּס זענען ניט מער עפּעס איר סימיאַלייט. זיי זענען עפּעס דער בלעטערער פארשטייט. עפן, קלאָוזינג, קלאַוויאַטור נאַטור, אַנטלויפן האַנדלינג און אַ גרויס טייל פון אַקסעסאַביליטי קומען איצט פֿון דער פּלאַטפאָרמע זיך, נישט פֿון אַד-האָק דזשאַוואַסקריפּט. דאָס קען נישט מיינען אַז טאָאָלטיפּ לייברעריז זענען פאַרעלטערט ווייַל זיי נאָך מאַכן זינען פֿאַר קאָמפּלעקס פּלאַן סיסטעמען, שווער קוסטאָמיזאַטיאָן אָדער לעגאַט קאַנסטריינץ, אָבער די פעליקייַט איז שיפטיד. פֿאַר די ערשטער מאָל, די סימפּלאַסט מכשירים קען אויך זיין די מערסט ריכטיק. אויב איר זענט טשיקאַווע, פּרוּווט דעם עקספּערימענט: פשוט פאַרבייַטן בלויז איין טאָאָלטיפּ אין דיין פּראָדוקט מיט די Popover API, טאָן ניט רירייט אַלץ, טאָן ניט מייגרייט אַ גאַנץ סיסטעם, און נאָר קלייַבן איינער און זען וואָס פאַרשווינדן פון דיין קאָד. ווען די פּלאַטפאָרמע גיט איר אַ בעסער פּרימיטיוו, די געווינען איז נישט בלויז ווייניקערע שורות פון דזשאַוואַסקריפּט, אָבער עס איז ווייניקערע טינגז איר האָבן צו זאָרג וועגן. קוק די פול מקור קאָד אין מיין GitHub רעפּאָ. ווייַטער לייענען פֿאַר דיפּער דייווז אין פּאָפּאָווערס און פֿאַרבונדענע אַפּיס:
"פּאָפּפּין 'אין," Geoff Graham "קלעראַפייינג די שייכות צווישן פּאָפּאָווערס און דיאַלאָגס", Zell Liew "וואָס איז פּאָפּאָווער = אָנצוהערעניש?", ונאַ קראַוועץ "ינוואָקער קאַמאַנדז", דניאל שוואַרץ "שאַפֿן אַן אַוטאָ-קלאָוזינג אָנזאָג מיט אַ HTML פּאָפּאָווער", פּרעעטהי עפֿענען UI Popover API Explainer "קנאַל (איבער) די באַלונז", יוחנן רהע "CSS אַנקער פּאַזישאַנינג", Juan Diego Rodríguez
MDN אויך אָפפערס פולשטענדיק טעכניש דאַקיומענטיישאַן פֿאַר די Popover API.
