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/Sidebar/Sidebar.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/components/Sidebar')

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>
-- 
cgit v1.2.3