Add DTC legal footer, legal pages, and analytics preferences

[alexeygrigorev]

Parent epic: #6

Normative process: _docs/PROCESS.md

Outcome

Add a consistent Legal section to the global DataTalks.Club footer with:

• Terms of Service;
• Privacy Policy;
• Analytics preferences; and
• Impressum.

Reuse the proven AI Shipping Labs structure and consent behavior, but write and verify the policies for the actual DataTalks.Club website, community, accounts/member profiles, courses/cohorts, events/registrations, GitHub content, Slack onboarding, Relay email, AWS/CloudFront country suggestion, and analytics boundary. Do not copy AI Shipping Labs memberships, Stripe, paid-plan, CRM, sprint, or product-specific statements into DTC.

Reference implementation

Reference the clean content of DataTalksClub/ai-shipping-labs@189708e06ca1e0519a7ad6abfe81fcf9c12b165d, especially:

• templates/includes/footer.html;
• templates/legal/{terms,privacy,impressum}.html;
• content/views/legal.py and its URL routes;
• content/tests/test_legal_pages.py;
• playwright_tests/test_static_page_design_1229.py;
• playwright_tests/test_analytics_consent_1164.py;
• playwright_tests/test_public_mobile_tap_targets_1214.py; and
• _docs/integrations/analytics.md.

Reuse its layout, accessibility, and consent invariants where applicable. DTC's existing design system, no-trailing-slash URL convention, shared services/settings/API rules, and readable non-minified templates remain authoritative.

Product and URL contract

• Canonical public pages are /terms, /privacy, and /impressum with 200 OK and production self-canonicals.
• /terms/, /privacy/, and /impressum/ permanently redirect in one hop to their no-slash canonical while preserving the raw query.
• Footer links point directly to the canonical no-slash URLs; internal links must not rely on redirects.
• The legal section appears on every public shell, including the main/content shell and copied course-platform shell. Use one shared footer/legal partial or another tested single source so the surfaces cannot drift.
• Analytics preferences is a semantic button, not a fake link. It reopens the consent UI without navigation and works from keyboard and assistive technology.
• Development remains globally noindex, nofollow; production legal-page robots/canonical/sitemap treatment is explicit and tested.

DTC-specific legal content

Before acceptance, inventory the actual deployed data flows and processors and reconcile the wording with _docs/specs/07-security-privacy-operations.md. At minimum:

Terms of Service

Cover the free DataTalks.Club community/site, accounts, member profiles, Slack access, events, courses/cohorts, submissions/contributions, acceptable use, account security, third-party destinations, intellectual property/licensing, availability/changes, disclaimers, liability, termination, governing law, operator/contact details, and an explicit last-updated date.

Privacy Policy

Cover the controller/contact, data categories, purpose and lawful basis, account/profile data, course/cohort and event registrations, learner work and certificates, GitHub-authored public content/people, Slack onboarding, Relay transactional email, necessary session/CSRF/security cookies, optional analytics, editable CloudFront country suggestion, logs/security data, subprocessors/regions/transfers, retention, consent withdrawal, access/export/correction/deletion/restriction/objection rights, complaint authority, minors policy, and an explicit last-updated date.

List only processors and data flows that current authoritative specs/code actually use. Do not mention AI Shipping Labs, Stripe, paid memberships, or direct website SES/Datamailer delivery. Relay is the website's transactional-email processor boundary; legacy Datamailer is migration/history/reconciliation-only.

Impressum

Publish the verified DataTalks.Club operator identity, address, authorized representative, contact, VAT/tax identifiers, and applicable German statutory/dispute-resolution wording. The owner/legal reviewer must confirm the exact public details; do not infer or silently copy an outdated contact from another product.

Legal copy must be versioned in source, readable HTML (not minified), escaped safely, and editable through the ordinary reviewed code/content workflow. It is not arbitrary database-authored HTML.

Analytics-consent contract

• Optional analytics fails closed. Before an affirmative choice, and after rejection/withdrawal, the browser loads no analytics script, contacts no analytics endpoint, sets no optional analytics/attribution cookie, and emits no analytics event.
• Necessary consent state is stored in a minimal secure cookie with an explicit version and documented lifetime; consent is not inferred from continued browsing.
• The accessible preferences dialog offers equally clear allow/deny choices, preserves the current choice, returns focus to the opener, traps/follows focus correctly, closes predictably, and supports reduced motion and 200% zoom/reflow.
• Withdrawal immediately prevents further optional events and expires every DTC-owned optional analytics/attribution cookie. Rejecting analytics never blocks content, signup, Slack, course, or event functionality.
• Analytics configuration is off by default, blank in CI/local/development, and managed through the existing typed Studio settings plus admin-only API parity. A missing/invalid measurement ID emits no loader.
• Development/previews never send production analytics. No email, profile value, country suggestion/header, raw IP, account/database ID, session/CSRF value, credential, Slack secret, or other PII is sent as an analytics field.
• Content Security Policy and privacy documentation agree with the disabled/enabled analytics states.

