How to fix nested interactive on Wix

Steps for Wix

1. In the Wix Editor, click on the product gallery or the specific component flagged.
2. For Wix Stores product grids, click the grid → Settings → Layout, and check whether you have custom 'Product Page' designs with overlapping buttons. Wix Stores grids do not expose direct HTML, so use Velo (Dev Mode) to override rendering.
3. Enable Dev Mode (left panel → Dev Mode → Turn on Dev Mode). Open the relevant repeater or product widget in the code panel.
4. In the element's code, ensure buttons inside the repeater items are not wrapped in anchor (<a>) elements. Use onClick event handlers on non-interactive wrapper divs rather than nesting a button inside a link.
5. If using Wix Blocks or a custom widget, open the widget in Wix Blocks and restructure the element hierarchy so interactive children are siblings of — not descendants of — other interactive elements.
6. Publish and test keyboard navigation on the live site.

<!-- ❌ 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.