aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/layout')
-rw-r--r--src/components/organisms/layout/posts-list.module.scss4
-rw-r--r--src/components/organisms/layout/posts-list.tsx17
2 files changed, 16 insertions, 5 deletions
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index 64ad33f..49993da 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -60,3 +60,7 @@
display: flex;
margin: auto;
}
+
+.progress {
+ margin-block: var(--spacing-md);
+}
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 5401ed1..86c3d12 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -1,5 +1,5 @@
/* eslint-disable max-statements */
-import { type FC, Fragment, useRef, useCallback } from 'react';
+import { type FC, Fragment, useRef, useCallback, useId } from 'react';
import { useIntl } from 'react-intl';
import { useIsMounted, useSettings } from '../../../utils/hooks';
import {
@@ -102,6 +102,7 @@ export const PostsList: FC<PostsListProps> = ({
const isMounted = useIsMounted(listRef);
const { blog } = useSettings();
const lastPostId = posts.length ? posts[posts.length - 1].id : 0;
+ const progressBarId = useId();
/**
* Retrieve the list of posts.
@@ -114,7 +115,12 @@ export const PostsList: FC<PostsListProps> = ({
allPosts: Post[],
headingLevel: HeadingLevel = 2
): JSX.Element => (
- <ol className={styles.list} ref={listRef}>
+ <ol
+ aria-busy={isLoading}
+ aria-describedby={progressBarId}
+ className={styles.list}
+ ref={listRef}
+ >
{allPosts.map(({ id, ...post }) => (
<Fragment key={id}>
<li className={styles.item}>
@@ -190,11 +196,12 @@ export const PostsList: FC<PostsListProps> = ({
<>
<ProgressBar
aria-label={progressInfo}
+ className={styles.progress}
current={posts.length}
- // eslint-disable-next-line react/jsx-no-literals -- Id allowed.
- id="loaded-posts"
+ id={progressBarId}
+ isCentered
+ isLoading={isLoading}
label={progressInfo}
- min={1}
max={total}
/>
{showLoadMoreBtn ? (