Footer design and accessibility

• Follow the existing DTC/CMP design system rather than introducing a separate visual language.
• Legal links and the preferences button have visible focus, sufficient contrast, semantic labels, and at least 44×44 CSS-pixel mobile targets without causing horizontal overflow at 320/390 px or 200% zoom.
• The existing GitHub footer icon remains a clearly labelled external link and must not be underlined in default, hover, focus, active, or visited states. Remove text decoration from the icon control itself without weakening its visible focus indicator or the styling of ordinary text links.
• External-link semantics, icon placement, wrapping, and footer alignment remain stable on desktop and mobile.

Studio/admin API boundary

If analytics configuration is introduced or changed, declare it in the existing typed settings registry and expose the same validation, permissions, audit redaction, defaults, and result through Studio and the admin-only API. Never return secrets or accept arbitrary executable analytics markup. Legal copy itself remains source-reviewed; Studio may link to its source/preview but does not become a second mutable policy store in this slice.

Acceptance criteria

• The global footer exposes the four requested legal controls on every public/main/course shell with no duplicate or divergent implementation.
• /terms, /privacy, and /impressum are public, readable, DTC-specific, self-canonical 200 pages; slash aliases redirect one hop and all internal links use canonical no-slash paths.
• DTC legal copy matches the actual architecture/data inventory and contains no stale AI Shipping Labs, Stripe, paid-membership, direct-SES, or new-Datamailer statements.
• Exact operator/contact/tax details and last-updated dates receive an explicit owner/legal HUMAN review before production acceptance.
• Analytics sends nothing and sets no optional cookie before opt-in or after reject/withdraw; preferences can be reopened from every footer and withdrawal clears optional DTC cookies.
• Analytics is disabled by default and in development/CI, invalid configuration fails closed, CSP remains correct, and no prohibited identifier/PII is emitted.
• Typed Studio/admin API settings parity, permission, validation, audit-redaction, and negative tests pass if analytics settings are in scope.
• The GitHub footer icon is never underlined, retains an accessible name and visible focus, and ordinary legal text links keep their expected link styling.
• Desktop/mobile keyboard, focus, 200% zoom/reflow, target-size, contrast, reduced-motion, and no-horizontal-overflow checks pass.
• Legal routes have tested sitemap/robots/canonical behavior and development stays noindex/nofollow.
• Templates remain human-readable and non-minified.

Verification

Add focused Django tests for public access, canonical/slash behavior, exact template use, DTC content canaries, forbidden copied-product canaries, footer coverage across both shells, sitemap/robots/canonical behavior, settings/API parity, and analytics fail-closed behavior.

Add Playwright coverage at approximately 1440×900 and 390×844 for:

1. each legal page and footer navigation;
2. keyboard-open/allow/reject/reopen/withdraw/focus-return consent behavior;
3. network/cookie proof that no optional analytics request or cookie exists before opt-in or after withdrawal;
4. public functionality with analytics rejected;
5. 200% zoom/reflow and mobile tap targets; and
6. the GitHub icon's computed text-decoration-line: none, focus visibility, accessible name, and no overflow.

Capture and inspect desktop/mobile screenshots below .tmp/screenshots/ only. Screenshots and artifacts contain no real identity, consent value, credential, or PII.

Run the repository's applicable uv/Make lint, format, Django, contract, accessibility, and core Playwright targets. The tester must record exact commands, results, candidate fingerprint, and screenshot paths.

Dependencies and sequencing

• This issue may implement the source routes/pages/footer and consent-disabled behavior without waiting for production legal or analytics enablement.
• Production analytics enablement and production legal acceptance require the explicit HUMAN review above.
• Relay wording follows Integrate Relay for transactional email and retire Datamailer #21/Reconcile normative email specifications to Relay ownership #124; do not implement or configure Relay here.
• Do not mutate AWS, DNS, analytics-provider, consent, sender, or production state as part of issue grooming.

Non-goals

• No marketing/newsletter consent changes.
• No analytics event taxonomy, CRM attribution, advertising, profiling, fingerprinting, cross-site tracking, or consent wall.
• No arbitrary script/tag-manager editor.
• No legal guarantee generated by engineering; the owner/legal reviewer accepts the final public wording.
• No production analytics property/configuration mutation during implementation tests.

