The site was checked with the W3C validator (validator.w3.org).

A React page's source is only an empty <div id="root"></div>, so validating the web address alone finds nothing. Two checks were run instead.

1. The deployed address, which checks the page shell.
2. The page after React loaded, which is the version with the products and forms in it. This is the check that finds real problems.

No errors and no warnings. Three notes appeared about self-closing slashes in index.html, which were removed, so the page now validates completely clean.

This one found 20 errors, ten of each of these two:

1. Bad value "button" for attribute "role" on element "article".
2. The element "h3" must not appear as a descendant of an element with the attribute "role=button".

Each product card was written with role="button" on the <article> so that the whole card would be clickable. That is not valid. role="button" is not a permitted role for <article>, and a heading cannot sit inside an element carrying that role.

The product name inside each card became a real <button>, and role and tabIndex were removed from the <article>. The card keeps its own onClick, so clicking anywhere still opens the product, and the name is now a proper control for keyboard and screen-reader users.

The same page was checked again afterwards: no errors.

I expected the check on the web address to be enough. It passed with no errors, so I thought the page was clean. Checking the page after it loaded instead found 20 errors, which is the whole reason both checks were needed.

The deployed address:

The page after loading, which is the one that found the errors: