diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-14 16:28:14 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-14 16:28:14 +0100 |
| commit | 03c5ba6791dcf7e097f14246af61d107cdadaeff (patch) | |
| tree | e34a947547b0eef65b29b7301560d24fed03468d /src/pages | |
| parent | d47b859b218679cc99fa95e64b2308c378dc93fe (diff) | |
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.
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/blog/index.tsx | 14 | ||||
| -rw-r--r-- | src/pages/recherche/index.tsx | 15 |
2 files changed, 24 insertions, 5 deletions
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index faadd6f..e0d35cd 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -15,8 +15,11 @@ import PostHeader from '@components/PostHeader/PostHeader'; import { ThematicsList, TopicsList } from '@components/Widget'; import Sidebar from '@components/Sidebar/Sidebar'; import styles from '@styles/pages/Page.module.scss'; +import { useRef } from 'react'; const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { + const lastPostRef = useRef<HTMLSpanElement>(null); + const getKey = (pageIndex: number, previousData: PostsListData) => { if (previousData && !previousData.posts) return null; @@ -44,6 +47,13 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage; + const loadMorePosts = () => { + if (lastPostRef.current) { + lastPostRef.current.focus(); + } + setSize(size + 1); + }; + return ( <> <Head> @@ -55,11 +65,11 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { > <PostHeader title={t`Blog`} /> <div className={styles.body}> - <PostsList data={data} showYears={true} /> + <PostsList ref={lastPostRef} data={data} showYears={true} /> {hasNextPage && ( <Button isDisabled={isLoadingMore} - clickHandler={() => setSize(size + 1)} + clickHandler={loadMorePosts} position="center" >{t`Load more?`}</Button> )} 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> |