chore: improve accessibility

2 files changed, 19 insertions, 2 deletions

diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
index 337d0c9..175af94 100644
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -9,6 +9,19 @@ export default {
   title: 'Atoms/Layout',
   component: SidebarComponent,
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the sidebar.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
index d13cc0d..d86af37 100644
--- a/src/components/atoms/layout/sidebar.tsx
+++ b/src/components/atoms/layout/sidebar.tsx
@@ -3,6 +3,10 @@ import styles from './sidebar.module.scss';
 
 export type SidebarProps = {
   /**
+   * An accessible name for the sidebar.
+   */
+  'aria-label'?: string;
+  /**
    * The sidebar body.
    */
   children: ReactNode;
@@ -17,9 +21,9 @@ export type SidebarProps = {
  *
  * Render an aside element.
  */
-const Sidebar: FC<SidebarProps> = ({ children, className = '' }) => {
+const Sidebar: FC<SidebarProps> = ({ children, className = '', ...props }) => {
   return (
-    <aside className={`${styles.wrapper} ${className}`}>
+    <aside className={`${styles.wrapper} ${className}`} {...props}>
       <div className={styles.body}>{children}</div>
     </aside>
   );