From 7b22874c26aa6533e7836520dde79a135ef19b37 Mon Sep 17 00:00:00 2001
From: Prateek Surana <prateeksurana3255@gmail.com>
Date: Sat, 1 Aug 2020 20:36:00 +0530
Subject: [PATCH 1/2] :recycle: Create a container over anchor tag

---
 src/lib/index.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index baebe2d..7fead5b 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -93,7 +93,7 @@ const CopyMailTo = ({
 
   const allContainerStyles = {
     ...containerBaseStyles,
-    ...containerStyles
+    ...containerStyles,
   };
 
   const allTooltipStyles = {
@@ -103,22 +103,22 @@ const CopyMailTo = ({
   };
 
   return (
-    <a
-      title={defaultTooltip}
-      href={`mailto:${email}`}
-      style={allContainerStyles}
-      onClick={copyEmail}
-      onMouseOver={displayTooltip}
-      onMouseOut={hideTooltip}
-      onFocus={displayTooltip}
-      onBlur={hideTooltip}
-    >
-      {children || email}
-
+    <span style={allContainerStyles}>
+      <a
+        aria-label={defaultTooltip}
+        onClick={copyEmail}
+        onMouseOver={displayTooltip}
+        onMouseOut={hideTooltip}
+        onFocus={displayTooltip}
+        onBlur={hideTooltip}
+        href={`mailto:${email}`}
+      >
+        {children || email}
+      </a>
       <span style={allTooltipStyles}>
         {showCopied ? copiedTooltip : defaultTooltip}
       </span>
-    </a>
+    </span>
   );
 };
 

From 16a9ba25ff28a18a6be9bb2682e3d8ec311fde57 Mon Sep 17 00:00:00 2001
From: Prateek Surana <prateeksurana3255@gmail.com>
Date: Sat, 1 Aug 2020 20:39:58 +0530
Subject: [PATCH 2/2] :sparkles: Added anchor style prop

---
 README.md         | 3 ++-
 src/lib/index.tsx | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ea6078a..3aa8453 100644
--- a/README.md
+++ b/README.md
@@ -50,8 +50,9 @@ You can customize almost every aspect of this component using the below props, o
 | children  	|  ReactNode  	|  null 	|  Use this if you want to use some custom component inside the anchor tag. 	|
 | defaultTooltip  	|   string	|   "Copy email address"	|   Text shown in the tooltip when the user hovers over the link.	|
 | copiedTooltip 	|   string	|   "Copied to clipboard!"	|   Text shown in the tooltip when the user clicks on the link and the text is copied to clipboard.	|
-| containerStyles  	|   style object	|   none	|   The styles to be applied to the anchor container	|
+| containerStyles  	|   style object	|   none	|   The styles to be applied to the container	|
 | tooltipStyles  	|   style object	|   none	|   The styles to be applied to the tooltip	|
+| anchorStyles  	|   style object	|   none	|   The styles to be applied to the anchor	|
 
 ## Development
 
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index 7fead5b..9cf83b8 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -57,6 +57,7 @@ const CopyMailTo = ({
   copiedTooltip = "Copied to clipboard!",
   containerStyles = {},
   tooltipStyles = {},
+  anchorStyles = {},
 }: {
   email: string;
   children?: React.ReactNode;
@@ -64,6 +65,7 @@ const CopyMailTo = ({
   copiedTooltip?: string;
   containerStyles?: React.CSSProperties;
   tooltipStyles?: React.CSSProperties;
+  anchorStyles?: React.CSSProperties;
 }): JSX.Element => {
   const [showCopied, setShowCopied] = React.useState(false);
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -112,6 +114,7 @@ const CopyMailTo = ({
         onFocus={displayTooltip}
         onBlur={hideTooltip}
         href={`mailto:${email}`}
+        style={anchorStyles}
       >
         {children || email}
       </a>