# The “aria-haspopup” attribute should not be used on any element which has “role=menubar”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-haspopup-attribute-should-not-be-used-on-any-element-which-has-role-menubar
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-haspopup` attribute belongs on the menu item that opens a submenu, not on the `role="menubar"` element that holds the items.

`aria-haspopup` tells screen readers that activating an element opens a popup, such as a menu or a dialog. A menu bar doesn't open anything. It stays on screen, and users activate the items inside it. WAI-ARIA 1.2 deprecated `aria-haspopup` as a global property and lists the roles that support it: `application`, `button`, `combobox`, `gridcell`, `link`, `menuitem`, `slider`, `tab`, `textbox` and `treeitem`, plus the roles that inherit from them. `menubar` isn't on that list, so assistive technology can ignore the attribute there, and users can't tell which item has a submenu.

The validator flags any element with an explicit `role="menubar"` and an `aria-haspopup` attribute, whatever its value, so `aria-haspopup="false"` triggers the warning too. If the element is a real menu bar, move `aria-haspopup="menu"` to each `menuitem` that opens a submenu, and add `aria-expanded` there to say whether that submenu is open.

Sometimes the element isn't a menu bar at all. It's a control that shows a dropdown, like a language picker or a mobile navigation toggle. Drop `role="menubar"` there and use a `<button>` with `aria-expanded` and `aria-controls`, as the disclosure pattern describes. The links inside the panel stay plain links.

## Invalid example

```html
<ul role="menubar" aria-label="Editor" aria-haspopup="menu">
  <li role="none">
    <button type="button" role="menuitem" aria-expanded="false" aria-controls="file-menu">File</button>
    <ul role="menu" id="file-menu" aria-label="File" hidden>
      <li role="menuitem" tabindex="-1">New</li>
      <li role="menuitem" tabindex="-1">Open</li>
    </ul>
  </li>
  <li role="none">
    <button type="button" role="menuitem" tabindex="-1">Help</button>
  </li>
</ul>
```

## Valid example

The menu item that opens the submenu carries `aria-haspopup`:

```html
<ul role="menubar" aria-label="Editor">
  <li role="none">
    <button type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" aria-controls="file-menu">File</button>
    <ul role="menu" id="file-menu" aria-label="File" hidden>
      <li role="menuitem" tabindex="-1">New</li>
      <li role="menuitem" tabindex="-1">Open</li>
    </ul>
  </li>
  <li role="none">
    <button type="button" role="menuitem" tabindex="-1">Help</button>
  </li>
</ul>
```

A dropdown of links, such as a language picker, uses a disclosure button instead of menu roles:

```html
<button type="button" aria-expanded="false" aria-controls="language-list">Language</button>
<ul id="language-list" hidden>
  <li><a href="/" hreflang="en">English</a></li>
  <li><a href="/es/" hreflang="es" lang="es">Español</a></li>
</ul>
```