# Element “button” is missing one or more of the following attributes: “aria-expanded”, “type”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-button-is-missing-one-or-more-of-the-following-attributes-aria-expanded-type
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<button>` with `role="combobox"` needs an `aria-expanded` attribute, and the validator reports this message when the button doesn't have one.

Custom select menus often use a `<button>` as a combobox. Clicking it opens a popup, usually an element with `role="listbox"`, where the user picks a value. ARIA requires `aria-expanded` on every combobox so screen readers can announce whether that popup is open. Start with `false` in the markup, then have your script set it to `true` when the list opens and back to `false` when it closes.

The message also lists `type`, but `type` on its own won't clear it: add only `type="button"` and the validator reports that `aria-expanded` is required instead. Keep `type="button"` anyway, since a `<button>` inside a form submits that form by default.

A button that already has `aria-expanded` can still trigger this message if it also carries an `aria-activedescendant` written with no value, as in `<button aria-activedescendant role="combobox" aria-expanded="false">`. Depending on the order of the attributes, the validator reports this message instead of flagging the empty value. The value of `aria-activedescendant` has to be the `id` of the option that currently has focus, so leave the attribute out of the markup until an option is active.

## Invalid example

```html
<button role="combobox" aria-controls="sort-options" aria-label="Sort by">
  Newest first
</button>
<ul id="sort-options" role="listbox" hidden>
  <li id="sort-newest" role="option" aria-selected="true">Newest first</li>
  <li id="sort-oldest" role="option" aria-selected="false">Oldest first</li>
</ul>
```

## Valid example

```html
<button type="button" role="combobox" aria-expanded="false" aria-controls="sort-options" aria-label="Sort by">
  Newest first
</button>
<ul id="sort-options" role="listbox" hidden>
  <li id="sort-newest" role="option" aria-selected="true">Newest first</li>
  <li id="sort-oldest" role="option" aria-selected="false">Oldest first</li>
</ul>
```