Process handoff

Implement from current main in an isolated issue worktree. Follow _docs/PROCESS.md: engineer implements and tests without committing; a separate tester verifies functionality, responsive/accessibility behavior, network/cookie invariants, and screenshots; a product manager accepts the complete result; only then commit locally with Closes #N, merge without a pull request, deploy, and run exact-SHA on-call checks.

[alexeygrigorev]

Owner design direction — keep the footer quiet

Use a compact two-level footer rather than adding a large AI Shipping Labs-style four-column block:

1. Identity row — DataTalks.Club, the short community tagline, the un-underlined GitHub icon, and the application version. This is the visual anchor.
2. Legal utility row — Terms of Service · Privacy Policy · Analytics preferences · Impressum in subdued small text. These controls are important and easy to find, but do not compete with primary navigation or page content.

Responsive behavior:

• At wide widths, center the legal row beneath the identity row with restrained spacing and separators that are hidden from assistive technology.
• At narrow widths/200% zoom, wrap into two balanced rows or a single vertical list; never shrink text, truncate labels, or create horizontal scrolling.
• Preserve 44×44 mobile targets through padding around each control without making the footer visually tall; visual spacing and hit area need not be identical.
• Keep the existing border-top and muted surface. Do not add cards, heavy dividers, orange boxes, a second navigation sitemap, or policy excerpts.
• Analytics preferences should look like the neighboring legal links while remaining a semantic button.
• The GitHub icon is an icon control, so it has text-decoration: none in every pointer/visited state and uses a non-orange, design-system focus treatment only for keyboard focus.

The detailed legal pages carry the required information; the footer only provides stable, accessible access to it. This design note is part of the #125 acceptance handoff.

[alexeygrigorev]

QA Review — FAIL

I independently reviewed the exact uncommitted #125 candidate in .tmp/website-125-legal. I did not edit product code, commit, push, rebase, deploy, or change lifecycle state.

Frozen candidate

• HEAD and merge base: 8c0239254ab690918e6930c2368614dcfc709cf5.
• Candidate: 19 source/test/doc paths (9 tracked modifications and 10 untracked files).
• Tracked binary diff SHA-256: 2fe436449478b919cf347704f4edf7fc053f9a9feb5ccbbee66c14bef8cb4a76.
• Full path/content manifest SHA-256: df3af8e9b5c6112bfa8200ee6b804249de81426c236f2fbda1ffa402d004b3d4.
• git diff --check: pass.

Focused results

• DTC_TEST_RUN_ID=issue-125-independent-legal DJANGO_SETTINGS_MODULE=website.settings.test uv run --frozen python manage.py test content.tests.test_legal_pages --verbosity 2: 11 passed.
• DTC_TEST_RUN_ID=issue-125-independent-browser DJANGO_SETTINGS_MODULE=website.settings.test DJANGO_ALLOW_ASYNC_UNSAFE=true uv run --frozen pytest playwright_tests/test_legal_footer_125.py -v: 15 passed, 1 failed.
• I reused the engineer's green 87-test focused closure and non-browser lint/format/type/migration/Django/SEO/link evidence because this review found no unrelated delta and the process says not to rerun unaffected broad gates.
• The documented make run was attempted and correctly failed because port 8000 belongs to unrelated PID 3272813; I did not terminate it. I ran the same uv/Django server on 127.0.0.1:8125 against .tmp/issue-125-independent-server.sqlite3 and stopped it cleanly.

User-reported GitHub-icon behavior

The implementation behavior is correct in an independent browser audit over desktop 1440×900 and mobile 390×844, in light and dark mode:

• computed text-decoration-line is none in default, hover, mouse-active, real keyboard-focus, and CDP-forced :visited states in all four combinations;
• the exact :visited selector is present in the matched browser rule, not inferred from source text alone;
• real Tab traversal reaches the link and produces a solid 3px focus outline in the light/dark link token (rgb(49, 95, 143) / rgb(139, 183, 223)), never the prohibited orange;
• the accessible name is exactly Website source on GitHub (opens in a new tab), the target is 44×44 CSS px, and horizontal overflow is 0;
• ordinary legal links remain underlined in default, hover, and keyboard-focus states.

Blocking failure

test_github_icon_is_never_underlined_and_keeps_keyboard_focus calls github.hover() and then github.focus(). Chromium correctly treats that programmatic focus after pointer modality as not :focus-visible, so computed outlineStyle is none and the committed candidate test fails at:

