From 8647197a05490e2c10106a021cf6760bdabb5b2a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 11 Feb 2022 17:56:27 +0100
Subject: chore: improve accessibility

---
 src/pages/article/[slug].tsx    | 16 ++++++++++++++--
 src/pages/cv.tsx                | 16 ++++++++++++++--
 src/pages/projet/[slug].tsx     | 18 ++++++++++++++++--
 src/pages/sujet/[slug].tsx      | 16 ++++++++++++++--
 src/pages/thematique/[slug].tsx | 16 ++++++++++++++--
 5 files changed, 72 insertions(+), 10 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index faf2271..689f123 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -175,7 +175,13 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
         data-prismjs-color-scheme-light={lightTheme}
       >
         <PostHeader intro={intro} meta={meta} title={title} />
-        <Sidebar position="left">
+        <Sidebar
+          position="left"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Table of Contents',
+            description: 'ArticlePage: ToC sidebar aria-label',
+          })}
+        >
           <ToC />
         </Sidebar>
         <div
@@ -183,7 +189,13 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
           dangerouslySetInnerHTML={{ __html: content }}
         ></div>
         <PostFooter topics={topics} />
-        <Sidebar position="right">
+        <Sidebar
+          position="right"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Sidebar',
+            description: 'ArticlePage: right sidebar aria-label',
+          })}
+        >
           <Sharing title={title} excerpt={intro} />
         </Sidebar>
         <section id="comments" className={styles.comments}>
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 311d0ce..e77c586 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -110,13 +110,25 @@ const CV: NextPageWithLayout = () => {
         className={`${styles.article} ${styles['article--no-comments']}`}
       >
         <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
-        <Sidebar position="left">
+        <Sidebar
+          position="left"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Table of Contents',
+            description: 'CVPage: ToC sidebar aria-label',
+          })}
+        >
           <ToC />
         </Sidebar>
         <div className={styles.body}>
           <CVContent />
         </div>
-        <Sidebar position="right">
+        <Sidebar
+          position="right"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Sidebar',
+            description: 'CVPage: right sidebar aria-label',
+          })}
+        >
           <CVPreview
             title={intl.formatMessage({
               defaultMessage: 'Others formats',
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
index f96da0e..f72063a 100644
--- a/src/pages/projet/[slug].tsx
+++ b/src/pages/projet/[slug].tsx
@@ -22,6 +22,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { ParsedUrlQuery } from 'querystring';
 import { ComponentType } from 'react';
+import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
 const Project: NextPageWithLayout<ProjectProps> = ({
@@ -29,6 +30,7 @@ const Project: NextPageWithLayout<ProjectProps> = ({
 }: {
   project: ProjectData;
 }) => {
+  const intl = useIntl();
   const router = useRouter();
   const projectUrl = `${settings.url}${router.asPath}`;
   const { id, intro, meta, title, seo } = project;
@@ -107,14 +109,26 @@ const Project: NextPageWithLayout<ProjectProps> = ({
         className={`${styles.article} ${styles['article--no-comments']}`}
       >
         <PostHeader title={title} intro={intro} meta={{ dates }} />
-        <Sidebar position="left">
+        <Sidebar
+          position="left"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Table of Contents',
+            description: 'ProjectPage: ToC sidebar aria-label',
+          })}
+        >
           <ToC />
         </Sidebar>
         <div className={styles.body}>
           <ProjectSummary id={id} title={title} meta={meta} />
           <ProjectContent components={components} />
         </div>
-        <Sidebar position="right">
+        <Sidebar
+          position="right"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Sidebar',
+            description: 'ProjectPage: right sidebar aria-label',
+          })}
+        >
           <Sharing title={title} excerpt={intro} />
         </Sidebar>
       </article>
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index ca7d7cd..910c02c 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -126,7 +126,13 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
           meta={meta}
           title={topic.title}
         />
-        <Sidebar position="left">
+        <Sidebar
+          position="left"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Table of Contents',
+            description: 'TopicPage: ToC sidebar aria-label',
+          })}
+        >
           <ToC />
         </Sidebar>
         <div className={styles.body}>
@@ -146,7 +152,13 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
             </section>
           )}
         </div>
-        <Sidebar position="right">
+        <Sidebar
+          position="right"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Sidebar',
+            description: 'TopicPage: right sidebar aria-label',
+          })}
+        >
           <RelatedThematics thematics={relatedThematics.current} />
           <TopicsList
             title={intl.formatMessage({
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index df7ff1a..166e0bb 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -116,7 +116,13 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
         className={`${styles.article} ${styles['article--no-comments']}`}
       >
         <PostHeader intro={thematic.intro} meta={meta} title={thematic.title} />
-        <Sidebar position="left">
+        <Sidebar
+          position="left"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Table of Contents',
+            description: 'ThematicPage: ToC sidebar aria-label',
+          })}
+        >
           <ToC />
         </Sidebar>
         <div className={styles.body}>
@@ -136,7 +142,13 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
             </section>
           )}
         </div>
-        <Sidebar position="right">
+        <Sidebar
+          position="right"
+          ariaLabel={intl.formatMessage({
+            defaultMessage: 'Sidebar',
+            description: 'ThematicPage: right sidebar aria-label',
+          })}
+        >
           <RelatedTopics topics={relatedTopics.current} />
           <ThematicsList
             title={intl.formatMessage({
-- 
cgit v1.2.3