fix: image upload button in markdown editor (#1746)

aeharding · Nov 26, 2024 · 308a5f6 · 308a5f6
1 parent d5dab32
commit 308a5f6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/features/shared/markdown/editing/modes/DefaultMode.module.css b/src/features/shared/markdown/editing/modes/DefaultMode.module.css
@@ -9,4 +9,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  cursor: pointer;
+
+  /* Image upload button */
+  label > & {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/src/features/shared/markdown/editing/modes/DefaultMode.tsx b/src/features/shared/markdown/editing/modes/DefaultMode.tsx
@@ -336,12 +336,18 @@ export default function DefaultMode({
 
       <markdown-toolbar for={TOOLBAR_TARGET_ID}>
         <label htmlFor="photo-upload-toolbar">
-          <button
+          <div
+            // Needs to be div for label click propagation
+            role="button"
+            aria-label="Upload image"
             className={styles.button}
-            onClick={() => textareaRef.current?.focus()}
+            onClick={() => {
+              textareaRef.current?.focus();
+              return true;
+            }}
           >
             <IonIcon icon={image} color="primary" />
-          </button>
+          </div>
 
           <input
             className="ion-hide"