assert outline != "none"
AssertionError: assert 'none' != 'none'

Expected: the browser test must reach the GitHub link through actual keyboard traversal (or otherwise deterministically establish keyboard modality) before asserting the :focus-visible outline. It should also exercise a real/forced visited state rather than covering :visited only with a source-string assertion. A required test command failure is a QA failure even though the independently exercised user behavior passes.

Inspected evidence

Fresh candidate evidence is under:

• .tmp/screenshots/issue-125/: 16 legal/consent/reflow/no-JS screenshots;
• .tmp/screenshots/issue-125-independent-footer/: eight independent full-page/viewport focus captures plus five contact sheets.

I opened the contact sheets presenting every primary screenshot. Terms, Privacy, Impressum, consent states, 320px/reduced-motion, no-JS, desktop/mobile, light/dark, and focused footer states render the expected pages without 404/debug/broken layout, clipping, or overflow. The keyboard focus ring is visibly present around the GitHub icon in all four focused viewport captures.

Verdict

FAIL — return only the faulty focused Playwright assertion to engineering, then rerun the exact #125 browser file. The [HUMAN] owner/legal verification of operator/contact/tax/statutory wording remains separately pending and is not evaluated by this technical failure.

[alexeygrigorev]

Software Engineer Remediation Report — keyboard focus test fixed

I remediated only the QA failure reported in #125 (comment). No product CSS, template, view, route, legal copy, or analytics behavior changed.

Change

• Updated playwright_tests/test_legal_footer_125.py::test_github_icon_is_never_underlined_and_keeps_keyboard_focus.
• Removed the invalid github.focus() transition after pointer hover.
• The test now starts from a deterministic document-body focus point, reaches the GitHub footer link exclusively through real page.keyboard.press("Tab") traversal, fails explicitly if the control is not keyboard-reachable, and verifies both DOM focus and :focus-visible before checking the existing outline/color contract.
• All existing default, hover, keyboard-focus, active, accessible-name, external-link, and non-orange focus assertions remain in place.

Verification

• DTC_TEST_RUN_ID=issue-125-engineer-remediation DJANGO_SETTINGS_MODULE=website.settings.test DJANGO_ALLOW_ASYNC_UNSAFE=true uv run --frozen pytest playwright_tests/test_legal_footer_125.py -v — 16 passed in 52.47s.
• uv run --frozen ruff check playwright_tests/test_legal_footer_125.py — pass.
• uv run --frozen ruff format --check playwright_tests/test_legal_footer_125.py — pass; one file already formatted.
• make lint — pass.
• make format-check — pass; 435 files already formatted.
• git diff --check — pass.

Per the process rule for a returned focused failure, I reused the unaffected green Django/type/migration/SEO/link evidence already recorded for this candidate; this remediation cannot affect those contracts.

Exact uncommitted candidate fingerprint

• HEAD/merge base: 8c0239254ab690918e6930c2368614dcfc709cf5.
• Candidate paths: 19 total — 9 tracked modifications and 10 untracked files.
• Tracked binary diff SHA-256: 2fe436449478b919cf347704f4edf7fc053f9a9feb5ccbbee66c14bef8cb4a76 (unchanged from QA).
• Full sorted path/content manifest SHA-256: 69832c6c1dc7db0bad21c8539a08783cd2a7d20a6405660ad482c92c5c9ca336.
• Remediated test file SHA-256: 706997d8799c6dee9ca87284527fbff0a6aef81881532c05723d32c13b1720be.

The full manifest is reproducible with the sorted candidate path list from git status --porcelain=v1 -uall, each path hashed by sha256sum, followed by one SHA-256 over that ordered manifest.

Handoff

Ready for a separate tester to rerun the exact #125 browser file against this fingerprint. The owner/legal HUMAN review of operator/contact/tax/statutory wording remains pending and was not changed or evaluated. I did not commit, push, rebase, deploy, mutate labels, or alter lifecycle state.

[alexeygrigorev]

QA Retest — PASS

I independently retested the exact remediated #125 candidate after the prior focused browser failure. I made no product, index, branch, stash, commit, push, rebase, deployment, label, or lifecycle change.

Frozen candidate

• HEAD and merge base: 8c0239254ab690918e6930c2368614dcfc709cf5.
• Candidate: 19 paths = 9 modified tracked + 10 untracked; index empty.
• Tracked binary diff SHA-256: 2fe436449478b919cf347704f4edf7fc053f9a9feb5ccbbee66c14bef8cb4a76.
• Full sorted path/content manifest SHA-256: 69832c6c1dc7db0bad21c8539a08783cd2a7d20a6405660ad482c92c5c9ca336.
• Remediated browser file SHA-256: 706997d8799c6dee9ca87284527fbff0a6aef81881532c05723d32c13b1720be.
• git diff --check: passed. The freeze and all hashes were identical before and after retest.

