[DEV-027] Footer #46
[DEV-027] Footer #46
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/white-van/dialog/4o691o30h |
| Hello{" "} | ||
| </a> | ||
| </footer> | ||
| <Flex className={styles.footer}> |
There was a problem hiding this comment.
Suggestion: Since this component is used outside of the main component, we need a semantic sectional HTML element wrapping it, rather than a div. Can we wrap this in a footer?
| <Flex className={styles.footer}> | |
| <Flex className={styles.footer} as="footer"> |
Reference: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html
There was a problem hiding this comment.
Ah okay, just read up on the ARIA practices and accessible considerations! Does your fix automatically do the role="footer" tag onto the footer as well?
There was a problem hiding this comment.
It doesn't automatically add a role="footer", rather it's a replacement to it!
It's recommended to use semantic html elements over adding roles to ambigious elements.
I believe just having it as a footer html element should be sufficient considering we're only using it at the end of the page, (if we're using footers in a different context then we'd have to specific what role it is!)
If I remember correctly, the default role of a footer is contentinfo, so the role would be that I think
There was a problem hiding this comment.
Nothing else to add that @AipioxTechson did not say, so approving!
Oops I thought of something haha
| © 2020 White Van, Inc. | ||
| </Heading> | ||
| <Text fontSize="xs" color="white"> | ||
| made with ❤ by pizza van |
There was a problem hiding this comment.
Can we internationallize this + the footerLinks?
| @@ -15,6 +18,8 @@ describe("Footer", () => { | |||
|
|
|||
| it("Basic render functionality", () => { | |||
| const { queryByText } = render(<Footer />); | |||
There was a problem hiding this comment.
I realized this a bit late but -- can we use renderWrapped exported from the helpers.tsx file instead of render -- it's because renderWrapped has the appropriate providers wrapped and would give us a better picture on the actual component we're testing!
[DEV-027] Footer
Fixes: #27
Changes
Made a responsive footer for the website, with text/design matching the Figma story.
Testing