From 1e0ab8c86973b07afffaa5b1b066169a7306fd2a Mon Sep 17 00:00:00 2001
From: Noa Santo <72336443+virus-rpi@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:15:19 +0200
Subject: [PATCH 1/3] fix (a11y): make social link focus outline is visible
 (#810)

Co-authored-by: noa.santo <noa.santo@satellytes.com>
---
 src/components/layout/navigation/navigation.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/layout/navigation/navigation.tsx b/src/components/layout/navigation/navigation.tsx
index 1f5e84706..1a2f5dec8 100644
--- a/src/components/layout/navigation/navigation.tsx
+++ b/src/components/layout/navigation/navigation.tsx
@@ -84,6 +84,8 @@ const SocialLink = styled.a`
   svg {
     vertical-align: middle;
   }
+
+  display: inline-block;
 `;
 
 const LegalLink = styled(Link)<{ $isSelected: boolean }>`

From 5fcee6269af7c252fdef172a96d4ceb9f19b63bc Mon Sep 17 00:00:00 2001
From: Noa Santo <72336443+virus-rpi@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:29:57 +0200
Subject: [PATCH 2/3] fix (a11y): add aria hidden to navigation flyout when
 visually hidden (#811)

* fix (a11y): add aria hidden to NavigationFlyout when visually hidden

* fix (a11y): remove unnecessary aria-hidden from background overlay

---------

Co-authored-by: noa.santo <noa.santo@satellytes.com>
---
 src/components/layout/header/menu-flyout.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/header/menu-flyout.tsx b/src/components/layout/header/menu-flyout.tsx
index e76dce186..4c536eeb3 100644
--- a/src/components/layout/header/menu-flyout.tsx
+++ b/src/components/layout/header/menu-flyout.tsx
@@ -65,7 +65,11 @@ interface NavigationFlyoutProp {
 export const NavigationFlyout: React.FC<NavigationFlyoutProp> = (props) => {
   return (
     <>
-      <FullscreenOverlay $visible={props.visible} onClick={props.onClick}>
+      <FullscreenOverlay
+        $visible={props.visible}
+        onClick={props.onClick}
+        aria-hidden={!props.visible}
+      >
         <ScrollContainer>
           <FullHeightNavigation
             translation={props.translation}

From 2e0e93e22fe4b9222c26c20da3ad1c1367e68b61 Mon Sep 17 00:00:00 2001
From: Noa Santo <72336443+virus-rpi@users.noreply.github.com>
Date: Wed, 18 Sep 2024 17:02:50 +0200
Subject: [PATCH 3/3] fix (a11y): make pagination buttons keyboard accessible
 (#812)

* fix (a11y): changed StyledLink from "a" to "button" to make it keyboard accessible

* fix (a11y): made pagination buttons gatsby links

---------

Co-authored-by: noa.santo <noa.santo@satellytes.com>
---
 src/components/pages/blog/blog-page.tsx     | 11 ++++-------
 src/components/ui/pagination/pagination.tsx | 17 +++++++++--------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/blog/blog-page.tsx b/src/components/pages/blog/blog-page.tsx
index 3a3705f7e..e27d77703 100644
--- a/src/components/pages/blog/blog-page.tsx
+++ b/src/components/pages/blog/blog-page.tsx
@@ -1,4 +1,3 @@
-import { navigate } from 'gatsby';
 import { useI18next, useTranslation } from 'gatsby-plugin-react-i18next';
 import React from 'react';
 import styled from 'styled-components';
@@ -40,10 +39,8 @@ export const BlogPage = ({ posts, header, pagination }: BlogPageProps) => {
     { pathname: '/blog', label: t('navigation.blog') },
   ];
 
-  const onNextClick = () => navigate(`/blog/page/${currentPage + 1}`);
-  const onPreviousClick = () => {
-    navigate(`/blog/${currentPage !== 2 ? `page/${currentPage - 1}` : ''}`);
-  };
+  const nextLink = `/blog/page/${currentPage + 1}`;
+  const previousLink = `/blog/${currentPage !== 2 ? `page/${currentPage - 1}` : ''}`;
 
   return (
     <Layout light showLanguageSwitch={false} breadcrumb={BREADCRUMB}>
@@ -61,8 +58,8 @@ export const BlogPage = ({ posts, header, pagination }: BlogPageProps) => {
             <StyledPagination
               amountOfPages={numberOfPages}
               currentPage={currentPage}
-              onPreviousClick={onPreviousClick}
-              onNextClick={onNextClick}
+              nextLink={nextLink}
+              previousLink={previousLink}
             />
           </>
         )}
diff --git a/src/components/ui/pagination/pagination.tsx b/src/components/ui/pagination/pagination.tsx
index c94bd9de9..d4bc602ec 100644
--- a/src/components/ui/pagination/pagination.tsx
+++ b/src/components/ui/pagination/pagination.tsx
@@ -5,10 +5,11 @@ import { useTranslation } from 'gatsby-plugin-react-i18next';
 import { TextStyles } from '../../typography';
 import { Dropdown, DropdownOption } from '../../forms/dropdown/dropdown';
 import { Icon } from '../icon/icon';
+import { Link } from 'gatsby';
 
 interface PaginationProps {
-  onPreviousClick: () => any;
-  onNextClick: () => any;
+  nextLink: string;
+  previousLink: string;
   onDropdownSelect?: (selectedPage: number) => any;
   amountOfPages: number;
   currentPage: number;
@@ -29,7 +30,7 @@ const PaginationDropdown = styled(Dropdown)`
   cursor: pointer;
 `;
 
-const StyledLink = styled.a<{ $disabled: boolean }>`
+const StyledLink = styled(Link)<{ $disabled: boolean }>`
   padding: 8px;
   border: none;
   background: linear-gradient(275.41deg, #543fd7 0%, #2756fd 100%);
@@ -57,8 +58,8 @@ const PageText = styled.span`
 `;
 
 export const Pagination = ({
-  onPreviousClick,
-  onNextClick,
+  nextLink,
+  previousLink,
   amountOfPages,
   onDropdownSelect,
   currentPage,
@@ -74,7 +75,7 @@ export const Pagination = ({
       )} ${index + 1}`}</DropdownOption>
     ));
 
-  const handleDropdownChange = (selectedOption) => {
+  const handleDropdownChange = (selectedOption: string) => {
     const selectedPage = parseInt(selectedOption);
     onDropdownSelect?.(selectedPage);
   };
@@ -82,7 +83,7 @@ export const Pagination = ({
   return (
     <PaginationContainer className={className}>
       <StyledLink
-        onClick={onPreviousClick}
+        to={previousLink}
         aria-hidden={currentPage === 1}
         $disabled={currentPage === 1}
         aria-label="Previous Page"
@@ -102,7 +103,7 @@ export const Pagination = ({
         <PageText>{`Page ${currentPage} of ${amountOfPages}`}</PageText>
       )}
       <StyledLink
-        onClick={onNextClick}
+        to={nextLink}
         $disabled={currentPage === amountOfPages}
         aria-hidden={currentPage === amountOfPages}
         aria-label="Next Page"