Merge pull request #341 from mfranzke/mfranzke-patch-1

fix: use semantic elements

Author: pomber

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;

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;

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>
   )
 }

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 */
 
@@ -96,9 +97,10 @@
 }
 
 .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;

packages/mdx/src/smooth-code/copy-button.tsx

@@ -12,7 +12,10 @@ export function CopyButton({
   const [copied, setCopied] = React.useState(false)
 
   return (
-    <svg
+    <button
+      type="button"
+      title="Copy code"
+      className={className}
       style={style}
       onClick={() => {
         copyToClipboard(content)
@@ -21,30 +24,30 @@ 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>
-
-      {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>
+      <svg
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/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>
   )
 }
 

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;
 }

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;
+}