From 4354d151098e5edfd07ef91837ba7e2850ecf825 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Tue, 9 Jan 2024 16:51:24 +0100 Subject: [PATCH 1/7] fix: button now have the correct aria-lable feat: disable buttons if visually disabled feat: make button tab focusable if enabled --- src/components/ui/pagination/pagination.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/ui/pagination/pagination.tsx b/src/components/ui/pagination/pagination.tsx index 0a32682e0..34b03e907 100644 --- a/src/components/ui/pagination/pagination.tsx +++ b/src/components/ui/pagination/pagination.tsx @@ -42,7 +42,8 @@ const StyledLink = styled.a<{ $disabled: boolean }>` $disabled && css` opacity: 50%; - cursor: default; + cursor: not-allowed; + pointer-events: none; `} &:hover { @@ -83,7 +84,8 @@ export const Pagination = ({ @@ -101,7 +103,8 @@ export const Pagination = ({ From a296d6afc87cb7da2728a72c70e26f9903e23979 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Tue, 9 Jan 2024 16:56:47 +0100 Subject: [PATCH 2/7] feat: added aria-lable to rss button --- src/components/pages/blog-post/follow-panel.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/pages/blog-post/follow-panel.tsx b/src/components/pages/blog-post/follow-panel.tsx index d28c2185a..de731c78c 100644 --- a/src/components/pages/blog-post/follow-panel.tsx +++ b/src/components/pages/blog-post/follow-panel.tsx @@ -19,7 +19,7 @@ const FollowPanelContainer = styled.div` font-size: 16px; ${up('md')} { - margin-top: 0px; + margin-top: 0; min-width: 240px; } `; @@ -31,7 +31,7 @@ export const PanelText = styled.p` color: ${({ theme }) => theme.palette.text.default}; `; -const SocialLinks = styled.ul` +const SocialLinks = styled.div` all: unset; order: 2; color: ${({ theme }) => theme.palette.text.link.default}; @@ -64,10 +64,10 @@ export const FollowPanel = ({ className }: FollowProps) => { return ( - {t('blog.follow')} + {t('blog.follow')} - + From 93565542d03fbcb1db79b058caa734086bdf1bc2 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Tue, 9 Jan 2024 16:58:35 +0100 Subject: [PATCH 3/7] feat: made timestamp color contrast AA complient --- src/components/layout/theme.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/theme.tsx b/src/components/layout/theme.tsx index 9ba15dc25..75826ea31 100644 --- a/src/components/layout/theme.tsx +++ b/src/components/layout/theme.tsx @@ -18,7 +18,7 @@ export const theme: DefaultTheme = { defaultDark: '#FFFFFF', secondary: 'rgba(32,40,64,0.5)', topline: '#3E61EE', - timestamp: 'rgba(0, 0, 0, 0.5)', + timestamp: 'rgba(0, 0, 0, 0.65)', errorMessage: '#FF0D35', header: { default: '#FFFFFF', From fe77cadcd3afcfe582c8323ac46f54edd17b8a15 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Mon, 15 Jan 2024 14:40:54 +0100 Subject: [PATCH 4/7] fix: netlify build error fix --- src/templates/blog-post.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx index 5c2262cb2..2f2b809d1 100644 --- a/src/templates/blog-post.tsx +++ b/src/templates/blog-post.tsx @@ -46,7 +46,10 @@ export const Head = ({ const { author, seoMetaText, title, publicationDate, heroImage } = data.contentfulBlogPost; - const shareImagePath = heroImage.shareImage.resize.src; + let shareImagePath = ''; + if (heroImage && heroImage.shareImage && heroImage.shareImage.resize) { + shareImagePath = heroImage.shareImage.resize.src; + } /* * SEO Notes: From e1e5702d15fd033ba94b386cc5bda1cf0625f283 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Mon, 22 Jan 2024 16:52:36 +0100 Subject: [PATCH 5/7] fix: add aria-hidden to pagination button, so it can't be clicked by screen reader --- src/components/ui/pagination/pagination.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ui/pagination/pagination.tsx b/src/components/ui/pagination/pagination.tsx index 34b03e907..c94bd9de9 100644 --- a/src/components/ui/pagination/pagination.tsx +++ b/src/components/ui/pagination/pagination.tsx @@ -83,6 +83,7 @@ export const Pagination = ({ From fd4cf7cc3a0c2b99b7bf4a1cdfa3372f346b5d96 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Mon, 22 Jan 2024 17:03:53 +0100 Subject: [PATCH 6/7] chore: ran prettier so test pass --- src/components/layout/seo.tsx | 5 ++--- src/templates/blog-post.tsx | 1 - 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/layout/seo.tsx b/src/components/layout/seo.tsx index d66a79313..87f6320a5 100644 --- a/src/components/layout/seo.tsx +++ b/src/components/layout/seo.tsx @@ -102,9 +102,8 @@ const SEO = ({ * The i18n object (languages, language, originalPath, defaultLanguage) * is replaced with constants and locales data for building the alternate meta tag. */ - const dataNode = locales.edges.find( - (e) => e.node.ns === 'translations', - )?.node; + const dataNode = locales.edges.find((e) => e.node.ns === 'translations') + ?.node; const t = JSON.parse(dataNode?.data || '{}'); const metaDescription = description || t['main.description']; const typeOfSite = siteType || 'website'; diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx index df902d02f..2fe08fbaa 100644 --- a/src/templates/blog-post.tsx +++ b/src/templates/blog-post.tsx @@ -46,7 +46,6 @@ export const Head = ({ const { author, seoMetaText, title, publicationDate, heroImage } = data.contentfulBlogPost; - const shareImagePath = heroImage.shareImage?.resize.src; /* From 6942ced2f59a896fd3f4821e9eb4d0ad0562d879 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Mon, 29 Jan 2024 17:13:38 +0100 Subject: [PATCH 7/7] fix: format fix --- src/components/layout/seo.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/layout/seo.tsx b/src/components/layout/seo.tsx index 87f6320a5..d66a79313 100644 --- a/src/components/layout/seo.tsx +++ b/src/components/layout/seo.tsx @@ -102,8 +102,9 @@ const SEO = ({ * The i18n object (languages, language, originalPath, defaultLanguage) * is replaced with constants and locales data for building the alternate meta tag. */ - const dataNode = locales.edges.find((e) => e.node.ns === 'translations') - ?.node; + const dataNode = locales.edges.find( + (e) => e.node.ns === 'translations', + )?.node; const t = JSON.parse(dataNode?.data || '{}'); const metaDescription = description || t['main.description']; const typeOfSite = siteType || 'website';