Skip to content

fix(ui): simplify area breadcrumb — drop compact tooltip and detail header#1282

Merged
steilerDev merged 2 commits into
betafrom
fix/1278-breadcrumb-trim-tooltip-and-detail
Apr 18, 2026
Merged

fix(ui): simplify area breadcrumb — drop compact tooltip and detail header#1282
steilerDev merged 2 commits into
betafrom
fix/1278-breadcrumb-trim-tooltip-and-detail

Conversation

@steilerDev
Copy link
Copy Markdown
Owner

Summary

  • Compact AreaBreadcrumb variant is now a plain <span> with no Tooltip wrapper or tabIndex, removing the hover tooltip from the compact breadcrumb display
  • Removed the area breadcrumb block from WorkItemDetailPage and HouseholdItemDetailPage headers per user feedback; associated CSS, unit tests, and E2E scenarios updated accordingly

Fixes #1278

Test plan

  • Unit tests updated — deleted HouseholdItemDetailPage.breadcrumb.test.tsx, updated 4 other test files
  • E2E breadcrumb specs inverted — scenarios now verify breadcrumb is absent from detail page headers
  • Pre-commit hook quality gates pass

Co-Authored-By: Claude dev-team-lead (Sonnet 4.6) noreply@anthropic.com
Co-Authored-By: Claude frontend-developer (Haiku 4.5) noreply@anthropic.com
Co-Authored-By: Claude qa-integration-tester (Haiku 4.5) noreply@anthropic.com
Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) noreply@anthropic.com

…eader

- Compact variant is now a plain <span> with no Tooltip wrapper or tabIndex, removing the hover tooltip on the compact breadcrumb display
- Removed the area breadcrumb block from WorkItemDetailPage and HouseholdItemDetailPage headers per user feedback

Fixes #1278

Co-Authored-By: Claude dev-team-lead (Sonnet 4.6) <noreply@anthropic.com>
Co-Authored-By: Claude frontend-developer (Haiku 4.5) <noreply@anthropic.com>
Co-Authored-By: Claude qa-integration-tester (Haiku 4.5) <noreply@anthropic.com>
Co-Authored-By: Claude e2e-test-engineer (Sonnet 4.5) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

Thank you for your submission! We require all contributors to sign our Contributor License Agreement before we can accept your contribution.

To sign, please comment on this PR with:
I have read the CLA Document and I hereby sign the CLA


I have read the CLA Document and I hereby sign the CLA


Frank Steiler seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot.

…tooltip

The initial fix round for #1278 missed this file — the test still
asserted role="tooltip" existence which no longer applies after the
Tooltip wrapper was removed from the compact variant.

Refs #1278

Co-Authored-By: Claude qa-integration-tester (Haiku 4.5) <noreply@anthropic.com>
Copy link
Copy Markdown
Owner Author

@steilerDev steilerDev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[product-owner]

LGTM — all four acceptance criteria from #1278 are met. (Posting as comment because GitHub blocks self-approval on this PR; verdict is functionally approve.)

AC verification

  1. Compact variant has no tooltip, no tabIndex — PASS. client/src/components/AreaBreadcrumb/AreaBreadcrumb.tsx now renders the compact branch as a plain <span className={styles.compact}> with no Tooltip wrapper, no tabIndex, and no focus/hover handlers. Tooltip import is gone. AreaBreadcrumb.module.css drops the .compact:focus-visible shadow and cursor: default.
  2. Detail pages no longer render breadcrumb in header — PASS. WorkItemDetailPage.tsx and HouseholdItemDetailPage.tsx remove the .titleBreadcrumb <div> and the AreaBreadcrumb usage/import. Both module CSS files drop the .titleBreadcrumb rule.
  3. List / picker / Gantt sidebar breadcrumbs continue to render (minus tooltip) — PASS. No changes to list-row, picker, or Gantt sidebar usages; the compact span still renders the full path text (now plain). Unit tests in HouseholdItemPicker.breadcrumb.test.tsx and HouseholdItemsPage.breadcrumb.test.tsx updated to assert a single plain span with class*="compact" and no role="tooltip".
  4. Default variant unchanged — PASS. <nav aria-label>/<ol>/<li class*="segment">/<li class*="separator"> render path is untouched; default-variant CSS classes are untouched.

