diff --git a/src/scripts/modules/feedback-form.js b/src/scripts/modules/feedback-form.js
new file mode 100644
index 0000000000..d23e57bfde
--- /dev/null
+++ b/src/scripts/modules/feedback-form.js
@@ -0,0 +1,16 @@
+// @ts-check
+
+// The Google Form behind the feedback widget. Its three fields, read off the
+// live form:
+// entry.336432709 "Which page did you view?" short text, optional
+// entry.128617088 "How useful was the content?" linear scale 1-5, required
+// entry.434783109 "...what we did well, or what we could improve" required
+// Yes maps to 5 and No to 1 - the form has no yes/no field to send to.
+export const FORM_ID =
+ '1FAIpQLSehVdN2w6tgSvp5QX7lHGnHDmgKi2Yfvko7bM2izgWQaqg-Wg';
+export const FORM_URL = `https://docs.google.com/forms/d/e/${FORM_ID}/formResponse`;
+export const FIELD_PAGE = 'entry.336432709';
+export const FIELD_RATING = 'entry.128617088';
+export const FIELD_COMMENT = 'entry.434783109';
+export const RATING_YES = '5';
+export const RATING_NO = '1';
diff --git a/src/scripts/modules/feedback.js b/src/scripts/modules/feedback.js
new file mode 100644
index 0000000000..dfdff67c63
--- /dev/null
+++ b/src/scripts/modules/feedback.js
@@ -0,0 +1,108 @@
+// @ts-check
+import { qs, qsa } from './query.js';
+import {
+ FIELD_COMMENT,
+ FIELD_PAGE,
+ FIELD_RATING,
+ FORM_URL,
+} from './feedback-form.js';
+
+/**
+ * Google Forms sends no CORS headers, so the POST has to go out as no-cors and
+ * the response comes back opaque. There is no way to read whether the form
+ * accepted it - a rejected submission looks identical to an accepted one, so
+ * anything Google answered at all counts as accepted. A change to the form's
+ * fields would therefore go unnoticed here.
+ *
+ * @param {string} page
+ * @param {string} rating
+ * @param {string} comment
+ * @returns {Promise}
+ */
+async function submit(page, rating, comment) {
+ const body = new URLSearchParams();
+ body.set(FIELD_PAGE, page);
+ body.set(FIELD_RATING, rating);
+ // The comment is marked required on the form, so a blank box still has to
+ // send something for the submission to be accepted at all.
+ body.set(FIELD_COMMENT, comment.trim() || ' ');
+
+ await fetch(FORM_URL, { method: 'POST', mode: 'no-cors', body });
+}
+
+/**
+ * The title alone is ambiguous - "Overview" and "Prerequisites" repeat across
+ * the docs - and the URL alone is unreadable in a spreadsheet, so the field
+ * carries both. The hash says which section was open. The query string is
+ * dropped, as campaign parameters say nothing about the page.
+ *
+ * @param {string} title
+ * @returns {string}
+ */
+function pageLabel(title) {
+ const { origin, pathname, hash } = window.location;
+ const url = `${origin}${pathname}${hash}`;
+
+ return title ? `${title} - ${url}` : url;
+}
+
+class Feedback {
+ /** @param {HTMLElement} root */
+ constructor(root) {
+ this.root = root;
+ this.votes = qsa('[data-feedback-vote]', root);
+ this.comment = qs('[data-feedback-comment]', root);
+ this.textarea = qs('textarea', root);
+ this.send = qs('[data-feedback-send]', root);
+ this.thanks = qs('[data-feedback-thanks]', root);
+ /** @type {string | null} */
+ this.rating = null;
+
+ this.addListeners();
+ }
+
+ addListeners() {
+ this.votes.forEach((button) => {
+ button.addEventListener('click', () => this.vote(button));
+ });
+ this.send.addEventListener('click', () => this.submit());
+ }
+
+ /** @param {HTMLElement} chosen */
+ vote(chosen) {
+ this.rating = chosen.dataset.feedbackVote ?? null;
+ this.votes.forEach((button) => {
+ button.setAttribute('aria-pressed', String(button === chosen));
+ });
+ this.comment.hidden = false;
+ }
+
+ async submit() {
+ if (!this.rating) return;
+
+ // Guards against a second submission while the first is in flight.
+ this.send.setAttribute('disabled', '');
+
+ try {
+ await submit(
+ pageLabel(this.root.dataset.feedbackPage ?? ''),
+ this.rating,
+ this.textarea.value
+ );
+ } catch (err) {
+ // Offline, or blocked by an extension - it never left the browser.
+ console.warn('[feedback] submission failed', err);
+ this.send.removeAttribute('disabled');
+ return;
+ }
+
+ this.root.querySelectorAll('.feedback__vote, .feedback__comment').forEach(
+ /** @param {Element} el */ (el) => {
+ /** @type {HTMLElement} */ (el).hidden = true;
+ }
+ );
+ this.thanks.hidden = false;
+ }
+}
+
+qsa('[data-feedback]').forEach((root) => new Feedback(root));
diff --git a/src/scripts/modules/headers.js b/src/scripts/modules/headers.js
index dfdcdf7c18..5509b6bafd 100644
--- a/src/scripts/modules/headers.js
+++ b/src/scripts/modules/headers.js
@@ -5,8 +5,8 @@ import { copyOnClick } from './copy-button.js';
const REST = 'Copy URL';
/**
- * Scoped to .page-content headings with an id: the feedback prompt and the
- * navigation render their own headings, and those have nothing to link to.
+ * Scoped to .page-content headings with an id: the navigation renders its own
+ * headings, and those have nothing to link to.
*
* Each heading is given an aria-label of its own text. A heading is named from
* its contents, and those contents include a nested control's name, so without
diff --git a/src/styles/button.css b/src/styles/button.css
index bbefb2c05f..07fc082e05 100644
--- a/src/styles/button.css
+++ b/src/styles/button.css
@@ -80,6 +80,11 @@ img.btn__icon {
background: var(--colorBackgroundPrimaryPressed);
}
+/* A toggle button that is currently on holds the pressed background. */
+.btn[aria-pressed='true']:not(:disabled, [aria-disabled='true']) {
+ background: var(--colorBackgroundPrimaryPressed);
+}
+
.btn:is(:disabled, [aria-disabled='true']) {
background: var(--colorButtonBackgroundDisabled);
border-color: var(--colorButtonBorderDisabled);
diff --git a/tests/feedback.spec.ts b/tests/feedback.spec.ts
new file mode 100644
index 0000000000..7a80a2c69d
--- /dev/null
+++ b/tests/feedback.spec.ts
@@ -0,0 +1,101 @@
+import { test, expect } from '@playwright/test';
+import {
+ FIELD_COMMENT,
+ FIELD_PAGE,
+ FIELD_RATING,
+ RATING_NO,
+ RATING_YES,
+} from '../src/scripts/modules/feedback-form.js';
+
+const PAGE = '/docs/kubernetes/steps/kustomize';
+
+test.describe('feedback widget', () => {
+ test.beforeEach(async ({ page }) => {
+ // Blocked for every test, so no run can post to the live form. The success
+ // case below overrides this: Playwright matches the newest route first.
+ await page.route('**/docs.google.com/**', (route) => route.abort());
+ await page.goto(PAGE);
+ });
+
+ test('asks the question alone until a rating is given', async ({ page }) => {
+ await expect(page.locator('.feedback__question')).toBeVisible();
+ await expect(page.locator('.feedback__comment')).toBeHidden();
+ await expect(page.locator('.feedback__thanks')).toBeHidden();
+ });
+
+ test('discloses the comment box on a rating', async ({ page }) => {
+ await page.locator(`[data-feedback-vote="${RATING_YES}"]`).click();
+
+ await expect(page.locator('.feedback__comment')).toBeVisible();
+ await expect(
+ page.locator(`[data-feedback-vote="${RATING_YES}"]`)
+ ).toHaveAttribute('aria-pressed', 'true');
+ await expect(
+ page.locator(`[data-feedback-vote="${RATING_NO}"]`)
+ ).toHaveAttribute('aria-pressed', 'false');
+ });
+
+ test('moves the rating to the other button', async ({ page }) => {
+ await page.locator(`[data-feedback-vote="${RATING_YES}"]`).click();
+ await page.locator(`[data-feedback-vote="${RATING_NO}"]`).click();
+
+ await expect(
+ page.locator(`[data-feedback-vote="${RATING_YES}"]`)
+ ).toHaveAttribute('aria-pressed', 'false');
+ await expect(
+ page.locator(`[data-feedback-vote="${RATING_NO}"]`)
+ ).toHaveAttribute('aria-pressed', 'true');
+ });
+
+ test('thanks the reader once the submission has gone out', async ({
+ page,
+ }) => {
+ await page.route('**/docs.google.com/**', (route) =>
+ route.fulfill({ status: 200, body: '' })
+ );
+
+ await page.locator(`[data-feedback-vote="${RATING_YES}"]`).click();
+ await page.locator('[data-feedback-send]').click();
+
+ await expect(page.locator('.feedback__thanks')).toBeVisible();
+ await expect(page.locator('.feedback__vote')).toBeHidden();
+ await expect(page.locator('.feedback__comment')).toBeHidden();
+ });
+
+ test('sends the page title and url, the rating and the comment', async ({
+ page,
+ }) => {
+ /** @type {string | null} */
+ let body = null;
+ await page.route('**/docs.google.com/**', (route) => {
+ body = route.request().postData();
+ return route.fulfill({ status: 200, body: '' });
+ });
+
+ await page.locator(`[data-feedback-vote="${RATING_YES}"]`).click();
+ await page.locator('.feedback__textarea').fill('the kustomize page');
+ await page.locator('[data-feedback-send]').click();
+ await expect(page.locator('.feedback__thanks')).toBeVisible();
+
+ const sent = new URLSearchParams(body ?? '');
+ expect(sent.get(FIELD_PAGE)).toBe(
+ `Deploy with Kustomize - http://localhost:3000${PAGE}`
+ );
+ expect(sent.get(FIELD_RATING)).toBe(RATING_YES);
+ expect(sent.get(FIELD_COMMENT)).toBe('the kustomize page');
+ });
+
+ test('keeps the form up when the submission never leaves the browser', async ({
+ page,
+ }) => {
+ await page.locator(`[data-feedback-vote="${RATING_NO}"]`).click();
+ await page.locator('[data-feedback-send]').click();
+
+ // Send is disabled for the attempt and only comes back on the failure, so
+ // this settles after the handler has run. The two checks below would each
+ // pass against a handler that had not reached its catch yet.
+ await expect(page.locator('[data-feedback-send]')).toBeEnabled();
+ await expect(page.locator('.feedback__thanks')).toBeHidden();
+ await expect(page.locator('.feedback__vote')).toBeVisible();
+ });
+});