Интерактивные элементы вложены друг в друга

Сообщение в axe и Lighthouse: Interactive controls must not be nested · nested-interactive · WCAG 4.1.2

Что это значит и почему это важно

Кнопка внутри ссылки (или наоборот) сбивает с толку клавиатурную навигацию и скринридеры — до внутреннего элемента часто невозможно добраться (WCAG 4.1.2).

Как исправить

Измените разметку так, чтобы ссылки и кнопки стояли рядом, а не были вложены друг в друга.

Пример кода

До

<a href="/product/42">
  Rain jacket <button>Add to cart</button>
</a>

После

<a href="/product/42">Rain jacket</a>
<button>Add to cart</button>

Все ошибки доступности