Test alignment

  • Unit test authorship on the test file deletions/updates is correct (qa-integration-tester per co-author trailers on the PR body).
  • E2E specs (work-item-breadcrumb.spec.ts, household-item-breadcrumb.spec.ts) Scenarios 2, 3, and 5 correctly inverted: Scenario 2 asserts areaBreadcrumbNav NOT visible, Scenario 3 asserts span exists with no tabindex=0 and no role="tooltip", Scenario 5 asserts no nav in detail header. Page objects on WorkItemDetailPage.ts / HouseholdItemDetailPage.ts keep areaBreadcrumbNav for negative assertions and drop the areaBreadcrumb combined locator. WorkItemsPage.ts selector updated from [tabIndex="0"][class*="compact"] to [class*="compact"].
  • 530-line HouseholdItemDetailPage.breadcrumb.test.tsx cleanly deleted (no longer relevant); WorkItemDetailPage area breadcrumb below title describe block (84 lines) removed from WorkItemDetailPage.test.tsx.

CI status

Quality Gates (the required gate for beta PRs) passed. Four E2E shards (2, 4, 8, 13) failed on unrelated flakes: budget-source-move action-bar locator.uncheck timeout, an invoiceResp.ok() === false API setup failure in the HouseholdItemPicker Scenario 6 test (invoice POST, not breadcrumb rendering), and an i18n "Sanitär" visibility timeout. None of these failures touch the AreaBreadcrumb code path.

Scope discipline

Changes stay inside the two surfaces called out in #1278: AreaBreadcrumb compact variant + the two detail page headers. No drive-by changes elsewhere.

Copy link
Copy Markdown
Owner Author

@steilerDev steilerDev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[product-architect]

LGTM — clean, well-scoped UI simplification. No architectural concerns. (Posting as comment rather than approve because GitHub blocks self-approval; intent is approve.)

Verified

  • Strict TS / no any: AreaBreadcrumb.tsx remains strictly typed; no new any introduced. The any usages in the deleted breadcrumb test file disappear with the file.
  • ESM .js imports: Preserved. Removed the Tooltip.js import in AreaBreadcrumb.tsx and the AreaBreadcrumb/index.js import in WorkItemDetailPage.tsx cleanly.
  • Token-only CSS: AreaBreadcrumb.module.css and both detail-page CSS modules still use design tokens exclusively. The deleted .compact:focus-visible rule (previously using --shadow-focus) and the .titleBreadcrumb margin (previously using --spacing-2) are both removed without leaving hardcoded values behind.
  • Shared-component reuse: AreaBreadcrumb is still imported by 16 non-test consumers — list pages, pickers (Work Item, Household Item), Milestone detail, Gantt sidebar, Work Item create page. The compact variant remains the canonical reusable pattern for inline area display. Only the two detail-page headers drop it.
  • Detail page symmetry: WorkItemDetailPage and HouseholdItemDetailPage both remove the breadcrumb block and .titleBreadcrumb CSS class consistently. No dead CSS left behind.
  • Compact variant semantics: Rendering simplifies to <span className={styles.compact}>{fullPath}</span>. No Tooltip wrapper, no tabIndex={0}. Non-interactive text — appropriate since the breadcrumb is informational, not an interaction target.
  • Test coverage: Unit tests (AreaBreadcrumb.test.tsx, HouseholdItemPicker.breadcrumb.test.tsx, HouseholdItemsPage.breadcrumb.test.tsx) updated to assert the new shape (no role=\"tooltip\", no tabIndex=\"0\"). E2E specs inverted to negative assertions for Scenarios 2 and 5; Scenario 3 now verifies absence of tooltip/focusable span. HouseholdItemDetailPage.breadcrumb.test.tsx (530 lines) correctly deleted since it tested removed UI.
  • POM hygiene: WorkItemDetailPage.ts and HouseholdItemDetailPage.ts retain areaBreadcrumbNav for negative assertions only and drop the obsolete areaBreadcrumb composite locator. WorkItemsPage.ts compact breadcrumb selector correctly dropped the [tabIndex=\"0\"] attribute requirement.

Minor observation (informational, no action needed)

  • WorkItemsPage.ts getAreaBreadcrumbForItem helper removed the now-unused tableVisible local variable but kept the same return shape — callers unaffected.

No schema, API contract, or ADR impact. Wiki does not need updates for this change.

@steilerDev steilerDev merged commit d50eb21 into beta Apr 18, 2026
28 of 34 checks passed
@steilerDev steilerDev deleted the fix/1278-breadcrumb-trim-tooltip-and-detail branch April 18, 2026 10:05
@github-actions github-actions Bot locked and limited conversation to collaborators Apr 18, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant