JavaScript Element ariaHasPopup Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAHASPOPUP

Definition

Element.ariaHasPopup reflects the aria-haspopup attribute: the availability and type of interactive popup (menu, listbox, dialog, …) that an element can trigger (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaHasPopup. Start with this line.

JavaScript
el.ariaHasPopup;
CallWhat it does
el.ariaHasPopup;Primary signature.

Built into the browser. Read or assign el.ariaHasPopup — no import required.

Library declarations
JavaScript
el.ariaHasPopup;

Parameters

ParameterDescription
PropertyRequired. el.ariaHasPopup
ValuesRequired. String tokens (see cheat sheet)

Return Value

Return ValueDescription
*The current value of el.ariaHasPopup.

JavaScript Examples

Example 1 — Get and Set ariaHasPopup (MDN)

Read the string, then set the preferred combobox token "listbox".

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

How It Works

  1. Select the control. MDN uses a combobox with aria-haspopup="true".
  2. Read ariaHasPopup. Starts as the string "true".
  3. Assign "listbox". Matches a listbox popup (MDN).
  4. Use string tokens only — not booleans.

Example 2 — Menu Button Popup Type

Declare a menu popup on a button control.

JavaScript
const btn = document.getElementById("actions");
btn.ariaHasPopup = "menu";
btn.ariaExpanded = "false";
console.log(btn.ariaHasPopup); // "menu"
Try It Yourself

How It Works

  1. Pick the control that opens the menu.
  2. Set "menu" (or "true", which also means menu).
  3. Start collapsed with ariaExpanded = "false".
  4. Prefer "menu" over bare "true" when the type is known.

Example 3 — Pair with ariaExpanded

Popup type stays fixed; open/close flips expanded state and visibility.

JavaScript
const el = document.getElementById("animal");
const list = document.getElementById("animals-listbox");

el.ariaHasPopup = "listbox";

el.addEventListener("click", () => {
  const open = el.ariaExpanded !== "true";
  el.ariaExpanded = open ? "true" : "false";
  list.hidden = !open;
});
Try It Yourself

How It Works

  1. Set the popup type once with ariaHasPopup.
  2. Toggle ariaExpanded when the list opens or closes.
  3. Sync hidden so sighted users match AT users (CSS-free).
  4. Do not change ariaHasPopup on every open — type is stable.
Compatibility

Browser Support

Element.ariaHasPopup is Baseline Widely available (MDN: since October 2023). Safe for modern evergreen browsers.

✓ Baseline · Widely available

ariaHasPopup

Reflects aria-haspopup popup type for menus, listboxes, dialogs, and more.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
ariaHasPopup Excellent

Bottom line: Use the specific popup token. Pair with ariaExpanded for open/closed. Test your widget pattern with AT.

Frequently Asked Questions

It reflects the aria-haspopup attribute as a string, indicating the availability and type of interactive popup (menu, listbox, dialog, and so on) that can be triggered by the element (MDN).
No. MDN marks Element.ariaHasPopup as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "false", "true", "menu", "listbox", "tree", "grid", or "dialog" (MDN). Prefer the specific type that matches the popup (for example "listbox" for a combobox).
"true" means the element has a popup that is a menu — the same idea as "menu" (MDN). Prefer the more specific token when you can.
ariaHasPopup describes the kind of popup available. ariaExpanded says whether that popup is currently open or closed.
Yes. Custom elements can use ElementInternals.ariaHasPopup for the same reflected value from inside a component (MDN).

Next: ariaHidden

Learn the Element property that hides content from the accessibility tree.

ariaHidden tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaFlowToElements Property JavaScript Element ariaHidden Property