Fix Button's compatibility with Google Translate (#2376)

sumup-oss · Jan 8, 2024 · dadbde1 · dadbde1 · vercel · Jan 8, 2024
1 parent 0a19d76
commit dadbde1
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 74 deletions.
diff --git a/.changeset/brave-moles-marry.md b/.changeset/brave-moles-marry.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Improve compatibility of the Button component with Google Translate ([ref](https://github.com/facebook/react/issues/11538#issuecomment-390386520)).
diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
@@ -206,7 +206,7 @@ export const Button = forwardRef<any, ButtonProps>(
               aria-hidden="true"
             />
           )}
-          {children}
+          <span>{children}</span>
           {TrailingIcon && (
             <TrailingIcon
               className={classes['trailing-icon']}

diff --git a/packages/circuit-ui/components/IconButton/IconButton.module.css b/packages/circuit-ui/components/IconButton/IconButton.module.css
@@ -1,3 +1,7 @@
+.base > span:last-child > span {
+  line-height: 0;
+}
+
 /* Sizes */
 button.s, a.s {
   padding: calc(var(--cui-spacings-byte) - var(--cui-border-width-kilo));

diff --git a/packages/circuit-ui/components/IconButton/IconButton.tsx b/packages/circuit-ui/components/IconButton/IconButton.tsx
@@ -129,7 +129,7 @@ export const IconButton = forwardRef<any, IconButtonProps>(
     return (
       <Button
         title={labelString}
-        className={clsx(classes[size], className)}
+        className={clsx(classes.base, classes[size], className)}
         size={size}
         {...props}
         ref={ref}

diff --git a/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.tsx.snap b/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.tsx.snap
@@ -95,7 +95,7 @@ exports[`Sidebar > should render and match snapshot when open 1`] = `
     data-testid="sidebar-backdrop"
   />
   <button
-    class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _m_f6dd9a _base_9bf092 circuit-2"
+    class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _base_f6dd9a _m_f6dd9a _base_9bf092 circuit-2"
     data-testid="sidebar-close-button"
     title="Close sidebar"
     type="button"
@@ -111,23 +111,25 @@ exports[`Sidebar > should render and match snapshot when open 1`] = `
     <span
       class="_content_892426"
     >
-      <svg
-        aria-hidden="true"
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
-          fill="currentColor"
-        />
-      </svg>
-      <span
-        class="_hide-visually_73b4bb"
-      >
-        Close sidebar
+      <span>
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="_hide-visually_73b4bb"
+        >
+          Close sidebar
+        </span>
       </span>
     </span>
   </button>
@@ -212,7 +214,7 @@ exports[`Sidebar > should render and match the snapshot when closed 1`] = `
     data-testid="sidebar-backdrop"
   />
   <button
-    class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _m_f6dd9a _base_9bf092 circuit-2"
+    class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _base_f6dd9a _m_f6dd9a _base_9bf092 circuit-2"
     data-testid="sidebar-close-button"
     title="Close sidebar"
     type="button"
@@ -228,23 +230,25 @@ exports[`Sidebar > should render and match the snapshot when closed 1`] = `
     <span
       class="_content_892426"
     >
-      <svg
-        aria-hidden="true"
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
-          fill="currentColor"
-        />
-      </svg>
-      <span
-        class="_hide-visually_73b4bb"
-      >
-        Close sidebar
+      <span>
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="_hide-visually_73b4bb"
+        >
+          Close sidebar
+        </span>
       </span>
     </span>
   </button>

diff --git a/...cuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap b/...cuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`CloseButton > styles > should render and match snapshot when not visibl
 }
 
 <button
-  class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _m_f6dd9a _base_9bf092 circuit-0"
+  class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _base_f6dd9a _m_f6dd9a _base_9bf092 circuit-0"
   title="Close"
   type="button"
 >
@@ -34,23 +34,25 @@ exports[`CloseButton > styles > should render and match snapshot when not visibl
   <span
     class="_content_892426"
   >
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
-        fill="currentColor"
-      />
-    </svg>
-    <span
-      class="_hide-visually_73b4bb"
-    >
-      Close
+    <span>
+      <svg
+        aria-hidden="true"
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
+          fill="currentColor"
+        />
+      </svg>
+      <span
+        class="_hide-visually_73b4bb"
+      >
+        Close
+      </span>
     </span>
   </span>
 </button>
@@ -77,7 +79,7 @@ exports[`CloseButton > styles > should render and match snapshot when visible 1`
 }
 
 <button
-  class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _m_f6dd9a _base_9bf092 circuit-0"
+  class="_base_892426 _focus-visible_73b4bb _m_892426 _secondary_892426 _base_f6dd9a _m_f6dd9a _base_9bf092 circuit-0"
   title="Close"
   type="button"
 >
@@ -92,23 +94,25 @@ exports[`CloseButton > styles > should render and match snapshot when visible 1`
   <span
     class="_content_892426"
   >
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
-        fill="currentColor"
-      />
-    </svg>
-    <span
-      class="_hide-visually_73b4bb"
-    >
-      Close
+    <span>
+      <svg
+        aria-hidden="true"
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20.71 19.29c.186.19.29.445.29.71a1 1 0 0 1-1 1c-.265 0-.52-.104-.71-.29L12 13.42l-7.29 7.29c-.19.186-.444.29-.71.29a1 1 0 0 1-1-1c0-.265.104-.52.29-.71L10.58 12 3.29 4.71A1.014 1.014 0 0 1 3 4a1 1 0 0 1 1-1c.266 0 .52.104.71.29L12 10.58l7.29-7.29c.19-.186.445-.29.71-.29a1 1 0 0 1 1 1c0 .266-.104.52-.29.71L13.42 12l7.29 7.29z"
+          fill="currentColor"
+        />
+      </svg>
+      <span
+        class="_hide-visually_73b4bb"
+      >
+        Close
+      </span>
     </span>
   </span>
 </button>