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/components/FooterNav/FooterNav.tsx   |  8 +++++++-
 src/components/MainNav/MainNav.tsx       |  8 +++++++-
 src/components/PostsList/PostsList.tsx   |  6 +++++-
 src/components/SearchForm/SearchForm.tsx |  6 ++++++
 src/components/Sidebar/Sidebar.tsx       | 10 ++++++++--
 src/components/Widgets/ToC/ToC.tsx       | 15 +++++++++++++--
 6 files changed, 46 insertions(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/src/components/FooterNav/FooterNav.tsx b/src/components/FooterNav/FooterNav.tsx
index 918fed7..f1fd0b7 100644
--- a/src/components/FooterNav/FooterNav.tsx
+++ b/src/components/FooterNav/FooterNav.tsx
@@ -29,7 +29,13 @@ const FooterNav = () => {
 
   return (
     <div className={styles.wrapper}>
-      <nav className={styles.nav}>
+      <nav
+        className={styles.nav}
+        aria-label={intl.formatMessage({
+          defaultMessage: 'Footer',
+          description: 'FooterNav: aria-label',
+        })}
+      >
         <ul className={styles.list}>{navItems}</ul>
       </nav>
     </div>
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
index e996e89..c7789ba 100644
--- a/src/components/MainNav/MainNav.tsx
+++ b/src/components/MainNav/MainNav.tsx
@@ -151,7 +151,13 @@ const MainNav = ({
               })}
         </span>
       </label>
-      <nav className={styles.nav}>
+      <nav
+        className={styles.nav}
+        aria-label={intl.formatMessage({
+          defaultMessage: 'Primary',
+          description: 'MainNav: aria-label',
+        })}
+      >
         <ul className={styles.list}>{navItems}</ul>
       </nav>
     </div>
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 16deee3..b57630e 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -50,7 +50,11 @@ const PostsList = (
                   <li className={styles.item}>
                     <PostPreview post={post} titleLevel={titleLevel} />
                   </li>
-                  {isLastPost && <span ref={ref} tabIndex={-1} />}
+                  {isLastPost && (
+                    <li className={styles.item}>
+                      <span ref={ref} tabIndex={-1} />
+                    </li>
+                  )}
                 </Fragment>
               );
             })}
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
index 38ae60d..da6f25c 100644
--- a/src/components/SearchForm/SearchForm.tsx
+++ b/src/components/SearchForm/SearchForm.tsx
@@ -35,6 +35,12 @@ const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
         })}
       </div>
       <Form submitHandler={launchSearch} modifier="search">
+        <label htmlFor="search-query" className="screen-reader-text">
+          {intl.formatMessage({
+            defaultMessage: 'Keywords:',
+            description: 'SearchForm: search field label',
+          })}
+        </label>
         <Input
           ref={inputRef}
           id="search-query"
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index f319f9e..9e2079d 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -6,10 +6,12 @@ type SidebarPosition = 'left' | 'right';
 const Sidebar = ({
   children,
   position,
+  ariaLabel,
   title,
 }: {
   children: ReactNode;
   position: SidebarPosition;
+  ariaLabel?: string;
   title?: string;
 }) => {
   const childrenWithProps = Children.map(children, (child) => {
@@ -22,9 +24,13 @@ const Sidebar = ({
   const positionClass = `wrapper--${position}`;
 
   return (
-    <aside className={`${styles.wrapper} ${styles[positionClass]}`}>
+    <aside
+      className={`${styles.wrapper} ${styles[positionClass]}`}
+      aria-label={ariaLabel}
+      aria-labelledby={title ? `${position}-sidebar-title` : undefined}
+    >
       <div className={styles.body}>
-        {title && <h2>{title}</h2>}
+        {title && <h2 id={`${position}-sidebar-title`}>{title}</h2>}
         {childrenWithProps}
       </div>
     </aside>
diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
index 8a2d493..f3f783c 100644
--- a/src/components/Widgets/ToC/ToC.tsx
+++ b/src/components/Widgets/ToC/ToC.tsx
@@ -1,7 +1,7 @@
 import { ExpandableWidget, OrderedList } from '@components/WidgetParts';
 import { Heading } from '@ts/types/app';
 import useHeadingsTree from '@utils/hooks/useHeadingsTree';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 const ToC = () => {
   const intl = useIntl();
@@ -15,7 +15,18 @@ const ToC = () => {
     return headings.map((heading) => {
       return (
         <li key={heading.id}>
-          <a href={`#${heading.id}`}>{heading.title}</a>
+          <a href={`#${heading.id}`}>
+            <FormattedMessage
+              defaultMessage="<a11y>Jump to </a11y>{title}"
+              description="ToC: link"
+              values={{
+                title: heading.title,
+                a11y: (chunks: string) => (
+                  <span className="screen-reader-text">{chunks}</span>
+                ),
+              }}
+            />
+          </a>
           {heading.children.length > 0 && (
             <OrderedList items={getItems(heading.children)} />
           )}
-- 
cgit v1.2.3