Copy to clipboard: restore focus state and show 'copied' text

assets/src/amp-validation/copy-to-clipboard-buttons.js

@@ -3,28 +3,53 @@
  */
 import Clipboard from 'clipboard';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { getURLValidationTableRows } from './get-url-validation-table-rows';
 
+/**
+ * Success handler, called when data is copied to the clipboard.
+ *
+ * @param {Object} event
+ * @param {HTMLElement} event.trigger The element triggering the event.
+ */
+function onSuccess( { trigger } ) {
+	trigger.focus();
+	const originalText = trigger.innerText;
+	trigger.innerText = __( 'Copied to clipboard', 'amp' );
+
+	setTimeout( () => {
+		if ( document.body.contains( trigger ) ) {
+			trigger.innerText = originalText;
+		}
+	}, 4000 );
+}
+
 /**
  * Sets up the "Copy to clipboard" buttons on the URL validation screen.
  */
 export function handleCopyToClipboardButtons() {
+	const clipboards = [];
+
 	// eslint-disable-next-line no-new
-	new Clipboard( 'button.single-url-detail-copy', {
+	clipboards.push( new Clipboard( 'button.single-url-detail-copy', {
 		text: ( btn ) => {
 			const json = JSON.parse( btn.getAttribute( 'data-error-json' ) );
 			const statusSelect = btn.closest( 'tr' ).querySelector( '.amp-validation-error-status' );
 			json.status = statusSelect.options[ statusSelect.selectedIndex ].text;
 
 			return JSON.stringify( json, null, '\t' );
 		},
-	} );
+	} ) );
 
 	// eslint-disable-next-line no-new
-	new Clipboard( 'button.copy-all', {
+	clipboards.push( new Clipboard( 'button.copy-all', {
 		text: () => {
 			const value = getURLValidationTableRows( { checkedOnly: true } ).map( ( row ) => {
 				const copyButton = row.querySelector( '.single-url-detail-copy' );
@@ -42,5 +67,9 @@ export function handleCopyToClipboardButtons() {
 
 			return JSON.stringify( value, null, '\t' );
 		},
+	} ) );
+
+	clipboards.forEach( ( clipboard ) => {
+		clipboard.on( 'success', onSuccess );
 	} );
 }