Exact candidate paths:

 M _docs/adoption/course-platform/integration-patched-files.tsv
 M _docs/adoption/course-platform/integration-patches.md
 M content/public_urls.py
 M content/public_views.py
 M core/accessibility_registry.py
 M core/static/core/site.css
 M core/static/core/site_shell.css
 M course_platform_templates/base.html
 M templates/base.html
?? _docs/legal/data-flow-inventory.md
?? content/legal_views.py
?? content/tests/test_legal_pages.py
?? core/static/core/analytics_preferences.js
?? playwright_tests/test_legal_footer_125.py
?? templates/core/_site_footer.html
?? templates/public/legal/base.html
?? templates/public/legal/impressum.html
?? templates/public/legal/privacy.html
?? templates/public/legal/terms.html

The tracked product diff hash is unchanged from the prior QA freeze. The only remediation delta is the untracked Playwright file identified above; product CSS, templates, views, routes, content, and consent behavior are unchanged.

Focused rerun

DTC_TEST_RUN_ID=issue-125-independent-remediation \
DJANGO_SETTINGS_MODULE=website.settings.test \
DJANGO_ALLOW_ASYNC_UNSAFE=true \
uv run --frozen pytest playwright_tests/test_legal_footer_125.py -v

Result: 16 passed in 69.15s. The previously failing GitHub-icon test now establishes focus at the document body, reaches the link exclusively with real Tab presses, verifies document.activeElement, requires :focus-visible, and then checks the visible non-orange outline. It no longer uses programmatic link focus after pointer hover.

I also ran a tester-only four-case computed-state audit at desktop 1440×900 and mobile 390×844 in light and dark modes: 4 passed in 34.97s. In every combination it proved:

• GitHub text-decoration-line: none at default, hover, real pointer-active, CDP-forced :visited, and real keyboard-focus states;
• the matched browser rule includes the exact .site-footer-github:visited selector;
• actual Tab traversal reaches the link, DOM focus is exact, and :focus-visible is true;
• focus is a visible solid 3px outline: light rgb(49, 95, 143), dark rgb(139, 183, 223), never orange rgb(255, 191, 71);
• GitHub target is exactly 44×44 CSS px;
• the ordinary Terms of Service link remains underlined at default, hover, and keyboard focus and has at least a 44px target in both axes;
• horizontal overflow is 0 in all four cases.

The first tester-only audit draft accidentally completed a pointer click on the external GitHub control and was correctly rejected by the offline browser boundary. I changed only that ignored .tmp/ harness to cancel navigation and reran it cleanly; no candidate file changed.

Reused unaffected evidence

Per the process rule for a test-only remediation, I reused the prior independent 11-pass focused Django result and the already recorded green focused closure plus lint, format, type, migration, Django, SEO, and link evidence from the unchanged product candidate. The remediation report independently reran the exact browser file plus lint/format checks, and my freeze proves no product delta entered between those runs and this retest.

Fresh visual inspection

The exact browser rerun refreshed all 16 issue screenshots under .tmp/screenshots/issue-125/: Terms, Privacy, and Impressum at desktop/mobile × light/dark; consent undecided/reopened; 320px reduced-motion/200%-reflow; and mobile no-JavaScript.

I additionally captured four real-keyboard-focus views under .tmp/screenshots/issue-125-independent-remediation/ for desktop/mobile × light/dark. I opened contact sheets containing every fresh primary screenshot and all four focus captures. They show the expected legal pages and compact footer, readable consent states, clean mobile wrapping, and visible blue GitHub focus rings; none is a 404, debug/error page, clipped layout, or horizontal-overflow state.

Criterion disposition

• The prior product, route, legal-copy, consent, fail-closed analytics, shared-footer, SEO, no-JavaScript, responsive, and template evidence remains valid because product bytes did not change.
• The returned automated focus failure is fixed and the exact browser file is green.
• The GitHub no-underline, visited, real keyboard focus, non-orange focus, target-size, ordinary-link underline, mobile/dark, and overflow contracts all pass fresh computed-state and visual verification.
• The explicit [HUMAN] owner/legal review of operator/contact/tax/statutory wording remains pending and separate; this technical retest does not claim or replace it.

Verdict: PASS — the remediated technical candidate is ready for Product Manager review, with the named HUMAN legal gate still outstanding before production acceptance.