DataTalksClub / DataTalksClub/website

Fix undersized Random topic target in the homepage graph toolbar

Open
#236 14 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

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

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

  1. Correct only the homepage graph toolbar's page-specific control geometry so every visible button/link in .home-graph-toolbar is at least 44 CSS px tall.
  2. Preserve responsive wrapping, gaps, alignment, containment, visible focus, hover/active behavior, and light/dark appearance at 1440, 390, and 320 CSS px.
  3. Preserve exact source order, labels, elements, destinations, and behavior for reserved Back, Random topic, Open wiki page →, and full graph →.
  4. 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.
  5. 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.html for page-specific graph-toolbar styles;
  • core/tests/test_homepage.py for toolbar order/markup preservation;
  • playwright_tests/test_homepage_graph.py for 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.

  1. Freeze #232's current-main test-only candidate and #236's three-path candidate independently.
  2. Construct one uncommitted integration candidate with #232 changes first, then #236. Record and validate both issue fingerprints without copying obsolete 9a491cd product hunks.
  3. A separate tester runs the fresh combined plan/full suite once but posts distinct reports and screenshot evidence for each issue.
  4. PM accepts separately. Commit Closes #232 first, then Closes #236; merge/push the accepted combined state once.
  5. 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-toolbar has getBoundingClientRect().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 face8e4 becomes 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

  1. Initial state at 1440/390/320: measure all visible toolbar targets, containment, order, labels, focus, and document width.
  2. 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.
  3. Use Back, Open, and full graph by keyboard; verify destinations/history/focus and no overlap or clipped focus.
  4. 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

  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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.