From 8f6793348e9f363a2cf4fdea3eb8d0849f6c48e6 Mon Sep 17 00:00:00 2001
From: Joachim Robert <joachim.robert@protonmail.com>
Date: Wed, 6 Feb 2019 15:01:46 +0100
Subject: [PATCH] CopyLinkButton: no more a/button imbrication

---
 components/Button/CopyLinkButton.js | 29 ++++++++++-------------------
 components/Button/style.js          | 18 +++++++++++++-----
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/components/Button/CopyLinkButton.js b/components/Button/CopyLinkButton.js
index 63bdc5c..94a75f4 100644
--- a/components/Button/CopyLinkButton.js
+++ b/components/Button/CopyLinkButton.js
@@ -1,16 +1,10 @@
 // @flow
 // $FlowIssue
 import React, { useState } from 'react';
-import dynamic from 'next/dynamic';
-import * as Styled from './style';
+import { CopyLinkButton as StyledCopyLinkButton } from './style';
 import Icon from '../Icon';
 import type { ButtonProps } from './types';
 
-const Clipboard = dynamic(() => import('react-clipboard.js'), {
-  ssr: false,
-  loading: () => null,
-});
-
 type CopyLinkProps = {
   ...$Exact<ButtonProps>,
   text: string,
@@ -26,20 +20,17 @@ export default function CopyLinkButton(props: CopyLinkProps) {
   };
 
   return (
-    <Clipboard
-      style={{ background: 'none' }}
+    <StyledCopyLinkButton
       data-clipboard-text={text}
       onSuccess={onClick}
-      component="a"
+      component="button"
+      data-cy="copy-link-button"
+      isClicked={isClicked}
+      aria-label="Copy the website’s address to your clipboard."
+      {...props}
     >
-      <Styled.CopyLinkButton
-        data-cy="copy-link-button"
-        isClicked={isClicked}
-        {...props}
-      >
-        <Icon glyph="link" size={24} />
-        {isClicked ? 'Copied!' : children}
-      </Styled.CopyLinkButton>
-    </Clipboard>
+      <Icon glyph="link" size={24} />
+      {isClicked ? 'Copied!' : children}
+    </StyledCopyLinkButton>
   );
 }
diff --git a/components/Button/style.js b/components/Button/style.js
index 3d61ecc..a5ad562 100644
--- a/components/Button/style.js
+++ b/components/Button/style.js
@@ -3,6 +3,12 @@ import styled, { css } from 'styled-components';
 import { hexa, tint } from '../globals';
 import type { ButtonSize } from './types';
 import { theme } from '../theme';
+import dynamic from 'next/dynamic';
+
+const Clipboard = dynamic(() => import('react-clipboard.js'), {
+  ssr: false,
+  loading: () => null,
+});
 
 const getPadding = (size: ButtonSize) => {
   switch (size) {
@@ -32,7 +38,7 @@ const getFontSize = (size: ButtonSize) => {
   }
 };
 
-const base = css`
+export const base = css`
   -webkit-appearance: none;
   display: flex;
   flex: none;
@@ -311,8 +317,9 @@ export const TwitterButton = styled.a`
   }
 `;
 
-export const CopyLinkButton = styled.button`
+export const CopyLinkButton = styled(Clipboard)`
   ${base}
+  transition: all ${theme.animations.default};
   border: 1px solid ${props =>
     props.isClicked
       ? tint(props.theme.success.default, -10)
@@ -360,8 +367,9 @@ export const CopyLinkButton = styled.button`
   &:focus {
     box-shadow: 0 0 0 1px ${props =>
       props.theme.bg.default}, 0 0 0 3px ${props =>
-  props.isClicked
-    ? hexa(props.theme.success.default, 0.5)
-    : props.theme.border.default};
+        props.isClicked
+          ? hexa(props.theme.success.default, 0.5)
+          : props.theme.border.default};
   }
 `;
+