From a66d09c7a1497bb71c6a6ef923c97c6ca0ae2a09 Mon Sep 17 00:00:00 2001
From: Dharanish V <dharanishvaradhan@gmail.com>
Date: Sun, 19 May 2024 21:42:03 +0530
Subject: [PATCH] feat: Add aria-label to MDXEditor and SingleChoiceToggleGroup

The code changes add `aria-label` attributes to the `MDXEditor` and `SingleChoiceToggleGroup` components to improve accessibility.
---
 src/MDXEditor.tsx                          | 4 +++-
 src/plugins/toolbar/primitives/toolbar.tsx | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
index 8cbfba08..57e10770 100644
--- a/src/MDXEditor.tsx
+++ b/src/MDXEditor.tsx
@@ -57,7 +57,9 @@ const RichTextEditor: React.FC = () => {
       <RenderRecursiveWrappers wrappers={editorWrappers}>
         <div className={classNames(styles.rootContentEditableWrapper, 'mdxeditor-root-contenteditable')}>
           <RichTextPlugin
-            contentEditable={<ContentEditable className={classNames(styles.contentEditable, contentEditableClassName)} />}
+            contentEditable={
+              <ContentEditable className={classNames(styles.contentEditable, contentEditableClassName)} ariaLabel="editable markdown" />
+            }
             placeholder={
               <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName)}>
                 <p>{placeholder}</p>
diff --git a/src/plugins/toolbar/primitives/toolbar.tsx b/src/plugins/toolbar/primitives/toolbar.tsx
index b5ebfbf2..74f70cdd 100644
--- a/src/plugins/toolbar/primitives/toolbar.tsx
+++ b/src/plugins/toolbar/primitives/toolbar.tsx
@@ -155,6 +155,7 @@ export const SingleChoiceToggleGroup = <T extends string>({
   return (
     <div className={styles.toolbarGroupOfGroups}>
       <RadixToolbar.ToggleGroup
+        aria-label="toggle group"
         type="single"
         className={classNames(styles.toolbarToggleSingleGroup, className)}
         onValueChange={onChange}
@@ -164,7 +165,7 @@ export const SingleChoiceToggleGroup = <T extends string>({
         }}
       >
         {items.map((item, index) => (
-          <ToolbarToggleItem key={index} value={item.value}>
+          <ToolbarToggleItem key={index} aria-label={item.title} value={item.value}>
             <TooltipWrap title={item.title}>{item.contents}</TooltipWrap>
           </ToolbarToggleItem>
         ))}