ကိရိယာအကြံပြုချက်များသည် သင်ရနိုင်သော အသေးငယ်ဆုံး UI ပြဿနာတစ်ခုလို ခံစားရသည်။ ၎င်းတို့သည် သေးငယ်ပြီး များသောအားဖြင့် ဝှက်ထားသည်။ တစ်စုံတစ်ယောက်က တစ်ခုတည်ဆောက်နည်းကို မေးသောအခါ၊ သမားရိုးကျအဖြေသည် JavaScript စာကြည့်တိုက်အချို့ကို အသုံးပြု၍ အမြဲလိုလို ပြန်ထွက်လာသည်။ အချိန်အတော်ကြာအောင်၊ အဲဒါက ဆင်ခြင်တုံတရားရှိတဲ့ အကြံဉာဏ်ပါပဲ။ ကျွန်တော်လည်း လိုက်ခဲ့သေးတယ်။ မျက်နှာပြင်ပေါ်တွင် tooltip သည်ရိုးရှင်းပါသည်။ ဒြပ်စင်တစ်ခုပေါ်တွင် ပျံဝဲ သို့မဟုတ် အာရုံစိုက်ပါ၊ အချို့သောစာသားပါသော အကွက်ငယ်ကို ပြပါ၊ ထို့နောက် အသုံးပြုသူမှ ထွက်ခွာသွားသောအခါ ၎င်းကို ဝှက်ထားပါ။ ဒါပေမယ့် တကယ့် သုံးစွဲသူတွေဆီ ပို့လိုက်တာနဲ့ အစွန်းတွေက စပြီး ပြလာပါတယ်။ ကီးဘုတ်အသုံးပြုသူများသည် အစပျိုးခြင်းသို့ တက်ဘ်၊ သို့သော် ကိရိယာအကြံပြုချက်ကို ဘယ်တော့မှ မမြင်ပါ။ ဖန်သားပြင်စာဖတ်သူများသည် ၎င်းကို နှစ်ကြိမ်ကြေညာသည်ဖြစ်စေ၊ လုံးဝမဖြစ်စေပါ။ မောက်စ်ကို မြန်မြန်ရွှေ့လိုက်သောအခါ ကိရိယာအကြံပြုချက်သည် တုန်ခါသွားသည်။ ၎င်းသည် သေးငယ်သော မျက်နှာပြင်များပေါ်တွင် အကြောင်းအရာကို ထပ်နေသည်။ Esc ကို နှိပ်ရင် မပိတ်ပါဘူး။ အာရုံတွေ ပျောက်သွားတယ်။ အချိန်ကြာလာသည်နှင့်အမျှ၊ ကျွန်ုပ်၏ tooltip ကုဒ်သည် ကျွန်ုပ် အမှန်တကယ် မပိုင်ဆိုင်ချင်တော့သော အရာတစ်ခုအဖြစ်သို့ တိုးလာသည်။ ပွဲနားထောင်သူများ စုပြုံလိုက်။ Hover နှင့် Focus ကို သီးခြားစီ ကိုင်တွယ်ရမည်။ ပြင်ပကလစ်နှိပ်ခြင်းများ အထူးလိုအပ်ပါတယ်။ ARIA ရည်ညွှန်းချက်များကို လက်ဖြင့် တစ်ပြိုင်တည်း သိမ်းဆည်းထားရပါမည်။ အသေးအမွှားပြင်ဆင်မှုတိုင်းသည် ယုတ္တိဗေဒအလွှာကို ထပ်မံထည့်သွင်းထားသည်။ စာကြည့်တိုက်များသည် ကူညီပေးခဲ့သော်လည်း ၎င်းတို့သည် နောက်ကွယ်တွင်ဖြစ်ပျက်နေသည်ကို အပြည့်အဝနားလည်မည့်အစား ကျွန်ုပ်လုပ်ဆောင်ခဲ့သော သေတ္တာနက်များနှင့် ပိုတူပါသည်။ အဲဒါက Popover API အသစ်ကို ကြည့်ဖို့ တွန်းအားပေးခဲ့တယ်။ စာကြည့်တိုက်အကူအညီမပါဘဲ ဘရောက်ဆာ၏ မူရင်းမော်ဒယ်ကို အသုံးပြု၍ တူးလ်အကြံပြုချက်တစ်ခုတည်းကို ပြန်လည်တည်ဆောက်ပါက ဘာဖြစ်မည်ကို မြင်ချင်ပါသည်။ ကျွန်ုပ်တို့စတင်သည်နှင့်အမျှ၊ မည်သည့်အင်္ဂါရပ်အသစ်မဆိုကဲ့သို့ပင်၊ ၎င်းနှင့်မွမ်းမံထားသည့်အရာအချို့ရှိနေသေးသည်ကို သတိပြုသင့်ပါသည်။ ဆိုလိုသည်မှာ၊ ၎င်းသည် flux တွင်ရှိသောစုစုပေါင်း API တွင်အပိုင်းပိုင်းများစွာရှိသော်လည်း၎င်းသည်လက်ရှိတွင်ကောင်းမွန်သောဘရောက်ဆာပံ့ပိုးမှုကိုနှစ်သက်သည်။ ဒီအတောအတွင်း Caniuse ကို စောင့်ကြည့်ဖို့ ထိုက်တန်ပါတယ်။ "အဟောင်း" ကိရိယာအကြံပြုချက် Popover API မတိုင်မီ၊ tooltip စာကြည့်တိုက်ကိုအသုံးပြုခြင်းသည် ဖြတ်လမ်းမဟုတ်ပါ။ ပုံသေဖြစ်ခဲ့သည်။ ဘရောက်ဆာများသည် မောက်စ်၊ ကီးဘုတ်နှင့် အထောက်အကူပြုနည်းပညာများပေါ်တွင် အသုံးပြုနိုင်သည့် ကိရိယာအကြံပြုချက်၏ မူလအယူအဆတစ်ခု မရှိပါ။ မှန်ကန်မှုကို သင်ဂရုစိုက်ပါက၊ သင့်တစ်ခုတည်းသော ရွေးချယ်ခွင့်မှာ စာကြည့်တိုက်တစ်ခု အသုံးပြုရန်ဖြစ်ပြီး ၎င်းသည် ကျွန်ုပ်လုပ်ခဲ့သည့်အတိုင်း ဖြစ်သည်။ မြင့်မားသောအဆင့်တွင်၊ ပုံစံသည် အမြဲတမ်းအတူတူဖြစ်သည်- အစပျိုးဒြပ်စင်တစ်ခု၊ ဝှက်ထားသောကိရိယာအကြံပြုချက်ဒြပ်စင်နှင့် ၎င်းတို့နှစ်ခုကိုညှိနှိုင်းရန် JavaScript။
ဒြပ်စင်အား အပေါ်မှ ရွှေ့ခြင်း သို့မဟုတ် အာရုံစူးစိုက်မှုတွင် ပြသရန်၊ မှုန်ဝါးခြင်း သို့မဟုတ် မောက်စ်ချန်ထားမှုတွင် ဝှက်ထားရန်နှင့် လှိမ့်ပေါ်တွင် နေရာချထားခြင်း/အရွယ်အစားကို ပြန်လည်နေရာချထားခြင်း/အရွယ်အစားကို ချိန်ညှိရန်တို့ကို ခွင့်ပြုသည့် စာကြည့်တိုက်မှ ဝိုင်ယာကြိုးများကို ကိုင်တွယ်သည်။
အချိန်ကြာလာသည်နှင့်အမျှ၊ tooltip သည် ပျက်စီးသွားနိုင်သည်။ သေးငယ်သော အပြောင်းအလဲများသည် အန္တရာယ်ရှိသည်။ အသေးအမွှားပြင်ဆင်မှုများသည် နောက်ပြန်ဆုတ်သွားစေသည်။ ပိုဆိုးသည်မှာ၊ ကိရိယာအကြံဉာဏ်အသစ်များထည့်ခြင်းသည် တူညီသောရှုပ်ထွေးမှုကို အမွေဆက်ခံသည်။ အရာများသည် နည်းပညာအရ လုပ်ဆောင်ခဲ့သော်လည်း မည်သည့်အခါမှ ပြေလည်မှု သို့မဟုတ် ပြီးပြည့်စုံသည်ဟု မခံစားရပါ။ ဘရောက်ဆာ၏ မူရင်း Popover API ကို အသုံးပြု၍ tooltip ကို ပြန်လည်တည်ဆောက်ရန် ဆုံးဖြတ်သောအခါ၊ Popover API ကို ကျွန်တော်စမ်းကြည့်တဲ့အခိုက် အသစ်တစ်ခုကို စမ်းသပ်လိုသောကြောင့် Popover API ကို အသုံးပြုခြင်းသို့ မပြောင်းခဲ့ပါ။ ဘရောက်ဆာက နားလည်ပြီးသားလို့ ယုံကြည်ထားတဲ့ tooltip အပြုအမူကို ထိန်းသိမ်းရတာ ငြီးငွေ့နေတာကြောင့် ပြောင်းလိုက်တယ်။ အစကတော့ သံသယဖြစ်မိတယ်။ ဝဘ် API အသစ်အများစုသည် ရိုးရှင်းမှုကို ကတိပေးသော်လည်း သင်လွတ်မြောက်ရန် ကြိုးစားနေသည့် တူညီသောရှုပ်ထွေးမှုကို တိတ်တဆိတ် ပြန်လည်ဖန်တီးပေးသည့် ကော်၊ အစွန်း-အဖုံး ကိုင်တွယ်ခြင်း သို့မဟုတ် နောက်ပြန်ဂျစ် လိုအပ်သေးသည်။ ထို့ကြောင့်၊ ဖြစ်နိုင်သမျှအသေးဆုံးနည်းဖြင့် Popover API ကိုကြိုးစားခဲ့သည်။ ဤသည်မှာ ပုံသဏ္ဍန်ဖြစ်သည်-
သို့ ချိတ်ဆက်မှုကို ဖန်တီးသည်။
1. Keyboard “Just Works” ကီးဘုတ်ပံ့ပိုးမှုအား မှန်ကန်စွာစီတန်းထားသော အလွှာများစွာပေါ်တွင်မူတည်သည်- အာရုံစူးစိုက်မှုသည် ကိရိယာအကြံပြုချက်ကို အစပျိုးရမည်ဖြစ်ပြီး၊ ၎င်းကို မှုန်ဝါးအောင်ဖုံးကွယ်ထားရမည်၊ Esc ကို ကိုယ်တိုင်ကြိုးတပ်ရမည်ဖြစ်ပြီး၊ အချိန်သည် အရေးကြီးသည်။ အကယ်၍ သင်သည် အစွန်းကွက်တစ်ခု လွတ်သွားပါက၊ ကိရိယာအကြံပြုချက်သည် အကြာကြီးပွင့်နေမည် သို့မဟုတ် ၎င်းကို မဖတ်နိုင်မီ ပျောက်ကွယ်သွားမည်ဖြစ်သည်။ အလိုအလျောက် သို့မဟုတ် လက်စွဲအဖြစ် သတ်မှတ်ထားသော popover ရည်ညွှန်းချက်ဖြင့်၊ ဘရောက်ဆာသည် အခြေခံအချက်များကို ကျော်တက်သည်- တဘ်နှင့် Shift+Tab ပုံမှန်အတိုင်း ပြုမူသည်၊ Esc သည် ကိရိယာအကြံပြုချက်ကို အချိန်တိုင်းပိတ်သည်၊ အပိုနားဆင်ရန်မလိုအပ်ပါ။
ကျွန်ုပ်၏ ကုဒ်ဘေ့စ်မှ ပျောက်ကွယ်သွားသော အရာများမှာ ကမ္ဘာလုံးဆိုင်ရာ သော့ချက်ဒေါင်းလုပ်ကိရိယာများ၊ Esc သီးသန့် ရှင်းလင်းရေး လော့ဂျစ်နှင့် ကီးဘုတ်လမ်းညွှန်မှုအတွင်း ပြည်နယ်စစ်ဆေးမှုများဖြစ်သည်။ ကီးဘုတ်အတွေ့အကြုံသည် ကျွန်ုပ်ထိန်းသိမ်းထားရမည့်အရာတစ်ခုအဖြစ် ရပ်သွားပြီး ၎င်းသည် ဘရောက်ဆာအာမခံဖြစ်လာသည်။ 2. Screenreader ခန့်မှန်းနိုင်မှု ဤသည်မှာ၊အကြီးမားဆုံးတိုးတက်မှု။ ဂရုတစိုက် ARIA အလုပ်ဖြင့်ပင်၊ ကျွန်ုပ်အစောပိုင်းဖော်ပြခဲ့သည့်အတိုင်း အမူအကျင့် ကွဲပြားပါသည်။ သေးငယ်တဲ့ပြောင်းလဲမှုတိုင်းဟာ အန္တရာယ်ရှိတယ်လို့ ခံစားရတယ်။ သင့်လျော်သောအခန်းကဏ္ဍတစ်ခုပါရှိသော popover ကိုအသုံးပြုခြင်းသည် မည်ကဲ့သို့ဖြစ်လာမည်ကိုသိရသည်အထိ ပိုမိုတည်ငြိမ်ပြီး ကြိုတင်မှန်းဆနိုင်သည်ဟု ခံစားရသည်-
ဤသည်မှာ နောက်ထပ်အနိုင်ရခြင်းဖြစ်သည်- ခလုတ်ပြီးနောက်၊ Lighthouse သည် အပြန်အလှန်တုံ့ပြန်မှုအတွက် မမှန်ကန်သော ARIA ပြည်နယ်သတိပေးချက်များကို အလံတင်နေခြင်းကို ရပ်လိုက်ပြီး၊ အဓိကအားဖြင့် ကျွန်ုပ်အတွက် ARIA စိတ်ကြိုက်ပြည်နယ်များ မရှိတော့သောကြောင့်၊
3. Focus Management အာရုံစူးစိုက်မှုမှာ နုနယ်သည်။ အရင်က၊ ကျွန်တော့်မှာ လိုမျိုး စည်းမျဉ်းတွေ ရှိတယ်- focus trigger ကို ပြရအောင်၊ tooltip မှာ focus ကို ရွှေ့ပြီး မပိတ်ပါနဲ့၊ အရမ်းနီးကပ်နေတဲ့အခါ trigger ကို မှုန်ဝါးအောင်၊၊ tooltip ကို ပိတ်ပြီး focus manual ပြန်ယူပါ။ ဤအရာသည် မလုပ်ဆောင်မချင်း လုပ်ဆောင်ခဲ့သည်။ Popover API ဖြင့်၊ ဘရောက်ဆာသည် ပေါ့ပ်ဗာသို့ အာရုံစူးစိုက်မှု ပိုမိုသဘာဝကျကျ ရွေ့လျားနိုင်သည့် ရိုးရှင်းသော မော်ဒယ်ကို ကျင့်သုံးသည်။ popover ကိုပိတ်ခြင်းဖြင့် အစပျိုးကို အာရုံစိုက်ပြီး မမြင်နိုင်သော အာရုံစူးစိုက်မှု ထောင်ချောက်များ သို့မဟုတ် ဆုံးရှုံးသွားသော အာရုံစူးစိုက်မှု အခိုက်အတန့်များ မရှိပါ။ ပြီးတော့ ကျွန်တော် focus restoration code မထည့်ခဲ့ပါဘူး။ အဲဒါကို ဖယ်လိုက်တယ်။
နိဂုံး Popover API သည် ကိရိယာအကြံပြုချက်များသည် သင်အတုယူသည့်အရာမဟုတ်တော့ကြောင်း ဆိုလိုသည်။ ၎င်းတို့သည် browser မှနားလည်သောအရာဖြစ်သည်။ အဖွင့်၊ အပိတ်၊ ကီးဘုတ်အမူအရာ၊ Escape ကိုင်တွယ်ခြင်း နှင့် အများသုံးစွဲနိုင်မှုအပိုင်းသည် ယခုအခါတွင် ad-hoc JavaScript မှမဟုတ်ဘဲ ပလပ်ဖောင်းကိုယ်တိုင်မှ လာပါသည်။ ရှုပ်ထွေးသော ဒီဇိုင်းစနစ်များ၊ လေးလံသော စိတ်ကြိုက်ပြင်ဆင်ခြင်း သို့မဟုတ် အမွေအနှစ် ကန့်သတ်ချက်များအတွက် အဓိပ္ပာယ်ရှိနေဆဲဖြစ်သောကြောင့် ကိရိယာအကြံပြုချက် ဒစ်ဂျစ်တိုက်များသည် အသုံးမပြုတော့ဟု မဆိုလိုပါ၊ သို့သော် ပုံသေပြောင်းသွားပါသည်။ ပထမအကြိမ်တွင်၊ အရိုးရှင်းဆုံး tooltip သည် အမှန်ကန်ဆုံးဖြစ်နိုင်သည်။ သင်စိတ်ဝင်စားပါက ဤစမ်းသပ်ချက်ကို စမ်းကြည့်ပါ- Popover API ဖြင့် သင့်ထုတ်ကုန်ရှိ ကိရိယာအကြံပြုချက်တစ်ခုမျှသာ အစားထိုးပါ၊ အရာအားလုံးကို ပြန်လည်မရေးပါနှင့်၊ စနစ်တစ်ခုလုံးကို မပြောင်းပါနှင့်၊ တစ်ခုရွေးပြီး သင့်ကုဒ်မှ ပျောက်ကွယ်သွားသည်ကို ကြည့်လိုက်ပါ။ ပလက်ဖောင်းက သင့်အား ပိုကောင်းတဲ့ မူလအစကို ပေးသောအခါ၊ အနိုင်ရခြင်းသည် JavaScript လိုင်းအနည်းငယ်မျှသာမဟုတ်သော်လည်း ၎င်းသည် သင်လုံးဝစိုးရိမ်ရမည့်အရာအနည်းငယ်သာဖြစ်သည်။ ကျွန်ုပ်၏ GitHub repo ရှိ အရင်းအမြစ်ကုဒ်အပြည့်အစုံကို စစ်ကြည့်ပါ။ နောက်ထပ်စာဖတ်ခြင်း။ popovers နှင့် ဆက်စပ် API များကို ပိုမိုနက်ရှိုင်းစွာ ထိုးဆင်းရန်အတွက်-
"Poppin' In"၊ Geoff Graham "Popovers နှင့် Dialogs များအကြား ဆက်စပ်မှုကို ရှင်းလင်းခြင်း"၊ Zell Liew "popover=hint ဆိုတာ ဘာလဲ?" Una Kravets “Invoker Commands”၊ Daniel Schwarz “HTML Popover ဖြင့် အလိုအလျောက်ပိတ်ခြင်းသတိပေးချက်ကို ဖန်တီးခြင်း”၊ Preethi UI Popover API ရှင်းပြသူကို ဖွင့်ပါ။ “Pop (over) the Balloons”၊ John Rhea “CSS Anchor Positioning”၊ Juan Diego Rodríguez
MDN သည် Popover API အတွက် ပြီးပြည့်စုံသော နည်းပညာဆိုင်ရာ စာရွက်စာတမ်းများကိုလည်း ပေးပါသည်။
