Improve cookie consent UX and scanner discoverability

[David Pine (IEvangelist)]

Summary

• Add a text-style Manage Cookies action under Legal at all viewport sizes where WCP requires consent. Remove the mobile footer cookie button and retain the desktop header icon.
• Give the Legal action the unique ID c-uhff-footer_managecookies, reuse the existing consent handler and tour hooks, and preserve regional consent and analytics behavior.
• Normalize the WCP dialog's responsive gutters, padding, and scrolling. Keep the title, actions, and inset 44px close control reachable.
• Use the shared Try Aspire primary-action colors for Accept and Save changes, including hover and focus states. The previous --aspire-color-light background resolved to muted gray in light mode.
• Add scanner, component, layout, and contrast regression coverage and document the scanner configuration.

Post-deployment scanner configuration: use //*[@id="c-uhff-footer_managecookies"] instead of //button[contains(@class, 'cookie-consent-btn')], which matches multiple controls, including hidden responsive variants. Complete the initial banner choice before testing the footer reopening action, particularly on narrow screens. WCP must be initialized in a consent-required context. External scanner settings have not been changed; rerun WebInsights after deployment.

Third-party links and affiliations

None.

Validation

• Component and site-tour unit tests: 84 passed.
• Cookie consent and initial dialog layout E2E matrix: 60 passed across desktop, tablet, and mobile Chromium projects.
• After the color correction, expanded dialog/color matrix: 27 passed, including both themes, primary/hover colors, axe color-contrast checks, RTL, narrow/short viewports, and enlarged text. The new color tests reproduced the original defect before the fix.
• Focused ESLint, TypeScript checks using Astro-compatible bundler module resolution, formatting checks, and git diff --check passed.
• Verified the real CDN-provided WCP UI locally with a browser-only regional request override, including saved-choice reopening, close/Escape focus restoration, responsive layout, and primary/hover colors in both themes. No regional override is included in production code.
• Maintainer tested the EU-emulated local experience and confirmed the improved UI.
• No local production build was run. External compliance scan results remain a post-deployment verification.

[Copilot]

🟡 Changes recommended

Primary-action focus coverage is incomplete, and the new footer button has a typography inconsistency.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Improves cookie-consent discoverability, responsive dialog usability, styling, and scanner coverage.

Changes:

• Adds a scanner-addressable Legal “Manage Cookies” action.
• Updates WCP layout, colors, and focus styling.
• Adds component, E2E, accessibility, and scanner regression coverage.

File summaries

File	Summary
src/frontend/tests/unit/custom-components.vitest.test.ts	Adds component markup coverage.
src/frontend/tests/e2e/cookie-dialog-layout.spec.ts	Adds responsive and contrast coverage.
src/frontend/tests/e2e/cookie-consent.spec.ts	Adds consent-flow and scanner coverage.
src/frontend/src/styles/wcp-consent.css	Updates dialog layout, colors, and focus styles. Moderate: add primary-action keyboard-focus assertions.
src/frontend/src/content/i18n/en.json	Adds the Manage Cookies translation.
src/frontend/src/components/starlight/Head.astro	Updates consent-control documentation comments.
src/frontend/src/components/FooterSocials.astro	Removes the mobile footer cookie control.
src/frontend/src/components/FooterLegal.astro	Adds the Legal consent action. Nit: align its typography with sibling footer links.
.github/astro.instructions.md	Documents scanner configuration and consent testing.

Review details

Suppressed comments (1)

src/frontend/src/styles/wcp-consent.css:353

• The focus treatment is changed to --aspire-action-focus, but the new color regression tests only assert resting and hover colors. The layout test checks only that the close button has a solid outline, so a regression that gives Accept or Save changes the wrong focus color would pass; add keyboard-focus assertions for both primary actions in light and dark themes.

  outline: 2px solid var(--aspire-action-focus) !important;

• Files reviewed: 9/9 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[aspire-repo-bot]

Frontend HTML artifact ready

The latest frontend build uploaded the frontend-dist artifact for PR #1689. Use the VS Code button below to open this PR with GitHub Artifacts Explorer and browse the built HTML locally.

This comment updates automatically when a new frontend build artifact is uploaded.

[James Newton-King (JamesNK)]

Reviewed the cookie consent component, delegated interaction path, responsive dialog styles, and regression coverage. No actionable issues found.