Cleanup

src/registrar/assets/js/get-gov-admin.js

@@ -97,7 +97,7 @@ function openInNewTab(el, removeAttribute = false){
                     setTimeout(function() {
                         // Change back to the copy icon
                         buttonIcon.setAttribute('xlink:href', currentHref); 
-                    }, 2000);
+                    }, 1500);
                 }
 
             }).catch(function(error) {
@@ -109,7 +109,24 @@ function openInNewTab(el, removeAttribute = false){
     function handleClipboardButtons() {
         clipboardButtons = document.querySelectorAll(".usa-button__clipboard")
         clipboardButtons.forEach((button) => {
-            button.addEventListener("click", ()=>{copyToClipboardAndChangeIcon(button)});
+
+            // Handle copying the text to your clipboard,
+            // and changing the icon.
+            button.addEventListener("click", ()=>{
+                copyToClipboardAndChangeIcon(button);
+            });
+            
+            // Add a class that removes the outline style on click
+            button.addEventListener("mousedown", function() {
+                this.classList.remove("no-outline-on-click");
+            });
+            
+            // But add it back in after the user clicked,
+            // for accessibility reasons (so we can still tab, etc)
+            button.addEventListener("blur", function() {
+                this.classList.remove("no-outline-on-click");
+            });
+
         });
     }
 

src/registrar/assets/sass/_theme/_admin.scss

@@ -308,16 +308,18 @@ input.admin-confirm-button {
     .usa-button__icon {
         position: absolute;
         right: 0;
-        top: 0;
         height: 100%;
-        border: none;
-        background: transparent;
-        padding: 0 1rem;
-        margin: 0;
     }
 
     input {
-        padding-right: 45px;
+        // Allow for padding around the copy button
+        padding-right: 35px;
+        // Match the height of other inputs
+        min-height: 2.25rem;
+    }
+
+    .no-outline-on-click:focus {
+        outline: none !important;
     }
 }
 

src/registrar/templates/admin/input_with_clipboard.html

@@ -0,0 +1,19 @@
+{% load i18n static %}
+
+{% comment %}
+Template for an input field with a clipboard
+{% endcomment %}
+
+<div class="admin-icon-group">
+    {{ field }}
+    <button 
+    class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard" 
+    type="button"
+    >
+        <svg 
+        class="usa-icon" 
+        >
+            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+        </svg>
+    </button>
+</div>

src/registrar/templates/django/admin/includes/contact_fieldset.html

@@ -1,5 +1,4 @@
 {% extends "admin/fieldset.html" %}
-{% load i18n static %}
 
 {% comment %}
 This is using a custom implementation fieldset.html (see admin/fieldset.html)
@@ -19,16 +18,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                             {% if field.is_readonly %}
                                 <div class="readonly">{{ field.contents }}</div>
                             {% elif field.field.name == "email" %}
-                                <div class="admin-icon-group">
+                                {% include "admin/input_with_clipboard.html" with field=field.field %}
-                                    {{ field.field }}
-                                    <button class="usa-button usa-button__icon usa-button__clipboard" type="button">
-                                        <svg 
-                                        class="usa-icon" 
-                                        >
-                                            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
-                                        </svg>
-                                    </button>
-                                </div>
                             {% else %}
                                 {{ field.field }}
                             {% endif %}