fix(clipboard): (#1981)

* fix(clipboard): add isSecureContext check

* fix(clipboard): hide button from screenreader if visually hidden

* style(clipboard): linting

* fix(clipboard): failover to execCommand, remove decorators

* chore: add changeset

Co-authored-by: Aditi Ohri <[email protected]>
Co-authored-by: Steven Spriggs <[email protected]>
Co-authored-by: heyMP <[email protected]>

Author: 4 people

.changeset/real-forks-type.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-clipboard": patch
+---
+
+pfe-clipboard: add fallback check for http traffic on browsers that support navigator.

elements/pfe-clipboard/pfe-clipboard.ts

@@ -110,6 +110,16 @@ export class PfeClipboard extends LitElement {
   @property({ type: String, reflect: true, attribute: 'copy-from' })
     copyFrom: string|'url'|'property' = 'url';
 
+  /**
+   * Specify if current site is behind [https]
+   */
+  private _secure = window.isSecureContext;
+
+  /**
+   * Specify the copy type to be used depending on security and browser support
+   */
+  private _copyType: 'navigator' | 'queryCommand' | null = null;
+
   /**
    * A setter to set the content you would like to copy.
    * Only works if copy-from attribute is set to property.
@@ -143,6 +153,8 @@ export class PfeClipboard extends LitElement {
 
     this.dispatchEvent(deprecatedCustomEvent('pfe-clipboard:connected', { component: this }));
 
+    this._setCopyType();
+
     // This prevents a regression, default text used to be "Copy URL".
     // Now that component can copy _anything_ that's not ideal default text
     if (this.copyFrom === 'url' && !this.slots.hasSlotted('text')) {
@@ -219,7 +231,7 @@ export class PfeClipboard extends LitElement {
   /**
    * Checks to make sure the thing we may copy exists
    */
-  @bound private _checkForCopyTarget() {
+  private _checkForCopyTarget() {
     if (this.copyFrom === 'property') {
       if (!this.contentToCopy) {
         this.setAttribute('disabled', '');
@@ -235,6 +247,17 @@ export class PfeClipboard extends LitElement {
     }
   }
 
+  /**
+   * Sets copy type depending on whether or not the current site is secure
+   */
+  private _setCopyType() {
+    if (this._secure && navigator.clipboard) {
+      this._copyType = 'navigator';
+    } else {
+      this._copyType = 'queryCommand';
+    }
+  }
+
   /**
    * Event handler for any activation of the copy button
    */
@@ -380,22 +403,22 @@ export class PfeClipboard extends LitElement {
     if (!text) {
       this.logger.error('Copy function called, but no text was given to copy.');
     }
-    if (navigator.clipboard) {
-      // If the Clipboard API is available then use that
-      await navigator.clipboard.writeText(text);
-      return text;
-    } else if (document.queryCommandEnabled('copy')) {
-      // If execCommand("copy") exists then use that method
-      const dummy = document.createElement('input');
-      document.body.appendChild(dummy);
-      dummy.value = text;
-      dummy.select();
-      document.execCommand('copy');
-      document.body.removeChild(dummy);
-      return text;
-    } else {
-      throw new Error('Current browser does not support copying to the clipboard.');
+
+    switch (this._copyType) {
+      case 'navigator':
+        await navigator.clipboard.writeText(text);
+        break;
+      case 'queryCommand': {
+        const dummy = document.createElement('input');
+        document.body.appendChild(dummy);
+        dummy.value = text;
+        dummy.select();
+        document.execCommand('copy');
+        document.body.removeChild(dummy);
+        break;
+      }
     }
+    return text;
   }
 }