Summary
The VendorLinks component in frontends/web/src/routes/market/components/vendor-deals.tsx renders Deal sub-components (which return <div> elements) inside an <h3> element. This produces invalid HTML markup and breaks accessibility semantics, since block-level elements must not be nested inside heading elements.
Suggested Fix
Replace the <h3 className={style.exchangeLink}> wrapper with a <div> (or similar non-heading container). If a visible heading is needed, add a standalone <h3> sibling above the container.
- <h3 className={style.exchangeLink}>
+ <div className={style.exchangeLink}>
{deals.map(deal => !deal.isHidden && (
<Deal
key={`${vendorName || ''}_${deal.payment || ''}`}
deal={deal}
vendorName={vendorName}
/>
))}
- </h3>
+ </div>Additionally, consider filtering out hidden deals before mapping (e.g., deals.filter(d => !d.isHidden).map(...)) to avoid embedding conditional nulls in the mapped output.
References
Summary
The
VendorLinkscomponent infrontends/web/src/routes/market/components/vendor-deals.tsxrendersDealsub-components (which return<div>elements) inside an<h3>element. This produces invalid HTML markup and breaks accessibility semantics, since block-level elements must not be nested inside heading elements.Suggested Fix
Replace the
<h3 className={style.exchangeLink}>wrapper with a<div>(or similar non-heading container). If a visible heading is needed, add a standalone<h3>sibling above the container.Additionally, consider filtering out hidden deals before mapping (e.g.,
deals.filter(d => !d.isHidden).map(...)) to avoid embedding conditional nulls in the mapped output.References