From e1cc2de22fc703d94e1151beb9526d8cbe0e49c1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 24 May 2022 16:05:03 +0200
Subject: chore(toolbar): change icons to close button when activated

---
 src/components/atoms/forms/label.stories.tsx | 13 +++++++++++++
 src/components/atoms/forms/label.tsx         |  4 ++++
 2 files changed, 17 insertions(+)

(limited to 'src/components/atoms/forms')

diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx
index 79f1a34..f66aa13 100644
--- a/src/components/atoms/forms/label.stories.tsx
+++ b/src/components/atoms/forms/label.stories.tsx
@@ -12,6 +12,19 @@ export default {
     size: 'small',
   },
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'Define an accessible name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
index ce4c70f..2ec614f 100644
--- a/src/components/atoms/forms/label.tsx
+++ b/src/components/atoms/forms/label.tsx
@@ -2,6 +2,10 @@ import { FC, ReactNode } from 'react';
 import styles from './label.module.scss';
 
 export type LabelProps = {
+  /**
+   * An accessible name for the label.
+   */
+  'aria-label'?: string;
   /**
    * The label body.
    */
-- 
cgit v1.2.3