Display warnings and errors in the cart#3400
Conversation
This stack of pull requests is managed by Graphite. Learn more about stacking. |
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
3ecb1f8 to
9a80d6f
Compare
9a80d6f to
955ac0f
Compare
80251b9 to
98b056a
Compare
98b056a to
4c316a0
Compare
4c316a0 to
75e10cd
Compare
|
Please re-request my review when you want me to take a look again :) I saw you made some changes but this comment still applies so I'm assuming it's not yet ready for re-review |
66385cf to
2ead87a
Compare
09b9d0e to
cdab032
Compare
itsjustriley
left a comment
There was a problem hiding this comment.
Just some questions/small change suggests. Will work on tophatting.
| const {icon, role} = FEEDBACK_PROPS[type]; | ||
|
|
||
| return ( | ||
| <div className={`inline-feedback inline-feedback--${type}`} role={role}> |
There was a problem hiding this comment.
(threading)
I was testing this with VoiceOver and the cart warning never got announced. I imagine because it's trying to set this as role=warning which doesn't exist
There was a problem hiding this comment.
I imagine this is the kind of thing that would get caught with an accessibility linter / automated accessibility tests, which we are planning to add
There was a problem hiding this comment.
no, role will be either "alert" or "status" but only errors will use alert (see lines 7-19)
have you tried triggering an error?
but we can revert to using role alert on both, as it was!
There was a problem hiding this comment.
Ah yes you're right, that's so weird why it's not announcing it. I was only testing with warnings, not errors. maybe try role=alert with voiceover to see if that one works?
|
@fredericoo let me know (or request my re-review) when this one is ready :) |
|
This pull request has been marked as stale due to inactivity for 60 days. If no further activity occurs, it will be closed in 7 days. |


Closes #969
#3276
WHY are these changes introduced?
This PR adds the ability to display warnings to users in the cart, improving the user experience by providing clear feedback when there are issues with their cart.
WHAT is this pull request doing?
InlineWarningcomponent for displaying warning messages in an accessible wayuseCartFeedbackhook to collect and normalize errors and warnings from cart fetchersCartWarningscomponent to display warnings in the cart interfaceHOW to test your changes?
Checklist