Element: ariaHasPopup ããããã£
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2023å¹´10æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
ariaHasPopup 㯠Element ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ããããã£ã§ãaria-haspopup 屿§ã®å¤ãåæ ããè¦ç´ ã«ãã£ã¦çºçããããã¨ãã§ããã¡ãã¥ã¼ããã¤ã¢ãã°ãªã©ã®å¯¾è©±åãããã¢ããè¦ç´ ã®åã¨å©ç¨ã§ãããã©ããã示ãã¾ãã
å¤
以ä¸ã®ããããã®å¤ãæã¤æååã§ãã
"false"-
ãã®è¦ç´ ã«ã¯ãããã¢ãããããã¾ããã
"true"-
ãã®è¦ç´ ã«ã¯ã¡ãã¥ã¼ã§ãããããã¢ãããããã¾ãã
-
ãã®è¦ç´ ã«ã¯ã¡ãã¥ã¼ã§ãããããã¢ãããããã¾ãã
"listbox"-
ãã®è¦ç´ ã«ã¯ãªã¹ãããã¯ã¹ã§ãããããã¢ãããããã¾ãã
"tree"-
ãã®è¦ç´ ã«ã¯ããªã¼ã§ãããããã¢ãããããã¾ãã
"grid"-
ãã®è¦ç´ ã«ã¯ã°ãªããã§ãããããã¢ãããããã¾ãã
"dialog"-
ãã®è¦ç´ ã«ã¯ãã¤ã¢ãã°ã§ãããããã¢ãããããã¾ãã
è¦å:
æ§ã
㪠aria-haspopup å¤ã¸ã®å¯¾å¿ã¯ã屿§ãæå®ããè¦ç´ ã«ãã£ã¦ç°ãªãå¯è½æ§ããããã¨ã«æ³¨æãã¦ãã ãããaria-haspopup ã使ç¨ããéã«ã¯ãARIA 仿§ã«æºæ ããå¿
è¦ãªãã©ã¦ã¶ã¼ãæ¯æ´æè¡ã§ãã¹ãããéã«æå¾
éãã®åä½ãããããã«ãã¦ãã ããã
ä¾
ãã®ä¾ã§ã¯ãID ã animal ã®è¦ç´ ã® aria-haspopup 屿§ã¯ "true" ã«è¨å®ããã¦ãã¾ããariaHasPopup ã使ç¨ãã¦ãå¤ã "listbox" ã«æ´æ°ãã¾ãããã㯠listbox ãããã¢ãããå¼ã³åºãã³ã³ãããã¯ã¹ã¨ãã¦æçãªå¤ã§ãã
<div class="animals-combobox">
<label for="animal">Animal</label>
<input
id="animal"
type="text"
role="combobox"
aria-autocomplete="list"
aria-controls="animals-listbox"
aria-activedescendant=""
aria-expanded="false"
aria-haspopup="true" />
<ul id="animals-listbox" role="listbox" aria-label="Animals">
<li id="animal-cat" role="option">Cat</li>
<li id="animal-dog" role="option">Dog</li>
</ul>
</div>
let el = document.getElementById("animal");
console.log(el.ariaHasPopup); // true
el.ariaHasPopup = "listbox";
console.log(el.ariaHasPopup); // listbox
仿§æ¸
| 仿§æ¸ |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) > # dom-ariamixin-ariahaspopup > |