From 03c5ba6791dcf7e097f14246af61d107cdadaeff Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 14 Jan 2022 16:28:14 +0100
Subject: 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.
---
 src/pages/recherche/index.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'src/pages/recherche/index.tsx')

diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index c8a7b9b..57f40e2 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -11,7 +11,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import useSWRInfinite from 'swr/infinite';
 import Sidebar from '@components/Sidebar/Sidebar';
 import { ThematicsList, TopicsList } from '@components/Widget';
@@ -20,6 +20,7 @@ import styles from '@styles/pages/Page.module.scss';
 const Search: NextPageWithLayout = () => {
   const [query, setQuery] = useState('');
   const router = useRouter();
+  const lastPostRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     if (!router.isReady) return;
@@ -69,6 +70,13 @@ const Search: NextPageWithLayout = () => {
         message: 'Search',
       });
 
+  const loadMorePosts = () => {
+    if (lastPostRef.current) {
+      lastPostRef.current.focus();
+    }
+    setSize(size + 1);
+  };
+
   return (
     <>
       <Head>
@@ -80,11 +88,12 @@ const Search: NextPageWithLayout = () => {
       >
         <PostHeader title={title} />
         <div className={styles.body}>
-          <PostsList data={data} showYears={false} />
+          <PostsList ref={lastPostRef} data={data} showYears={false} />
           {hasNextPage && (
             <Button
               isDisabled={isLoadingMore}
-              clickHandler={() => setSize(size + 1)}
+              clickHandler={loadMorePosts}
+              position="center"
             >{t`Load more?`}</Button>
           )}
         </div>
-- 
cgit v1.2.3

