DataTalksClub / DataTalksClub/website
Fix undersized Random topic target in the homepage graph toolbar
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Product outcome
Restore the homepage graph toolbar to the accepted design-5a 44 CSS px target-height contract on current main. Every visible graph-toolbar button/link—including Random topic—must remain contained, keyboard-visible, and at least 2.75rem tall without changing graph behavior, copy, or layout semantics.
Normative authority
_docs/PROCESS.md: versioned verification, independent tester/screenshots, PM acceptance, focused commits, and exact-SHA on-call evidence._docs/design/design-5a.md#accessibility-guarantees: visible interactive targets retain the 2.75rem/44 px component floor._docs/accessibility/README.md: deterministic target-size, keyboard/focus, zoom/reflow, reduced-motion, and JavaScript-off checks._docs/specs/10-verification-strategy.md: responsive browser, accessibility, screenshot, and release-critical verification.- Accepted homepage baseline #179. Approved current headings are Events and Community knowledgebase.
Fresh exact-main evidence
Current main is face8e4808d65afbf0374d1ced7a88079950d663. Fresh rendered diagnosis still reproduces the same defect at 1440, 390, and 320 CSS px: visible button.home-graph-tool[data-home-graph-random] measures approximately 117.59 × 33.94 CSS px. Width is not the failure; the 33.94 px block-size is below the 44 px design floor.
The old 9a491cd isolated/combined candidates and their partial or timed-out reports are invalidated historical evidence. Engineering must start from current main and produce a fresh fingerprint and versioned plan.
Scope
- Correct only the homepage graph toolbar's page-specific control geometry so every visible button/link in
.home-graph-toolbaris at least 44 CSS px tall. - Preserve responsive wrapping, gaps, alignment, containment, visible focus, hover/active behavior, and light/dark appearance at 1440, 390, and 320 CSS px.
- Preserve exact source order, labels, elements, destinations, and behavior for reserved Back, Random topic, Open wiki page →, and full graph →.
- Preserve Random navigation, Back history, current-hub open link/hidden-reserved state, full-graph destination, polite status, stable graph frame, focus restoration, reduced motion, and no-JavaScript fallback.
- Add focused server-rendered order/markup coverage and a rendered initial/navigated geometry regression that reports the failing selector, name, width, height, and state.
Expected #236-owned paths are exactly:
templates/core/home.htmlfor page-specific graph-toolbar styles;core/tests/test_homepage.pyfor toolbar order/markup preservation;playwright_tests/test_homepage_graph.pyfor initial/navigated rendered geometry and screenshots.
Non-goals
- No member-story/carousel CSS, content, or regression work; #232 owns test-only preservation of the externally corrected carousel.
- No heading change: Events and Community knowledgebase remain exact approved product copy.
- No graph relabeling/reordering/removal, data/layout algorithm, endpoint/schema, JavaScript navigation, route, projection, or shared wiki-graph change.
- No shared/global button primitive, typography, target scanner, axe rule/exception, page-wide clipping, fixed document width, pseudo-element hit-area trick, transform-only enlargement, reduced spacing, or assertion/tolerance weakening.
- No dependency, model, migration, view/context, SEO/cache, navigation/account/Studio change.
Dependencies and release order
#236 has no implementation dependency and is engineer-ready from current main. #232's stale browser expectations must be corrected in the combined acceptance fingerprint so the full suite can reach a terminal green result; they are not #236 scope.
- Freeze #232's current-main test-only candidate and #236's three-path candidate independently.
- Construct one uncommitted integration candidate with #232 changes first, then #236. Record and validate both issue fingerprints without copying obsolete
9a491cdproduct hunks. - A separate tester runs the fresh combined plan/full suite once but posts distinct reports and screenshot evidence for each issue.
- PM accepts separately. Commit
Closes #232first, thenCloses #236; merge/push the accepted combined state once. - On-call observes only the resulting exact release SHA. Prior partial runs and the cancelled face8e4 CI run are not pass evidence.
Acceptance criteria
Rendered product contract
- On
/and non-redirecting/unified/, at 1440, 390, and 320 CSS px, every visible interactive descendant of.home-graph-toolbarhasgetBoundingClientRect().height + 0.5 >= 44. - The rule holds initially for Random topic, Open wiki page →, and full graph →, and after Random/topic navigation when Back becomes visible. Genuinely hidden/reserved and non-interactive controls are excluded only while hidden.
- The approximately 117.59 × 33.94 Random control observed on
face8e4becomes at least 44 px tall; focused failure messages identify control, state, width, and height. - Controls remain inside the toolbar, graph frame, and viewport without overlap, clipping, obscured focus, or horizontal document overflow at all widths, light/dark, and 200% reflow.
- Labels, markup order, roles, focus order, destinations, hidden/reserved semantics, graph status, and stable toolbar/frame behavior remain unchanged.
- Random, Back, Open, and full-graph behavior remain correct; graph data/navigation, focus restoration, reduced motion, and no-JavaScript fallback do not regress.
- Existing generic target-size, axe, overflow, and accessibility-tree checks remain unchanged and return no issue.
Verification and screenshots
- Focused Django markup/order tests and focused Playwright initial/navigated geometry tests pass at 1440/390/320 and would fail against unmodified
face8e4. - Quality, focused tests, graph-selected Django/Playwright checks, container checks, and terminal full Playwright pass via
uv/Make with a valid current-main versioned plan/report and no required skip. - An independent tester captures and inspects graph-toolbar evidence at 1440x900, 390x844, and 320x844 in initial and navigated states, including light/dark, keyboard focus, reflow, and reduced motion; every image is readable and not an error/debug page.
- PM accepts the exact frozen three-path candidate after tester PASS.
- [ON-CALL] After the ordered accepted commits are merged/pushed, the exact release SHA has successful Playwright, screenshots, CI gate, publish/deploy eligibility, and deployment observation. Cancellation or any red/skipped required gate remains unresolved.
Browser scenarios
- Initial state at 1440/390/320: measure all visible toolbar targets, containment, order, labels, focus, and document width.
- Activate Random/topic navigation: verify Back appears, all visible targets retain the 44 px floor, Open tracks the current hub, status updates, and layout remains stable.
- Use Back, Open, and full graph by keyboard; verify destinations/history/focus and no overlap or clipped focus.
- Repeat responsive evidence in dark mode, reduced motion, and 200% reflow; verify the established no-JavaScript fallback is unchanged.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at templates/core/home.html, then read the toolbar order assertions in core/tests/test_homepage.py and the rendered scenarios in playwright_tests/test_homepage_graph.py. Run the focused Django and Playwright checks against current main; done means the named toolbar targets meet the 44 CSS px floor across the listed widths and initial/navigated states without changing markup, behavior, or layout semantics.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- django, playwright, python
- Domain
- accessibility, frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100