pushfeedback 0.1.84 → 0.1.85

package/dist/collection/components/feedback-modal/feedback-modal.js

@@ -1,8 +1,27 @@
 import { h } from '@stencil/core';
+import { sanitizeHtml } from '../../utils/sanitize-html';
 export class FeedbackModal {
   constructor() {
     // Track the history entry pushed while the modal is open
     this.historyEntryPushed = false;
+    // Element that had focus before the modal opened, so it can be restored on close
+    this.previouslyFocused = null;
+    this.handleKeyDown = (event) => {
+      // The canvas editor renders its own overlay and handles its own keys
+      if (!this.showModal || this.embedded || this.showCanvasEditor) {
+        return;
+      }
+      if (event.key === 'Escape' && this.escapeClose) {
+        event.preventDefault();
+        // Escape is an accidental-dismissal path like clicking outside, so keep
+        // whatever the user already typed
+        this.doClose(!this.formSuccess);
+        return;
+      }
+      if (event.key === 'Tab') {
+        this.trapFocus(event);
+      }
+    };
     this.handlePopState = () => {
       // Back button pressed while the modal is open: close it and consume our entry
       if (this.historyEntryPushed) {
@@ -46,12 +65,16 @@ export class FeedbackModal {
           }
         }
         const body = Object.assign({ url: window.location.href, message: this.formMessage, email: this.formEmail, project: this.project, screenshot: this.encodedScreenshot, rating: this.selectedRating, ratingMode: this.ratingMode, metadata: this.metadata, verification: this.formVerification, session: localStorage.getItem('pushfeedback_sessionid') || '' }, (recaptchaToken && { recaptchaToken }));
-        const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
+        const headers = {
+          'Content-Type': 'application/json',
+        };
+        if (this.apiKey) {
+          headers['Authorization'] = `Api-Key ${this.apiKey}`;
+        }
+        const res = await fetch('https://app.pushfeedback.com/api/v1/feedback/', {
           method: 'POST',
           body: JSON.stringify(body),
-          headers: {
-            'Content-Type': 'application/json',
-          },
+          headers,
         });
         if (res.status === 201) {
           const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
@@ -124,8 +147,15 @@ export class FeedbackModal {
           this.encodedScreenshot = null;
           this.formMessage = '';
           this.formEmail = '';
+          // The rating and the privacy checkbox are part of the same in-progress
+          // input. Leaving the rating set meant reopening the modal showed the
+          // previous session's choice still highlighted, and submitting then sent
+          // that stale rating instead of one chosen for this submission.
+          this.selectedRating = this.initialRating();
+          this.isPrivacyChecked = false;
         }
         this.resetOverflow();
+        this.restoreFocus();
       }, 200);
     };
     // Handle screenshot events from canvas editor
@@ -135,12 +165,16 @@ export class FeedbackModal {
       this.takingScreenshot = false;
       this.showCanvasEditor = false;
       this.autoStartCapture = false;
+      this.focusModal();
     };
     this.handleScreenshotCancelled = () => {
       this.showModal = true;
       this.takingScreenshot = false;
       this.showCanvasEditor = false;
       this.autoStartCapture = false;
+      // Focus was inside the editor that just went away, so bring it back to the
+      // form rather than letting it fall to the top of the page
+      this.focusModal();
     };
     this.handleScreenshotError = (event) => {
       console.error('Screenshot error:', event.detail.error);
@@ -152,6 +186,7 @@ export class FeedbackModal {
       this.takingScreenshot = false;
       this.showCanvasEditor = false;
       this.autoStartCapture = false;
+      this.focusModal();
       // Auto-hide error after 8 seconds
       setTimeout(() => {
         this.showScreenshotError = false;
@@ -193,6 +228,7 @@ export class FeedbackModal {
     this.screenshotError = '';
     this.showCanvasEditor = false;
     this.autoStartCapture = false;
+    this.apiKey = '';
     this.customFont = false;
     this.emailAddress = '';
     this.hideEmail = false;
@@ -212,8 +248,10 @@ export class FeedbackModal {
     this.embedded = false;
     this.clickOutsideClose = true;
     this.historyClose = true;
+    this.escapeClose = true;
     this.emailPlaceholder = 'Email address (optional)';
     this.errorMessage = 'Please try again later.';
+    this.errorMessage401 = 'This project requires a valid API key to submit feedback. Check the api-key attribute.';
     this.errorMessage403 = 'The request URL does not match the one defined in PushFeedback for this project.';
     this.errorMessage404 = 'We could not find the provided project ID in PushFeedback.';
     this.messagePlaceholder = 'Share your thoughts...';
@@ -226,6 +264,10 @@ export class FeedbackModal {
     this.ratingPlaceholder = 'Was this page helpful?';
     this.ratingStarsPlaceholder = 'How would you rate this page?';
     this.sendButtonText = 'Send';
+    this.closeButtonLabel = 'Close feedback form';
+    this.ratingPositiveLabel = 'Yes';
+    this.ratingNegativeLabel = 'No';
+    this.ratingStarLabel = 'Rate {rating} out of 5';
     this.successMessage = '';
     this.recaptchaText = 'This form is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply.';
     this.screenshotAttachedText = 'Screenshot attached';
@@ -248,20 +290,96 @@ export class FeedbackModal {
   }
   connectedCallback() {
     window.addEventListener('popstate', this.handlePopState);
+    document.addEventListener('keydown', this.handleKeyDown);
   }
   disconnectedCallback() {
     window.removeEventListener('popstate', this.handlePopState);
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+  // Keeps Tab cycling inside the dialog while it is open
+  trapFocus(event) {
+    var _a, _b;
+    const focusable = this.getFocusableElements();
+    if (focusable.length === 0) {
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = (_a = this.modalContent) === null || _a === void 0 ? void 0 : _a.getRootNode();
+    const current = active === null || active === void 0 ? void 0 : active.activeElement;
+    if (current === this.modalContent) {
+      // Focus is on the dialog container itself (where it lands on open).
+      // Tab falls through to the first control natively; Shift+Tab would
+      // escape the dialog, so wrap it to the last one.
+      if (event.shiftKey) {
+        event.preventDefault();
+        last.focus();
+      }
+    }
+    else if (event.shiftKey && current === first) {
+      event.preventDefault();
+      last.focus();
+    }
+    else if (!event.shiftKey && current === last) {
+      event.preventDefault();
+      first.focus();
+    }
+    else if (!current || !((_b = this.modalContent) === null || _b === void 0 ? void 0 : _b.contains(current))) {
+      // Focus escaped the dialog (or never entered it) - pull it back in
+      event.preventDefault();
+      first.focus();
+    }
+  }
+  // offsetParent is not usable here: it is null for `position: fixed` elements
+  // even when they are perfectly visible, and it is non-null for
+  // `visibility: hidden` ones, which cannot be focused. getClientRects covers
+  // display:none and detached nodes, so visibility is the only extra check.
+  isFocusable(el) {
+    if (el.hidden || el.getClientRects().length === 0) {
+      return false;
+    }
+    return getComputedStyle(el).visibility !== 'hidden';
+  }
+  getFocusableElements() {
+    if (!this.modalContent) {
+      return [];
+    }
+    const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    return Array.from(this.modalContent.querySelectorAll(selector)).filter((el) => this.isFocusable(el));
+  }
+  // Moves focus to the dialog container once it has rendered, so screen readers
+  // announce the dialog title rather than jumping straight to the first control
+  focusModal() {
+    requestAnimationFrame(() => {
+      if (this.modalContent) {
+        this.modalContent.focus();
+      }
+    });
+  }
+  restoreFocus() {
+    const target = this.previouslyFocused;
+    this.previouslyFocused = null;
+    if (target && typeof target.focus === 'function' && target.isConnected) {
+      target.focus();
+    }
+  }
+  // The rating the widget starts from. Closing restores this rather than
+  // blanking to neutral, so a consumer's configured `rating` default survives
+  // the modal being closed and reopened.
+  initialRating() {
+    if (this.ratingMode == 'thumbs' && this.rating == 0) {
+      return 5;
+    }
+    if (this.rating) {
+      return this.rating;
+    }
+    return -1;
   }
   componentWillLoad() {
     if (this.fetchData)
       this.fetchProjectData();
     this.formEmail = this.emailAddress;
-    if (this.rating) {
-      this.selectedRating = this.rating;
-    }
-    if (this.ratingMode == 'thumbs' && this.rating == 0) {
-      this.selectedRating = 5;
-    }
+    this.selectedRating = this.initialRating();
     // Automatically show modal when embedded
     if (this.embedded) {
       this.showModal = true;
@@ -269,7 +387,9 @@ export class FeedbackModal {
   }
   async fetchProjectData() {
     try {
-      const response = await fetch('https://app.pushfeedback.com/api/projects/' + this.project + '/');
+      // Public config endpoint: never send the API key here, it is only
+      // needed (and only allowed to travel) on the feedback POST
+      const response = await fetch('https://app.pushfeedback.com/api/v1/projects/' + this.project + '/');
       const data = await response.json();
       this.whitelabel = data.whitelabel;
       this.recaptchaEnabled = data.recaptcha_enabled || false;
@@ -358,28 +478,28 @@ export class FeedbackModal {
     this.selectedRating = newRating;
   }
   render() {
-    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''} ${this.embedded ? 'feedback-modal-wrapper--embedded' : ''}`, part: "wrapper" }, this.showCanvasEditor && (h("canvas-editor", { ref: (el) => (this.canvasEditorRef = el), exportparts: "overlay: canvas-editor-overlay, modal: canvas-editor-modal, header: canvas-editor-header, title: canvas-editor-title, toolbar: canvas-editor-toolbar, tool-button: canvas-editor-tool-button, cancel-button: canvas-editor-cancel-button, save-button: canvas-editor-save-button, content: canvas-editor-content, canvas: canvas-editor-canvas", "canvas-editor-title": this.screenshotEditorTitle, "canvas-editor-cancel-text": this.screenshotEditorCancelText, "canvas-editor-save-text": this.screenshotEditorSaveText, "screenshot-taking-text": this.screenshotTakingText, "screenshot-attached-text": this.screenshotAttachedText, "screenshot-button-text": this.screenshotButtonText, "auto-start-screenshot": this.autoStartCapture, "existing-screenshot": this.encodedScreenshot || '', "edit-text-button-text": this.screenshotEditTextButtonText, "size-label-text": this.screenshotSizeLabelText, "border-label-text": this.screenshotBorderLabelText, "edit-text-prompt-text": this.screenshotEditTextPromptText, "screenshot-error-general": this.screenshotErrorGeneral, "screenshot-error-permission": this.screenshotErrorPermission, "screenshot-error-not-supported": this.screenshotErrorNotSupported, "screenshot-error-not-found": this.screenshotErrorNotFound, "screenshot-error-cancelled": this.screenshotErrorCancelled, "screenshot-error-browser-not-supported": this.screenshotErrorBrowserNotSupported, "screenshot-error-unexpected": this.screenshotErrorUnexpected, onScreenshotReady: this.handleScreenshotReady, onScreenshotCancelled: this.handleScreenshotCancelled, onScreenshotFailed: this.handleScreenshotError })), this.showScreenshotError && (h("div", { class: "screenshot-error-notification" }, h("div", { class: "screenshot-error-content" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })), h("span", null, this.screenshotError), h("button", { class: "error-close-btn", onClick: () => (this.showScreenshotError = false), title: "Close" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))))), this.showModal && !this.embedded && (h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}`, part: "overlay", onClick: this.clickOutsideClose ? this.handleOverlayClick : undefined })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''} ${this.embedded ? 'feedback-modal-content--embedded' : ''}`, part: "modal", ref: (el) => (this.modalContent = el) }, h("div", { class: `feedback-modal-header ${(this.formSuccess && !this.successMessage) || (this.formError && !this.errorMessage)
+    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''} ${this.embedded ? 'feedback-modal-wrapper--embedded' : ''}`, part: "wrapper" }, this.showCanvasEditor && (h("canvas-editor", { ref: (el) => (this.canvasEditorRef = el), exportparts: "overlay: canvas-editor-overlay, modal: canvas-editor-modal, header: canvas-editor-header, title: canvas-editor-title, toolbar: canvas-editor-toolbar, tool-button: canvas-editor-tool-button, cancel-button: canvas-editor-cancel-button, save-button: canvas-editor-save-button, content: canvas-editor-content, canvas: canvas-editor-canvas", "canvas-editor-title": this.screenshotEditorTitle, "canvas-editor-cancel-text": this.screenshotEditorCancelText, "canvas-editor-save-text": this.screenshotEditorSaveText, "screenshot-taking-text": this.screenshotTakingText, "screenshot-attached-text": this.screenshotAttachedText, "screenshot-button-text": this.screenshotButtonText, "escape-close": this.escapeClose ? 'true' : 'false', "click-outside-close": this.clickOutsideClose ? 'true' : 'false', "auto-start-screenshot": this.autoStartCapture, "existing-screenshot": this.encodedScreenshot || '', "edit-text-button-text": this.screenshotEditTextButtonText, "size-label-text": this.screenshotSizeLabelText, "border-label-text": this.screenshotBorderLabelText, "edit-text-prompt-text": this.screenshotEditTextPromptText, "screenshot-error-general": this.screenshotErrorGeneral, "screenshot-error-permission": this.screenshotErrorPermission, "screenshot-error-not-supported": this.screenshotErrorNotSupported, "screenshot-error-not-found": this.screenshotErrorNotFound, "screenshot-error-cancelled": this.screenshotErrorCancelled, "screenshot-error-browser-not-supported": this.screenshotErrorBrowserNotSupported, "screenshot-error-unexpected": this.screenshotErrorUnexpected, onScreenshotReady: this.handleScreenshotReady, onScreenshotCancelled: this.handleScreenshotCancelled, onScreenshotFailed: this.handleScreenshotError })), this.showScreenshotError && (h("div", { class: "screenshot-error-notification" }, h("div", { class: "screenshot-error-content" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })), h("span", null, this.screenshotError), h("button", { class: "error-close-btn", onClick: () => (this.showScreenshotError = false), title: "Close" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))))), this.showModal && !this.embedded && (h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}`, part: "overlay", "aria-hidden": "true", onClick: this.clickOutsideClose ? this.handleOverlayClick : undefined })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''} ${this.embedded ? 'feedback-modal-content--embedded' : ''}`, part: "modal", role: this.embedded ? 'region' : 'dialog', "aria-modal": this.embedded ? undefined : 'true', "aria-labelledby": "feedback-modal-title", tabindex: "-1", ref: (el) => (this.modalContent = el) }, h("div", { class: `feedback-modal-header ${(this.formSuccess && !this.successMessage) || (this.formError && !this.errorMessage)
         ? 'feedback-modal-header--no-content'
-        : ''}`, part: "header" }, h("div", { class: "feedback-modal-header-content" }, !this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-header-text" }, h("span", { class: "feedback-modal-title", part: "title" }, this.modalTitle), !this.whitelabel && (h("span", { class: "feedback-modal-powered-by", part: "powered-by" }, "Powered by", ' ', h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback"))))) : this.formSuccess ? (h("span", { class: "feedback-modal-title", part: "title" }, this.modalTitleSuccess)) : (h("span", { class: "feedback-modal-title", part: "title" }, this.modalTitleError))), !this.embedded && (h("button", { class: "feedback-modal-close", part: "close-button", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))), h("div", { class: "feedback-modal-body", part: "body" }, !this.formSuccess && !this.formError ? (h("form", { part: "form", onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating", part: "rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading", part: "rating-title" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs", part: "rating-buttons" }, h("button", { title: "Yes", class: `feedback-modal-rating-button feedback-modal-rating-button--positive ${this.selectedRating === 1
+        : ''}`, part: "header" }, h("div", { class: "feedback-modal-header-content" }, !this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-header-text" }, h("span", { id: "feedback-modal-title", class: "feedback-modal-title", part: "title" }, this.modalTitle), !this.whitelabel && (h("span", { class: "feedback-modal-powered-by", part: "powered-by" }, "Powered by", ' ', h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback"))))) : this.formSuccess ? (h("span", { id: "feedback-modal-title", class: "feedback-modal-title", part: "title" }, this.modalTitleSuccess)) : (h("span", { id: "feedback-modal-title", class: "feedback-modal-title", part: "title" }, this.modalTitleError))), !this.embedded && (h("button", { class: "feedback-modal-close", part: "close-button", type: "button", "aria-label": this.closeButtonLabel, onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))), h("div", { class: "feedback-modal-body", part: "body" }, !this.formSuccess && !this.formError ? (h("form", { part: "form", onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating", part: "rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading", part: "rating-title" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs", part: "rating-buttons" }, h("button", { type: "button", title: this.ratingPositiveLabel, "aria-label": this.ratingPositiveLabel, "aria-pressed": this.selectedRating === 1 ? 'true' : 'false', class: `feedback-modal-rating-button feedback-modal-rating-button--positive ${this.selectedRating === 1
         ? 'feedback-modal-rating-button--selected'
         : ''}`, part: "rating-button rating-button-positive", onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(1);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button feedback-modal-rating-button--negative ${this.selectedRating === 5
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { type: "button", title: this.ratingNegativeLabel, "aria-label": this.ratingNegativeLabel, "aria-pressed": this.selectedRating === 5 ? 'true' : 'false', class: `feedback-modal-rating-button feedback-modal-rating-button--negative ${this.selectedRating === 5
         ? 'feedback-modal-rating-button--selected'
         : ''}`, part: "rating-button rating-button-negative", onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(5);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading", part: "rating-title" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars", part: "rating-buttons" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading", part: "rating-title" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars", part: "rating-buttons" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, type: "button", "aria-label": this.ratingStarLabel.replace('{rating}', String(rating)), "aria-pressed": this.selectedRating === rating ? 'true' : 'false', class: `feedback-modal-rating-button ${this.selectedRating >= rating
         ? 'feedback-modal-rating-button--selected'
         : ''}`, part: "rating-button", onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(rating);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { part: "message-input", placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { part: "email-input", placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy", part: "privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}`, part: "buttons" }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, part: "screenshot-button", onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather-loader" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })))), this.takingScreenshot
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { part: "message-input", placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { part: "email-input", placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy", part: "privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: sanitizeHtml(this.privacyPolicyText) }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}`, part: "buttons" }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, part: "screenshot-button", onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather-loader" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })))), this.takingScreenshot
       ? this.screenshotTakingText
       : this.encodedScreenshot
         ? this.screenshotAttachedText
-        : this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", part: "submit-button", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-success" }, h("p", { class: "feedback-modal-message", part: "success-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage)) : (h("span", null))), !this.formSuccess && !this.formError && (this.recaptchaEnabled || this.footerText) && (h("div", { class: "feedback-modal-footer", part: "footer" }, h("div", { class: "feedback-footer-combined" }, this.recaptchaEnabled && h("span", { innerHTML: this.recaptchaText }), this.recaptchaEnabled && this.footerText && ' ', this.footerText && h("span", { innerHTML: this.footerText }))))))));
+        : this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", part: "submit-button", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-success" }, h("p", { class: "feedback-modal-message", part: "success-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 401 ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage401)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage)) : (h("span", null))), !this.formSuccess && !this.formError && (this.recaptchaEnabled || this.footerText) && (h("div", { class: "feedback-modal-footer", part: "footer" }, h("div", { class: "feedback-footer-combined" }, this.recaptchaEnabled && (h("span", { innerHTML: sanitizeHtml(this.recaptchaText) })), this.recaptchaEnabled && this.footerText && ' ', this.footerText && h("span", { innerHTML: sanitizeHtml(this.footerText) }))))))));
   }
   componentDidRender() {
     if (this.showModal) {
@@ -389,7 +509,13 @@ export class FeedbackModal {
     }
   }
   async openModal() {
+    // Remember the trigger so focus can return there when the modal closes
+    if (!this.embedded) {
+      const active = document.activeElement;
+      this.previouslyFocused = active && active !== document.body ? active : null;
+    }
     this.showModal = true;
+    this.focusModal();
     if (this.historyClose && !this.embedded && !this.historyEntryPushed) {
       history.pushState({ feedbackModal: true }, '');
       this.historyEntryPushed = true;
@@ -414,6 +540,24 @@ export class FeedbackModal {
   }
   static get properties() {
     return {
+      "apiKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional API key sent with feedback submissions, for projects that\nrequire one. Sent as `Authorization: Api-Key <key>` on the feedback POST\nrequest only, never on the public config request. Only use keys scoped to\n`feedback:submit`: like any credential used by an embedded widget, the\nvalue is part of the page and readable by any script running on it, so it\nprovides server-side scoping and traceability rather than client-side\nsecrecy. Intended for internal or access-controlled pages."
+        },
+        "attribute": "api-key",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "customFont": {
         "type": "boolean",
         "mutable": false,
@@ -754,6 +898,24 @@ export class FeedbackModal {
         "reflect": false,
         "defaultValue": "true"
       },
+      "escapeClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "escape-close",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "emailPlaceholder": {
         "type": "string",
         "mutable": false,
@@ -790,6 +952,24 @@ export class FeedbackModal {
         "reflect": false,
         "defaultValue": "'Please try again later.'"
       },
+      "errorMessage401": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message-4-0-1",
+        "reflect": false,
+        "defaultValue": "'This project requires a valid API key to submit feedback. Check the api-key attribute.'"
+      },
       "errorMessage403": {
         "type": "string",
         "mutable": false,
@@ -1006,6 +1186,78 @@ export class FeedbackModal {
         "reflect": false,
         "defaultValue": "'Send'"
       },
+      "closeButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-button-label",
+        "reflect": false,
+        "defaultValue": "'Close feedback form'"
+      },
+      "ratingPositiveLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating-positive-label",
+        "reflect": false,
+        "defaultValue": "'Yes'"
+      },
+      "ratingNegativeLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating-negative-label",
+        "reflect": false,
+        "defaultValue": "'No'"
+      },
+      "ratingStarLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rating-star-label",
+        "reflect": false,
+        "defaultValue": "'Rate {rating} out of 5'"
+      },
       "successMessage": {
         "type": "string",
         "mutable": false,
@@ -1416,6 +1668,9 @@ export class FeedbackModal {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"

package/dist/collection/utils/sanitize-html.js

@@ -0,0 +1,90 @@
+// Tags allowed in the rich-text props (privacy policy, reCAPTCHA notice,
+// footer). These only ever need links and light inline emphasis.
+const ALLOWED_TAGS = new Set([
+  'A',
+  'B',
+  'BR',
+  'CODE',
+  'EM',
+  'I',
+  'P',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'U',
+]);
+// No `class`: an injected class name cannot reach the host page's CSS (this
+// renders inside a shadow root), but it could match the widget's own internal
+// styles. The default prop values do not use classes, so dropping it is free.
+const ALLOWED_ATTRS = new Set(['href', 'target', 'rel', 'title']);
+// Schemes permitted in href. Anything else, notably javascript:, is dropped.
+const SAFE_URL = /^(https?:|mailto:|tel:|#|\/|\.\/|\.\.\/)/i;
+/**
+ * Removes anything that can execute from a fragment: script and style
+ * elements, event-handler attributes, javascript: URLs, and any tag not on the
+ * allowlist. Text inside a disallowed tag is kept, so stripping a wrapper does
+ * not silently delete the words inside it.
+ */
+function scrub(root) {
+  const elements = Array.from(root.querySelectorAll('*'));
+  for (const el of elements) {
+    // The node may already have been removed along with an ancestor
+    if (!root.contains(el)) {
+      continue;
+    }
+    const tag = el.tagName.toUpperCase();
+    if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'IFRAME' || tag === 'OBJECT') {
+      el.remove();
+      continue;
+    }
+    if (!ALLOWED_TAGS.has(tag)) {
+      // Unwrap: keep the text, drop the element
+      el.replaceWith(...Array.from(el.childNodes));
+      continue;
+    }
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith('on') || !ALLOWED_ATTRS.has(name)) {
+        el.removeAttribute(attr.name);
+        continue;
+      }
+      if (name === 'href' && !SAFE_URL.test(attr.value.trim())) {
+        el.removeAttribute(attr.name);
+      }
+    }
+    // Links opening a new tab must not hand the opener over
+    if (tag === 'A' && el.getAttribute('target') === '_blank') {
+      el.setAttribute('rel', 'noopener noreferrer');
+    }
+  }
+}
+/**
+ * Sanitizes a fragment of HTML for use with innerHTML.
+ *
+ * Prefers the browser's native Element.setHTML() where available, which parses
+ * without executing. Otherwise parses in an inert document (no scripts run, no
+ * images or other subresources are fetched) and scrubs the result.
+ */
+export function sanitizeHtml(html) {
+  if (!html) {
+    return '';
+  }
+  const template = document.createElement('template');
+  // Native sanitizer, when the browser has it
+  const withSetHtml = template;
+  if (typeof withSetHtml.setHTML === 'function') {
+    try {
+      withSetHtml.setHTML(html);
+      scrub(template.content);
+      return template.innerHTML;
+    }
+    catch (_a) {
+      // Fall through to the manual path
+    }
+  }
+  // Inert parsing: content inside <template> is not rendered, so scripts do not
+  // run and no subresource requests are made while we clean it up.
+  template.innerHTML = html;
+  scrub(template.content);
+  return template.innerHTML;
+}