Welcome to the Power Users community on Codidact!

Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.

Post History

66%

+2 −0

Q&A Why is WAVE throwing an "empty button" error when there's a type attribute specified?

Running the WAVE browser extension on a site, I'm getting an "Empty button" error on a search submit box: A <button> element is present that contains no text content (or alternative text...

1 answer · posted 1y ago by Mithical‭ · last activity 1y ago by Moshi‭

Question WAVE-browser-extension

#1: Initial revision by

Mithical‭ · 2023-09-05T11:27:47Z (over 1 year ago)

Copy Link

Raw

Markdown

Why is WAVE throwing an "empty button" error when there's a type attribute specified?

Running the [WAVE browser extension](https://wave.webaim.org/) on a site, I'm getting an "Empty button" error on a search submit box:

![Page with a search box opened. A red WAVE error is showing under the search submit icon, and an explanation of the error and the relevant HTML code are visible on the page, both provided below.](https://powerusers.codidact.com/uploads/tke22dh6ce1iu04oaimsh72v26nq)

> A \<button\> element is present that contains no text content (or alternative text), or an \<input type="submit"\>, \<input type="button"\>, or \<input type="reset"\> has an empty or missing value attribute.

The HTML that's highlighted as being responsible for this error shows as this, including a "type=" attribute:

```
<button type="submit" class="button is-filled is-outlined">
<i class="fa fa-search"></i>
</button>
```

The [source code](https://github.com/codidact/qpixel/blob/develop/app/views/layouts/_header.html.erb#L148) in Ruby for this element is this:

```
  <%= form_tag search_path, method: :get, role: 'search' do %>
    <div class="grid is-nowrap">
        <%= search_field_tag :search, params[:search], class: 'form-element' %>
        <div class="h-m-1">
          <%= button_tag type: :submit, class: 'button is-filled is-outlined', name: nil do %>
            <i class="fa fa-search"></i>
          <% end %>
        </div>
    </div>
  <% end %>
```

On a development instance running on localhost, I tried adding `input_type: :submit` to the `button_tag`, which results in `input_type="submit" ` being added to the HTML, but I'm still getting the same WAVE error.

Why is WAVE giving me this error even though there is a `type` attribute (or `input_type` attribute) specified, and how can I resolve it?

WAVE-browser-extension

Communities

Post History