From 056ed0d5f050158cebad689099214b164539899a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 15 May 2022 19:08:58 +0200
Subject: chore: improve accessibility

---
 src/components/molecules/layout/meta.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

(limited to 'src/components/molecules')

diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 1d5e04b..1f6219a 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -13,6 +13,10 @@ export type CustomMeta = {
 };
 
 export type MetaComments = {
+  /**
+   * A page title.
+   */
+  about: string;
   /**
    * The comments count.
    */
@@ -269,19 +273,29 @@ const Meta: FC<MetaProps> = ({
    * @param comments - The comments object.
    * @returns {string | JSX.Element} - The comments count.
    */
-  const getCommentsCount = (comments: MetaComments) => {
-    const { count, target } = comments;
+  const getCommentsCount = (comments: MetaComments): string | JSX.Element => {
+    const { about, count, target } = comments;
     const commentsCount = intl.formatMessage(
       {
         defaultMessage:
-          '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}',
-        id: 'adTrj7',
+          '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
+        id: '02rgLO',
         description: 'Meta: comments count',
       },
-      { commentsCount: count }
+      {
+        a11y: (chunks: ReactNode) => (
+          <span className="screen-reader-text">{chunks}</span>
+        ),
+        commentsCount: count,
+        title: about,
+      }
     );
 
-    return target ? <Link href={target}>{commentsCount}</Link> : commentsCount;
+    return target ? (
+      <Link href={target}>{commentsCount as JSX.Element}</Link>
+    ) : (
+      (commentsCount as JSX.Element)
+    );
   };
 
   /**
-- 
cgit v1.2.3