From ea857f20d3fd985ebc0bce9e1634e247ddb34eda Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Mon, 27 Mar 2023 12:12:08 +0200
Subject: [PATCH 1/5] fix: use semantic element

especially for accessibility reasons
---
 packages/mdx/src/mini-editor/editor-frame.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mdx/src/mini-editor/editor-frame.tsx b/packages/mdx/src/mini-editor/editor-frame.tsx
index 511be046..2aacfaf7 100644
--- a/packages/mdx/src/mini-editor/editor-frame.tsx
+++ b/packages/mdx/src/mini-editor/editor-frame.tsx
@@ -167,7 +167,7 @@ function TabsContainer({
       )}
       {showFrameButtons ? <FrameButtons /> : <div />}
       {tabs.map(({ title, active, style }) => (
-        <div
+        <button
           key={title}
           title={title}
           data-ch-tab={panel}
@@ -198,9 +198,10 @@ function TabsContainer({
             ),
           }}
           onClick={onTabClick && (() => onTabClick(title))}
+          type="button"
         >
           <TabTitle title={title} />
-        </div>
+        </button>
       ))}
       <div style={{ flex: 1, minWidth: "0.8em" }} />
       {button}

From 4de42e80899fd55799754512c8ac8ab09e64f583 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Mon, 27 Mar 2023 12:20:02 +0200
Subject: [PATCH 2/5] style: overwrite standard button styles

---
 packages/mdx/src/mini-editor/index.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/mdx/src/mini-editor/index.scss b/packages/mdx/src/mini-editor/index.scss
index 482bf136..8d97abe4 100644
--- a/packages/mdx/src/mini-editor/index.scss
+++ b/packages/mdx/src/mini-editor/index.scss
@@ -24,6 +24,8 @@
   color: rgba(255, 255, 255, 0.5);
   min-width: 0;
   border-bottom: 1px solid;
+  border-left-color: transparent;
+  border-top-color: transparent;
 }
 
 .ch-editor-tab-active {

From 54e4c13f26623fd71d1d36201f0eb953dcd3844d Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Tue, 28 Mar 2023 11:43:15 +0200
Subject: [PATCH 3/5] Update index.scss

---
 packages/mdx/src/mini-editor/index.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mdx/src/mini-editor/index.scss b/packages/mdx/src/mini-editor/index.scss
index 8d97abe4..473c8ff4 100644
--- a/packages/mdx/src/mini-editor/index.scss
+++ b/packages/mdx/src/mini-editor/index.scss
@@ -24,8 +24,8 @@
   color: rgba(255, 255, 255, 0.5);
   min-width: 0;
   border-bottom: 1px solid;
-  border-left-color: transparent;
-  border-top-color: transparent;
+  border-left: 1px solid transparent;
+  border-top: 1px solid transparent;
 }
 
 .ch-editor-tab-active {

From d249c9ca9c4f712fce205c43e33c8b1b637e8a25 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <maximilian.franzke@deutschebahn.com>
Date: Tue, 28 Mar 2023 18:36:27 +0200
Subject: [PATCH 4/5] refactor: using a button instead of just an SVG

---
 packages/mdx/src/mini-editor/index.scss      | 13 +++++
 packages/mdx/src/smooth-code/copy-button.tsx | 50 +++++++++++---------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/mdx/src/mini-editor/index.scss b/packages/mdx/src/mini-editor/index.scss
index 473c8ff4..eac0a781 100644
--- a/packages/mdx/src/mini-editor/index.scss
+++ b/packages/mdx/src/mini-editor/index.scss
@@ -104,4 +104,17 @@
   min-width: 1.5em;
   min-height: 1.5em;
   margin-right: 0.8em;
+
+  &[type="button"] {
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: inherit;
+  }
+
+  svg {
+    width: 1.5em;
+    height: 1.5em;
+    min-width: 1.5em;
+    min-height: 1.5em;
+  }
 }
