Merge branch 'main' into chore/a11y/blog/post/buttons

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}

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 }>`

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}
             />
           </>
         )}

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,15 +75,15 @@ export const Pagination = ({
       )} ${index + 1}`}</DropdownOption>
     ));
 
-  const handleDropdownChange = (selectedOption) => {
+  const handleDropdownChange = (selectedOption: string) => {
     const selectedPage = parseInt(selectedOption);
     onDropdownSelect?.(selectedPage);
   };
 
   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"