How to fix nested interactive on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the template file rendering the offending component. Product cards are typically in app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/list.phtml or a widget template.
2. Copy the relevant .phtml file into your custom theme directory (following Magento's template override hierarchy) if you have not already.
3. Open the file and locate the wrapping <a> element (usually wrapping the product image and name) that also contains a button or another link (e.g. Add to Cart, Wishlist).
4. Refactor: change the outer wrapper to a <div>, give the product name/image its own <a href>, and ensure all action buttons (Add to Cart, Compare, Wishlist) are sibling elements of that link, not children.
5. Run bin/magento cache:clean and bin/magento setup:static-content:deploy (if in production mode) to clear compiled templates.
6. Test keyboard navigation on the category page in a browser.

<!-- ❌ WRONG: <a> wrapping a <button> — invalid nested interactive -->
<a href="/products/widget">
  <img src="widget.jpg" alt="Blue Widget">
  <span>Blue Widget</span>
  <button type="button">Add to Cart</button>  <!-- nested interactive! -->
</a>

<!-- ✅ CORRECT: non-interactive wrapper; link and button are siblings -->
<div class="product-card">
  <!-- Stretch the link to cover the card visually with CSS -->
  <a href="/products/widget" class="card-link">
    <img src="widget.jpg" alt="Blue Widget">
    <span>Blue Widget</span>
  </a>
  <!-- Button sits above the stretched link via z-index -->
  <button type="button" class="add-to-cart">Add to Cart</button>
</div>

<!-- CSS for the "full-card link" pattern -->
<style>
.product-card { position: relative; }
.card-link::after {
  content: '';
  position: absolute;
  inset: 0;          /* covers the full card */
  z-index: 0;
}
.add-to-cart { position: relative; z-index: 1; }
</style>

What is nested interactive?

WCAG Success Criterion 4.1.2 requires that every interactive component on a page has a clear name, role, and value that assistive technologies can understand. A "nested interactive" violation means a clickable or focusable element — like a button, link, or input — contains another focusable element inside it. For example, a product card that is wrapped in a `<a>` tag but also contains a separate "Add to Cart" `<button>` inside it, or a `<button>` that wraps a `<label>` and an `<input>`. HTML does not allow interactive elements to be nested inside other interactive elements — it is invalid markup that breaks predictable keyboard and screen-reader behavior.

Keyboard-only users and screen-reader users (blind shoppers, people with motor disabilities) navigate your store by tabbing through focusable elements. When interactive elements are nested, the browser renders the structure unpredictably: focus may skip the inner element, become trapped, or announce confusing information (e.g. reading an entire product card as one gigantic link). This directly prevents some customers from adding items to their cart, completing checkout, or using navigation menus — losing you real revenue. In many jurisdictions (US ADA, EU EAA, UK PSBAR) inaccessible ecommerce sites expose businesses to legal complaints and lawsuits. Fixing nested interactive elements is one of the most impactful keyboard-accessibility improvements you can make.

See the complete Nested interactive guide for every platform and the full background.