diff --git a/packages/mdx/src/smooth-code/copy-button.tsx b/packages/mdx/src/smooth-code/copy-button.tsx
index 98d9e51c..c623dd5a 100644
--- a/packages/mdx/src/smooth-code/copy-button.tsx
+++ b/packages/mdx/src/smooth-code/copy-button.tsx
@@ -12,7 +12,9 @@ export function CopyButton({
   const [copied, setCopied] = React.useState(false)
 
   return (
-    <svg
+    <button
+      type="button"
+      className={className}
       style={style}
       onClick={() => {
         copyToClipboard(content)
@@ -21,30 +23,32 @@ export function CopyButton({
           setCopied(false)
         }, 1200)
       }}
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
     >
-      <title>Copy</title>
+      <svg
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Copy</title>
 
-      {copied ? (
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M5 13l4 4L19 7"
-        />
-      ) : (
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.6px"
-          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-        />
-      )}
-    </svg>
+        {copied ? (
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M5 13l4 4L19 7"
+          />
+        ) : (
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.6px"
+            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+          />
+        )}
+      </svg>
+    </button>
   )
 }
 

From 229a17890dca25dc993ec8d7ad37929c831f2c2a Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Wed, 5 Apr 2023 11:30:52 +0000
Subject: [PATCH 5/5] More button styles

---
 .../mdx/src/mini-editor/code-browser.scss     |  5 +-
 packages/mdx/src/mini-editor/dialog.scss      |  5 +-
 packages/mdx/src/mini-editor/editor-frame.tsx |  5 +-
 .../mdx/src/mini-editor/expand-button.tsx     | 62 ++++++++++---------
 packages/mdx/src/mini-editor/index.scss       | 19 +-----
 packages/mdx/src/smooth-code/copy-button.tsx  |  3 +-
 packages/mdx/src/smooth-code/index.scss       |  5 +-
 packages/mdx/src/utils/mixins.scss            | 11 ++++
 8 files changed, 63 insertions(+), 52 deletions(-)
 create mode 100644 packages/mdx/src/utils/mixins.scss

diff --git a/packages/mdx/src/mini-editor/code-browser.scss b/packages/mdx/src/mini-editor/code-browser.scss
index 4847293a..8cf69904 100644
--- a/packages/mdx/src/mini-editor/code-browser.scss
+++ b/packages/mdx/src/mini-editor/code-browser.scss
@@ -1,3 +1,5 @@
+@import "../utils/mixins.scss";
+
 .ch-code-browser {
   display: flex;
   height: 100%;
@@ -45,9 +47,10 @@
 }
 
 .ch-code-browser-button {
+  @include button-reset;
+
   width: 1.5em;
   height: 1.5em;
-  cursor: pointer;
   min-width: 1.5em;
   min-height: 1.5em;
   position: absolute;
diff --git a/packages/mdx/src/mini-editor/dialog.scss b/packages/mdx/src/mini-editor/dialog.scss
index 4c2b311d..06a8ea3d 100644
--- a/packages/mdx/src/mini-editor/dialog.scss
+++ b/packages/mdx/src/mini-editor/dialog.scss
@@ -1,3 +1,5 @@
+@import "../utils/mixins.scss";
+
 .ch-no-scroll {
   overflow: hidden;
 }
@@ -15,10 +17,11 @@
 }
 
 .ch-expand-close {
+  @include button-reset;
+
   position: absolute;
   top: 10px;
   right: 10px;
-  cursor: pointer;
   color: white;
   width: 26px;
   height: 26px;
diff --git a/packages/mdx/src/mini-editor/editor-frame.tsx b/packages/mdx/src/mini-editor/editor-frame.tsx
index 2aacfaf7..511be046 100644
--- a/packages/mdx/src/mini-editor/editor-frame.tsx
+++ b/packages/mdx/src/mini-editor/editor-frame.tsx
@@ -167,7 +167,7 @@ function TabsContainer({
       )}
       {showFrameButtons ? <FrameButtons /> : <div />}
       {tabs.map(({ title, active, style }) => (
-        <button
+        <div
           key={title}
           title={title}
           data-ch-tab={panel}
@@ -198,10 +198,9 @@ function TabsContainer({
             ),
           }}
           onClick={onTabClick && (() => onTabClick(title))}
-          type="button"
         >
           <TabTitle title={title} />
-        </button>
+        </div>
       ))}
       <div style={{ flex: 1, minWidth: "0.8em" }} />
       {button}
diff --git a/packages/mdx/src/mini-editor/expand-button.tsx b/packages/mdx/src/mini-editor/expand-button.tsx
index 6e0822ef..efd6669f 100644
--- a/packages/mdx/src/mini-editor/expand-button.tsx
+++ b/packages/mdx/src/mini-editor/expand-button.tsx
@@ -94,44 +94,50 @@ function ExpandIcon({
   className?: string
 }) {
   return (
-    <svg
+    <button
+      type="button"
+      title="Expand"
       style={style}
       onClick={onClick}
       className={className}
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      role="button"
     >
-      <title>Expand</title>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-      />
-    </svg>
+      <svg
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+        />
+      </svg>
+    </button>
   )
 }
 function CloseButton({ onClick }: { onClick: () => void }) {
   return (
-    <svg
+    <button
       onClick={onClick}
       className="ch-expand-close"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      role="button"
+      type="button"
+      title="Close"
     >
-      <title>Close</title>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </svg>
+      <svg
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
   )
 }
diff --git a/packages/mdx/src/mini-editor/index.scss b/packages/mdx/src/mini-editor/index.scss
index eac0a781..c9271dc1 100644
--- a/packages/mdx/src/mini-editor/index.scss
+++ b/packages/mdx/src/mini-editor/index.scss
@@ -3,6 +3,7 @@
 @import "../smooth-code/index.scss";
 @import "./dialog.scss";
 @import "./code-browser.scss";
+@import "../utils/mixins.scss";
 
 /** tabs */
 
@@ -24,8 +25,6 @@
   color: rgba(255, 255, 255, 0.5);
   min-width: 0;
   border-bottom: 1px solid;
-  border-left: 1px solid transparent;
-  border-top: 1px solid transparent;
 }
 
 .ch-editor-tab-active {
@@ -98,23 +97,11 @@
 }
 
 .ch-editor-button {
+  @include button-reset;
+
   width: 1.5em;
   height: 1.5em;
-  cursor: pointer;
   min-width: 1.5em;
   min-height: 1.5em;
   margin-right: 0.8em;
-
-  &[type="button"] {
-    background-color: transparent;
-    border: 1px solid transparent;
-    color: inherit;
-  }
-
-  svg {
-    width: 1.5em;
-    height: 1.5em;
-    min-width: 1.5em;
-    min-height: 1.5em;
-  }
 }
