DataTalksClub / DataTalksClub/website

Fix homepage testimonial overflow and restore the release gate

Open
#232 19 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility bug frontend P0 testing
Dominant language
Python
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Product outcome

Lock the externally corrected homepage testimonial containment into a focused rendered regression and reconcile stale browser expectations to the approved homepage headings. The visitor-facing carousel is already contained on current main; this issue no longer owns a CSS or template fix.

Normative authority

Current-main disposition and evidence

The original regression is exact and retained as the negative fixture: at 9a491cd9baeb1e723bd05e8dacb20978fbaf9d33, run 33236915907 measured document widths 2277/1440, 1628/390, and 1449/320, originating in the member-story carousel.

Current main is face8e4808d65afbf0374d1ced7a88079950d663. Its ancestor aff48ea32f908c1f6a9e9c6d23ae2e84f76a3672 added position: relative to .stories-scroller as part of an external homepage-design commit. Fresh exact-main diagnosis no longer reproduces document overflow at 1440, 390, or 320 CSS px with JavaScript enabled or disabled, and the carousel still has genuine internal horizontal overflow/scroll reachability.

That external commit is accepted current-main input, not a #232 lifecycle delivery: it was not the frozen #232 candidate, has no #232 independent tester/PM acceptance, and has no successful exact-release on-call/deployment evidence. The current behavior must be pinned by #232 tests and independently verified; do not duplicate or replace the working CSS.

Current browser tests still contain four stale heading expectations: Something to attend this week/The wiki, as a graph in playwright_tests/test_foundation_smoke.py, and two Something to attend this week expectations in playwright_tests/test_accessibility.py. The rendered product is correct: Events and Community knowledgebase.

Scope

  1. Add focused rendered Playwright coverage for the member-story carousel on / and /unified/ at 1440, 390, and 320 CSS px, with JavaScript on and off.
  2. Prove intrinsic document/shell/card containment while preserving real internal carousel scrolling, all six stories, desktop three-card density, narrow next-card peek, text wrapping, native no-JavaScript reachability, keyboard focus, controls, dark mode, and reduced motion.
  3. Include deterministic long quote/name/context and missing-photo fallback coverage without using personal or production data.
  4. Reconcile only the four stale browser expectations to exact visible headings Events and Community knowledgebase, preserving role, exact matching, visibility, and accessibility-tree coverage.
  5. Run the versioned verification plan and independent browser/screenshot gate on a current-main integration candidate with #236 as ordered below.

Expected #232-owned paths are test-only:

  • playwright_tests/test_home_events_design_parity.py for the focused carousel regression;
  • playwright_tests/test_foundation_smoke.py and playwright_tests/test_accessibility.py for the approved heading expectations.

Any product/template/CSS change requires a new reproduction and PM re-disposition before engineering continues.

Non-goals

  • No edit to templates/core/_design_system.html, templates/core/home.html, carousel JavaScript, content, portraits, links, headings, or homepage design.
  • No contain, width, max-width, min-width, overflow clipping/hiding, fixed document width, or alternate CSS workaround.
  • No testimonial editorial/privacy change, carousel library, dependency, model, migration, view/context, projection, route, SEO, cache, navigation, account, or Studio change.
  • No weakening/deleting/xfailing of generic overflow, accessibility, screenshot, or target-size checks.
  • No #236 graph-toolbar geometry implementation in #232.

Dependencies and release order

#232 has no implementation dependency. #236 is an independent still-reproducing graph target-size bug, but a terminal full-browser acceptance run must include both fixes because unchanged current main is red for the stale #232 headings and #236 geometry.

  1. Build/freeze #232's test-only candidate from current main; independently build/freeze #236's bounded candidate.
  2. Construct one fresh uncommitted integration candidate with #232 test-only changes first and #236 product/tests second. Record both source fingerprints and issue attribution.
  3. A separate tester recomputes the plan, runs the shared full gates once, captures distinct issue screenshots, and posts separate reports to #232 and #236.
  4. PM accepts each issue separately. Commit accepted #232 test-only changes with Closes #232, then accepted #236 changes with Closes #236; push the combined state once.
  5. On-call alone observes the resulting exact release SHA. Old 9a491cd candidates, partial/timed-out runs, and the cancelled face8e4 run are diagnostics, not reusable pass evidence.

Acceptance criteria

Test-only delivery
  • The only #232 source changes are the three expected Playwright test files; current face8e4 template/CSS/JavaScript/product bytes remain unchanged.
  • The four stale heading assertions require exact visible Events and Community knowledgebase headings with their existing semantic roles; no visitor copy changes.
  • At 1440, 390, and 320 CSS px on both / and /unified/, JavaScript on and off, document.documentElement.scrollWidth <= window.innerWidth + 1.
  • #stories-scroller remains within its .shell, has scrollWidth > clientWidth, and every story card/quote/person/identity wraps within its own card rather than widening the document.
  • All six stories remain present once and in order. Desktop shows three cards within the scroller; 390/320 show one readable card and the intended next-card peek.
  • Keyboard focus/native scrolling reaches the last story with JavaScript disabled. With JavaScript enabled, story controls move only the story scroller, catalogue controls remain isolated, and reduced motion uses non-smooth movement without losing reachability.
  • A deterministic long-copy/missing-photo fixture remains contained at 320 px and uses no protected or production data.
  • The focused regression demonstrably fails against the original 9a491cd geometry and passes against the frozen current-main candidate.
Lifecycle evidence
  • Focused tests, the graph-selected Django/Playwright suite, quality checks, container checks, and a terminal full Playwright run pass through uv/Make targets with a valid versioned plan/report and no required skip.
  • An independent tester inspects full-page / and /unified/ evidence at 1440x900, 390x844, and 320x844, including JavaScript-off and dark/reduced-motion states, and confirms readable content, contained document, internally scrollable stories, correct headings, and no error/debug page.
  • PM accepts the exact frozen test-only candidate after tester PASS.
  • [ON-CALL] After both ordered commits are merged/pushed, the exact release SHA has successful Playwright, screenshots, CI gate, publish/deploy eligibility, and deployment observation. Cancellation, skipped deployment, or unrelated red is unresolved, not green.

Browser scenarios

  1. Desktop 1440x900: verify three visible cards, internal scroll to all six, controls/focus, exact headings, light/dark, and no document overflow.
  2. Mobile 390x844 and reflow 320x844: verify one card plus peek, wrapped long/fallback content, all-story reachability, visible focus, and no document overflow.
  3. JavaScript disabled: verify / and /unified/ preserve all story content/links and native horizontal scrolling.
  4. Reduced motion and JavaScript enabled: verify controls are bounded to the intended scroller and do not animate smoothly.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read _docs/PROCESS.md, _docs/specs/10-verification-strategy.md, and _docs/accessibility/README.md, then inspect playwright_tests/test_home_events_design_parity.py, playwright_tests/test_foundation_smoke.py, and playwright_tests/test_accessibility.py. Run the focused browser coverage against current main and the original geometry fixture. Done means only the three named test files change, stale headings are reconciled, and the specified responsive, accessibility, JavaScript-off, and release gates pass.

Written by the indexing model from the issue text.

Assessment

Tech stack
playwright, python
Domain
accessibility, ci-cd, frontend, testing-qa
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.