JavaScript Element ariaHasPopup Property

What You’ll Learn

Element.ariaHasPopup is an instance property that reflects the aria-haspopup attribute. Learn tokens like listbox, menu, and dialog, how they describe popup availability, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Some controls open a popup: a menu, a listbox, a dialog, and more. Assistive technologies need to know that a popup is available and what kind it is.

aria-haspopup carries that signal. ariaHasPopup is the JavaScript reflection of that attribute.

const el = document.getElementById("animal");
console.log(el.ariaHasPopup); // "true"
el.ariaHasPopup = "listbox";

Understanding the Property

MDN: the ariaHasPopup property of the Element interface reflects the value of the aria-haspopup attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

• Reflected attribute — mirrors aria-haspopup.
• Get / set — readable and writable string.
• Several tokens — false, true, menu, listbox, tree, grid, dialog.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaHasPopup

Value

A string with one of the following values:

📋 Combobox (MDN Shape)

MDN starts with aria-haspopup="true" on a combobox, then updates to "listbox"—the expected value when the popup is a 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-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

Examples Gallery

Examples follow MDN Element: ariaHasPopup. Labs use a combobox-style input so you can safely read and write the property.

const el = document.getElementById("animal");
console.log(el.ariaHasPopup);

// HTML includes: aria-haspopup="true"

true

let el = document.getElementById("animal");
console.log(el.ariaHasPopup); // true
el.ariaHasPopup = "listbox";
console.log(el.ariaHasPopup); // listbox

true
listbox

const btn = document.createElement("button");
btn.textContent = "Options";
document.body.appendChild(btn);

btn.ariaHasPopup = "menu";
console.log({
  ariaHasPopup: btn.ariaHasPopup,
  attr: btn.getAttribute("aria-haspopup")
});

{
  "ariaHasPopup": "menu",
  "attr": "menu"
}

const el = document.createElement("input");
el.setAttribute("role", "combobox");
el.setAttribute("aria-haspopup", "true");
document.body.appendChild(el);

el.ariaHasPopup = "listbox";
console.log({
  fromProperty: el.ariaHasPopup,
  fromAttribute: el.getAttribute("aria-haspopup"),
  same: el.ariaHasPopup === el.getAttribute("aria-haspopup")
});

{
  "fromProperty": "listbox",
  "fromAttribute": "listbox",
  "same": true
}

console.log({
  supported: "ariaHasPopup" in Element.prototype,
  allowed: ["false", "true", "menu", "listbox", "tree", "grid", "dialog"],
  tip: "Prefer specific tokens (listbox, menu, dialog) over true when possible",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["false", "true", "menu", "listbox", "tree", "grid", "dialog"],
  "tip": "Prefer specific tokens (listbox, menu, dialog) over true when possible",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Comboboxes that open a listbox popup.
• Menu buttons that open a menu.
• Buttons that open a dialog.
• Tree or grid pickers with matching popup tokens.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Prefer specific tokens over generic "true" when possible.
• Test patterns with browsers and assistive technologies (MDN warning).
• Related: ariaHidden, ariaExpanded, EventTarget, JavaScript hub.

💡 Best Practices