Validación HTML: El elemento "a" no debe aparecer como descendiente del elemento "button".

Acerca de este problema HTML

La especificación HTML define el modelo de contenido del elemento <button> como “contenido de fraseo” pero excluye explícitamente el contenido interactivo. Dado que el elemento <a> (cuando tiene un atributo href) se clasifica como contenido interactivo, anidarlo dentro de un <button> viola esta regla. La misma restricción se aplica a cualquier elemento que tenga role="button", ya que funciona semánticamente como un botón.

Esto es problemático por varias razones:

Accesibilidad: Los lectores de pantalla y las tecnologías de asistencia no pueden transmitir de manera fiable el propósito de elementos interactivos anidados. Un usuario navegando con tabulador por la página puede encontrar objetivos de foco confusos o duplicados, y la acción prevista se vuelve ambigua.
Comportamiento impredecible: Los navegadores manejan los elementos interactivos anidados de forma inconsistente. Hacer clic en el enlace dentro de un botón podría activar el manejador de clic del botón, la navegación del enlace, ambos, o ninguno — dependiendo del navegador.
Cumplimiento de estándares: La especificación HTML prohíbe este anidamiento para asegurar un modelo de interacción claro y sin ambigüedades para todos los usuarios y agentes de usuario.

Para solucionarlo, decide qué debe hacer el elemento. Si navega a una URL, usa un elemento <a> (con estilo de botón si es necesario). Si realiza una acción como enviar un formulario o alternar algo, usa un <button>. Si necesitas ambos comportamientos, maneja la navegación programáticamente vía JavaScript en un <button>, o sepáralos en dos elementos distintos.

Ejemplos

❌ Incorrecto: enlace anidado dentro de un botón

<button>
  <a href="/dashboard">Ir al Panel</a>
</button>

❌ Incorrecto: enlace dentro de un elemento con `role="button"`

<div role="button">
  <a href="/settings">Configuración</a>
</div>

✅ Correcto: usar un ancla con estilo de botón

Si el objetivo es la navegación, usa un elemento <a> y dale estilo para que parezca un botón con CSS:

<a href="/dashboard" class="button">Ir al Panel</a>

.button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}

✅ Correcto: usar un botón con navegación JavaScript

Si necesitas semánticas de botón pero también quieres navegar, maneja la navegación en JavaScript:

<button type="button" onclick="location.href='/dashboard'">
  Ir al Panel
</button>

✅ Correcto: separar los dos elementos

Si realmente necesitas tanto una acción de botón como un enlace, colócalos uno al lado del otro:

<button type="button">Guardar</button>
<a href="/dashboard">Ir al Panel</a>

✅ Correcto: enlace sin `href` dentro de un botón (caso especial)

Un elemento <a> sin atributo href no es contenido interactivo, por lo que técnicamente es válido dentro de un <button>. Sin embargo, esto rara vez es útil en la práctica:

<button type="button">
  <a>Texto de etiqueta</a>
</button>

Como regla general, nunca anides un elemento clickeable dentro de otro. Esto se aplica no solo a <a> dentro de <button>, sino también a otras combinaciones como <button> dentro de <a>, o <a> dentro de <a>. Mantener los elementos interactivos separados asegura un comportamiento predecible y una buena experiencia para todos los usuarios.