fix(ui): simplify area breadcrumb — drop compact tooltip and detail header#1282
Conversation
…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>
|
Thank you for your submission! We require all contributors to sign our Contributor License Agreement before we can accept your contribution. 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. |
steilerDev
left a comment
There was a problem hiding this comment.
[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
- Compact variant has no tooltip, no tabIndex — PASS.
client/src/components/AreaBreadcrumb/AreaBreadcrumb.tsxnow renders the compact branch as a plain<span className={styles.compact}>with noTooltipwrapper, notabIndex, and no focus/hover handlers.Tooltipimport is gone.AreaBreadcrumb.module.cssdrops the.compact:focus-visibleshadow andcursor: default. - Detail pages no longer render breadcrumb in header — PASS.
WorkItemDetailPage.tsxandHouseholdItemDetailPage.tsxremove the.titleBreadcrumb<div>and theAreaBreadcrumbusage/import. Both module CSS files drop the.titleBreadcrumbrule. - 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.tsxandHouseholdItemsPage.breadcrumb.test.tsxupdated to assert a single plain span withclass*="compact"and norole="tooltip". - 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-testerper 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 assertsareaBreadcrumbNavNOT visible, Scenario 3 asserts span exists with notabindex=0and norole="tooltip", Scenario 5 asserts no nav in detail header. Page objects onWorkItemDetailPage.ts/HouseholdItemDetailPage.tskeepareaBreadcrumbNavfor negative assertions and drop theareaBreadcrumbcombined locator.WorkItemsPage.tsselector updated from[tabIndex="0"][class*="compact"]to[class*="compact"]. - 530-line
HouseholdItemDetailPage.breadcrumb.test.tsxcleanly deleted (no longer relevant); WorkItemDetailPagearea breadcrumb below titledescribe block (84 lines) removed fromWorkItemDetailPage.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.
steilerDev
left a comment
There was a problem hiding this comment.
[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.tsxremains strictly typed; no newanyintroduced. Theanyusages in the deleted breadcrumb test file disappear with the file. - ESM
.jsimports: Preserved. Removed theTooltip.jsimport inAreaBreadcrumb.tsxand theAreaBreadcrumb/index.jsimport inWorkItemDetailPage.tsxcleanly. - Token-only CSS:
AreaBreadcrumb.module.cssand both detail-page CSS modules still use design tokens exclusively. The deleted.compact:focus-visiblerule (previously using--shadow-focus) and the.titleBreadcrumbmargin (previously using--spacing-2) are both removed without leaving hardcoded values behind. - Shared-component reuse:
AreaBreadcrumbis 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:
WorkItemDetailPageandHouseholdItemDetailPageboth remove the breadcrumb block and.titleBreadcrumbCSS class consistently. No dead CSS left behind. - Compact variant semantics: Rendering simplifies to
<span className={styles.compact}>{fullPath}</span>. No Tooltip wrapper, notabIndex={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 (norole=\"tooltip\", notabIndex=\"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.tsandHouseholdItemDetailPage.tsretainareaBreadcrumbNavfor negative assertions only and drop the obsoleteareaBreadcrumbcomposite locator.WorkItemsPage.tscompact breadcrumb selector correctly dropped the[tabIndex=\"0\"]attribute requirement.
Minor observation (informational, no action needed)
WorkItemsPage.tsgetAreaBreadcrumbForItemhelper removed the now-unusedtableVisiblelocal variable but kept the same return shape — callers unaffected.
No schema, API contract, or ADR impact. Wiki does not need updates for this change.
Summary
AreaBreadcrumbvariant is now a plain<span>with no Tooltip wrapper ortabIndex, removing the hover tooltip from the compact breadcrumb displayWorkItemDetailPageandHouseholdItemDetailPageheaders per user feedback; associated CSS, unit tests, and E2E scenarios updated accordinglyFixes #1278
Test plan
HouseholdItemDetailPage.breadcrumb.test.tsx, updated 4 other test filesCo-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