chore: improve load more button accessibility

On click, the focus should be moved to the last post in the list
instead of keeping it on load more button. It helps to keep a
consistent navigation for keyboard users for example.

1 files changed, 37 insertions, 15 deletions

diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index f401d83..df9dfe4 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -2,22 +2,31 @@ import { t } from '@lingui/macro';
 import { PostsList as PostsListData } from '@ts/types/blog';
 import styles from './PostsList.module.scss';
 import PostPreview from '@components/PostPreview/PostPreview';
-import { Fragment } from 'react';
+import { ForwardedRef, forwardRef, Fragment } from 'react';
 import { sortPostsByYear } from '@utils/helpers/sort';
 
-const PostsList = ({
-  data,
-  showYears,
-}: {
-  data: PostsListData[];
-  showYears: boolean;
-}) => {
+const PostsList = (
+  {
+    data,
+    showYears,
+  }: {
+    data: PostsListData[];
+    showYears: boolean;
+  },
+  ref: ForwardedRef<HTMLSpanElement>
+) => {
   const titleLevel = showYears ? 3 : 2;
 
   const getPostsListByYear = () => {
     const posts = sortPostsByYear(data);
     const years = Object.keys(posts).reverse();
 
+    const getLastPostId = () => {
+      const oldestYear = Object.keys(posts)[0];
+      const lastPost = posts[oldestYear][posts[oldestYear].length - 1];
+      return lastPost.id;
+    };
+
     return years.map((year) => {
       return (
         <section key={year} className={styles.section}>
@@ -29,10 +38,14 @@ const PostsList = ({
           )}
           <ol className={styles.list}>
             {posts[year].map((post) => {
+              const isLastPost = post.id === getLastPostId();
               return (
-                <li key={post.id} className={styles.item}>
-                  <PostPreview post={post} titleLevel={titleLevel} />
-                </li>
+                <Fragment key={post.id}>
+                  <li className={styles.item}>
+                    <PostPreview post={post} titleLevel={titleLevel} />
+                  </li>
+                  {isLastPost && <span ref={ref} tabIndex={-1} />}
+                </Fragment>
               );
             })}
           </ol>
@@ -43,6 +56,11 @@ const PostsList = ({
 
   const getPostsList = () => {
     return data.map((page) => {
+      const getLastPostId = () => {
+        const lastPost = page.posts[page.posts.length - 1];
+        return lastPost.id;
+      };
+
       if (page.posts.length === 0) {
         return <p key="no-result">{t`No results found.`}</p>;
       } else {
@@ -50,10 +68,14 @@ const PostsList = ({
           <Fragment key={page.pageInfo.endCursor}>
             <ol className={styles.list}>
               {page.posts.map((post) => {
+                const isLastPost = post.id === getLastPostId();
                 return (
-                  <li key={post.id} className={styles.item}>
-                    <PostPreview post={post} titleLevel={titleLevel} />
-                  </li>
+                  <Fragment key={post.id}>
+                    <li key={post.id} className={styles.item}>
+                      <PostPreview post={post} titleLevel={titleLevel} />
+                    </li>
+                    {isLastPost && <span ref={ref} tabIndex={-1} />}
+                  </Fragment>
                 );
               })}
             </ol>
@@ -66,4 +88,4 @@ const PostsList = ({
   return <div>{showYears ? getPostsListByYear() : getPostsList()}</div>;
 };
 
-export default PostsList;
+export default forwardRef(PostsList);