diff --git a/packages/mdx/src/smooth-code/copy-button.tsx b/packages/mdx/src/smooth-code/copy-button.tsx
index c623dd5a..270e9498 100644
--- a/packages/mdx/src/smooth-code/copy-button.tsx
+++ b/packages/mdx/src/smooth-code/copy-button.tsx
@@ -14,6 +14,7 @@ export function CopyButton({
   return (
     <button
       type="button"
+      title="Copy code"
       className={className}
       style={style}
       onClick={() => {
@@ -30,8 +31,6 @@ export function CopyButton({
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>Copy</title>
-
         {copied ? (
           <path
             strokeLinecap="round"
diff --git a/packages/mdx/src/smooth-code/index.scss b/packages/mdx/src/smooth-code/index.scss
index 0c4309a1..dddf6a9b 100644
--- a/packages/mdx/src/smooth-code/index.scss
+++ b/packages/mdx/src/smooth-code/index.scss
@@ -1,3 +1,5 @@
+@import "../utils/mixins.scss";
+
 .ch-code-line-number {
   user-select: none;
   text-align: right;
@@ -28,10 +30,11 @@
 }
 
 .ch-code-button {
+  @include button-reset;
+
   position: absolute;
   top: 10px;
   right: 10px;
   width: 1.1em;
   height: 1.1em;
-  cursor: pointer;
 }
diff --git a/packages/mdx/src/utils/mixins.scss b/packages/mdx/src/utils/mixins.scss
new file mode 100644
index 00000000..e1eed503
--- /dev/null
+++ b/packages/mdx/src/utils/mixins.scss
@@ -0,0 +1,11 @@
+@mixin button-reset {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+  cursor: pointer;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: inherit;
+}