Fix checkout header logo navigation #670
Conversation
| </Link> | ||
| <IconButton | ||
| aria-label={intl.formatMessage({ | ||
| id: 'header.button.assistive_msg.logo', |
There was a problem hiding this comment.
The message has been changed from "Back to hompage" to "Logo". I think the "Logo" take makes sense when we used it to describe the ui that didn't have any action associated to it, but in this case we might want to stick to the original message.
If you agree, you can make a follow up localization ticket to get the translation for that text if there isn't already one created.
There was a problem hiding this comment.
+1, assistive text should describe what an element does, not what it looks like.
Please also keep this as a link, rather than a button. Buttons make the behavior opaque and lack critical accessibility features associated with links.
There was a problem hiding this comment.
I reverted the button to be a link and made a small adjustment to link component to work with home ref insteaf. No need to tweak any translations
| </Link> | ||
| <IconButton | ||
| aria-label={intl.formatMessage({ | ||
| id: 'header.button.assistive_msg.logo', |
There was a problem hiding this comment.
+1, assistive text should describe what an element does, not what it looks like.
Please also keep this as a link, rather than a button. Buttons make the behavior opaque and lack critical accessibility features associated with links.
| @@ -19,7 +19,7 @@ const Link = React.forwardRef(({href, to, useNavLink = false, ...props}, ref) => | |||
| as={useNavLink ? NavSPALink : SPALink} | |||
| {...(useNavLink && {exact: true})} | |||
| {...props} | |||
| to={_href === '/' ? '/' : updatedHref} | |||
There was a problem hiding this comment.
With multi-site implementation in place, the condition to keep '/' as is out of date. When the href is a '/', it should also be passed to buildUrl to generate the correct homepage url according to current site and locale
Description
The CheckoutHeader is using the wrong navigation for logo navigation. It has not taken into account the link for multi-site.
Types of Changes
Changes
How to Test-Drive This PR
npm run startat the retail react applocalhost:3000/us/en-US/checkoutlocalhost:3000/us/en-USChecklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization