[CI-4381] Fix clicking on ProductSwatch initiating a redirect #156
Conversation
Mudaafi
left a comment
Mudaafi
left a comment
There was a problem hiding this comment.
Looks good! I had one more comment in our internal thread on whether we'd want to prevent default on the entire swatch container as well but lets see what the others think
Mudaafi
left a comment
Mudaafi
left a comment
There was a problem hiding this comment.
looking good, it works as expected. Let's get another review in first just in case we missed something.
|
|
||
| // Prevents link navigation | ||
| const swatchContainerClickHandler = (e: React.MouseEvent) => { | ||
| e.stopPropagation(); |
There was a problem hiding this comment.
Do we need this? I think e.preventDefault is sufficient right?
| }) | ||
| ) : ( | ||
| <div> | ||
| <div onClick={swatchContainerClickHandler} role='button' tabIndex={0}> |
There was a problem hiding this comment.
I don't think we'd want this. This is neither a button nor should be navigatable-to using tabs since it's just a container. All we want to do is to prevent clicking into this space to trigger a redirect/click event so throwing a
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
might be more advisable here. Calling our resident a11y expert @mocca102 for his thoughts.
evanyan13
deleted the
ci-4381-os-plp-ui-fix-clicking-on-swatches-directing-to-pdp
branch
Context
Right now, clicking on a product swatch redirects to the PDP because the product card is basically an anchor tag, and clicking on that tag redirects to the PDP
We need to fix this behavior such that click on the product swatches doesn't redirect
To see an example of this issue, you can go to this Sandbox and add
/collections/cio-outdoor-livingto the path in the sandboxDefinition of Done
Fix the behavior such that click on the product swatches doesn't redirect
Add documentation in swatch handler hooks to enable customers to utilise