Verificação HTML: O elemento "label" não deve aparecer como descendente do elemento "button".

Sobre este problema HTML

O elemento <label> serve um propósito específico em HTML: representa uma legenda para um controlo de formulário. Pode ser associado a um controlo através do atributo for (referenciando o id do controlo) ou envolvendo o controlo de formulário dentro do próprio <label>. Colocar um <label> dentro de um <button> é semanticamente incorreto porque um botão não é um controlo de formulário que beneficie de etiquetagem desta forma — o próprio conteúdo de texto do botão ou atributo aria-label já serve como o seu nome acessível.

A especificação HTML define o modelo de conteúdo de <button> como conteúdo de frase, mas exclui explicitamente conteúdo interativo. Dado que <label> é classificado como conteúdo interativo (direciona o foco para o seu controlo associado quando clicado), aninhá-lo dentro de um <button> cria comportamento ambíguo. Quando um utilizador clica na etiqueta, deve ativar o botão, ou deve deslocar o foco para o controlo associado da etiqueta? Os browsers lidam com este conflito de forma inconsistente, o que leva a experiências de utilizador imprevisíveis.

Do ponto de vista da acessibilidade, este aninhamento é problemático porque os leitores de ecrã podem anunciar o botão de forma confusa, potencialmente lendo-o como contendo uma etiqueta para outro elemento. O nome acessível do botão deve vir diretamente do seu conteúdo de texto, não de um <label> aninhado.

Para corrigir este problema, simplesmente substitua o <label> por um <span> ou texto simples dentro do botão. Se precisar de estilizar parte do texto do botão de forma diferente, elementos <span> são perfeitamente válidos dentro de botões.

Exemplos

❌ Inválido: `<label>` dentro de um `<button>`

<button type="submit">
  <label>Submit Form</label>
</button>

❌ Inválido: `<label>` com um atributo `for` dentro de um `<button>`

<button type="button">
  <label for="file-input">Choose File</label>
</button>
<input type="file" id="file-input">

✅ Corrigido: Use texto simples dentro do `<button>`

<button type="submit">
  Submit Form
</button>

✅ Corrigido: Use um `<span>` para fins de estilo

<button type="submit">
  <span class="button-text">Submit Form</span>
</button>

✅ Corrigido: Separe o `<label>` e `<button>`

Se precisar de uma etiqueta para descrever o propósito de um botão num formulário, coloque o <label> fora do botão e use o atributo for para associá-lo a um input relacionado, ou use aria-label no próprio botão:

<label for="username">Username</label>
<input type="text" id="username">
<button type="submit" aria-label="Submit the username form">
  Submit
</button>