Skip to content

Commit 58136a6

Browse files
geraldarthurdavisgeraldarthurdavis
committed
V48 Gate 3 (implementation-only): tooltip coverage on every /deposit section/sub-section header + overflow-safety fixes
Extends rich guidance tooltips to every remaining /deposit section and sub-section header: Repository, Branch, Commit (DepositSourceSelection), Readback/Recent Deposit activity, Option synthesis/Obfuscations + its three sub-fields (What to obfuscate, Source path hints, Protected IP exclusions), and Synthesis run telemetry — on top of the four already shipped (Options/Earnings/Governance/Session). New deposit-explainers.ts entries are grounded in the actual code (depositor-earning-supply-intelligence.ts, authority.ts, phases/setup.ts, pipeline-stream-integration.ts) and prior QA findings (F9, F14, F24), not generic filler. Two overflow/safety bugs found and fixed: - The (i) trigger sat beside a two-line kicker+title block rather than inline after the title text itself, so opening "below" could visually overlap the tail of the title (seen as smeared text under the tooltip). Moved every trigger inline into the <h2>/label right after the visible text so the existing 12px clearance is measured from the true bottom of the header, not the icon's own (higher) position. - Session/Earnings/Governance sit inside <details><summary> disclosures; their default browser focus outline was bleeding through around the tooltip's rounded corners. Added outline-none to those three <summary> elements (the click-to-open-tooltip stopPropagation already prevents the disclosure from toggling). A third, more consequential bug surfaced while wiring the three Obfuscations textarea sub-labels: BitcodeInlineExplainer's default trigger aria-label ("Explain {title}") repeats the field's own label text verbatim, so getByLabelText (and a screen reader's label lookup) ambiguously matches BOTH the field and the tooltip trigger whenever an explainer's title mirrors its adjacent label — this actually broke depositPageClient.test.tsx's exclusions field query. Added an optional `triggerAriaLabel` override (default unchanged, so the ~20 existing call sites elsewhere are unaffected) and used it at the five field-adjacent tooltip sites here. New bitcodeInlineExplainerAriaLabel.test.tsx covers both the default and the override explicitly. uapi tsc 0; full suite 525/526 (the one failure, tests/api/activityRoute.test.ts, is pre-existing and unrelated — verified via git stash before this change).
1 parent fba8715 commit 58136a6

6 files changed

Lines changed: 289 additions & 74 deletions

File tree

‎uapi/app/deposit/DepositPageClient.tsx‎

Lines changed: 76 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1160,8 +1160,9 @@ export default function DepositPageClient() {
11601160
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-neutral-500">
11611161
Readback
11621162
</p>
1163-
<h2 className="mt-2 text-lg font-semibold text-white">
1164-
Recent Deposit activity
1163+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
1164+
<span>Recent Deposit activity</span>
1165+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.readback} />
11651166
</h2>
11661167
</div>
11671168
<button
@@ -1271,44 +1272,59 @@ export default function DepositPageClient() {
12711272
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
12721273
Option synthesis
12731274
</p>
1274-
<h2 className="mt-2 text-lg font-semibold text-white">
1275-
Obfuscations
1275+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
1276+
<span>Obfuscations</span>
1277+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.obfuscations} />
12761278
</h2>
12771279
</div>
12781280
<Sparkles
12791281
className="h-5 w-5 text-emerald-200"
12801282
aria-hidden="true"
12811283
/>
12821284
</div>
1283-
<label className="mt-4 block">
1284-
<span className="text-[0.62rem] uppercase tracking-[0.16em] text-neutral-500">
1285-
What to obfuscate or withhold
1285+
<div className="mt-4 block">
1286+
<span className="flex items-center gap-2 text-[0.62rem] uppercase tracking-[0.16em] text-neutral-500">
1287+
<label htmlFor="deposit-obfuscations-input">What to obfuscate or withhold</label>
1288+
<span onClick={(event) => event.stopPropagation()}>
1289+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.whatToObfuscate} triggerAriaLabel="More info about this field" />
1290+
</span>
12861291
</span>
12871292
<textarea
1293+
id="deposit-obfuscations-input"
12881294
value={obfuscations}
12891295
onChange={(event) =>
12901296
setObfuscations(event.target.value)
12911297
}
12921298
className="mt-2 min-h-[8rem] w-full border border-white/10 bg-black/30 px-3 py-3 text-sm leading-6 text-neutral-100 outline-none transition focus:border-emerald-300/35"
12931299
/>
1294-
</label>
1295-
<label className="mt-4 block">
1296-
<span className="text-[0.62rem] uppercase tracking-[0.16em] text-neutral-500">
1297-
Source path hints
1300+
</div>
1301+
<div className="mt-4 block">
1302+
<span className="flex items-center gap-2 text-[0.62rem] uppercase tracking-[0.16em] text-neutral-500">
1303+
<label htmlFor="deposit-source-path-hints-input">Source path hints</label>
1304+
<span onClick={(event) => event.stopPropagation()}>
1305+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.sourcePathHints} triggerAriaLabel="More info about this field" />
1306+
</span>
12981307
</span>
12991308
<textarea
1309+
id="deposit-source-path-hints-input"
13001310
value={sourcePathHintsText}
13011311
onChange={(event) =>
13021312
setSourcePathHintsText(event.target.value)
13031313
}
13041314
className="mt-2 min-h-[6rem] w-full border border-white/10 bg-black/30 px-3 py-3 font-mono text-xs leading-5 text-neutral-100 outline-none transition focus:border-emerald-300/35"
13051315
/>
1306-
</label>
1307-
<label className="mt-4 block">
1308-
<span className="text-[0.62rem] uppercase tracking-[0.16em] text-neutral-500">
1309-
Protected IP exclusions (one per line)
1316+
</div>
1317+
<div className="mt-4 block">
1318+
<span className="flex items-center gap-2 text-[0.62rem] uppercase tracking-[0.16em] text-neutral-500">
1319+
<label htmlFor="deposit-protected-ip-exclusions-input">
1320+
Protected IP exclusions (one per line)
1321+
</label>
1322+
<span onClick={(event) => event.stopPropagation()}>
1323+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.protectedIpExclusions} triggerAriaLabel="More info about this field" />
1324+
</span>
13101325
</span>
13111326
<textarea
1327+
id="deposit-protected-ip-exclusions-input"
13121328
value={protectedIpExclusionsText}
13131329
onChange={(event) =>
13141330
setProtectedIpExclusionsText(event.target.value)
@@ -1322,7 +1338,7 @@ export default function DepositPageClient() {
13221338
measurement, and candidates that touch them are dropped
13231339
fail-closed.
13241340
</span>
1325-
</label>
1341+
</div>
13261342
<button
13271343
type="button"
13281344
onClick={() => {
@@ -1361,8 +1377,9 @@ export default function DepositPageClient() {
13611377
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
13621378
AssetPacksSynthesis
13631379
</p>
1364-
<h2 className="mt-2 text-lg font-semibold text-white">
1365-
Synthesis run telemetry
1380+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
1381+
<span>Synthesis run telemetry</span>
1382+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.synthesisTelemetry} />
13661383
</h2>
13671384
<p className="mt-2 max-w-3xl text-sm leading-6 text-neutral-400">
13681385
Source-safe pipeline telemetry streamed live from the
@@ -1421,16 +1438,14 @@ export default function DepositPageClient() {
14211438
aria-label="Deposit AssetPack options"
14221439
>
14231440
<div className="flex flex-wrap items-start justify-between gap-3">
1424-
<div className="flex items-start gap-2">
1425-
<div>
1426-
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
1427-
Options
1428-
</p>
1429-
<h2 className="mt-2 text-lg font-semibold text-white">
1430-
Source-safe AssetPack proposals
1431-
</h2>
1432-
</div>
1433-
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.options} />
1441+
<div>
1442+
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
1443+
Options
1444+
</p>
1445+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
1446+
<span>Source-safe AssetPack proposals</span>
1447+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.options} />
1448+
</h2>
14341449
</div>
14351450
<span className="border border-emerald-300/15 bg-emerald-300/10 px-3 py-2 text-[0.62rem] uppercase tracking-[0.16em] text-emerald-100">
14361451
{depositRouteSession.synthesis.pipeline}
@@ -1998,19 +2013,17 @@ export default function DepositPageClient() {
19982013

19992014
<aside className="grid h-fit gap-5" aria-label="Deposit route state">
20002015
<details className="border border-white/10 bg-white/[0.035] px-4 py-4">
2001-
<summary className="flex cursor-pointer list-none items-start justify-between gap-3">
2002-
<div className="flex items-start gap-2">
2003-
<div>
2004-
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
2005-
Earnings
2006-
</p>
2007-
<h2 className="mt-2 text-lg font-semibold text-white">
2008-
All-repositories supply estimate
2009-
</h2>
2010-
</div>
2011-
<span onClick={(event) => event.stopPropagation()} className="shrink-0">
2012-
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.earnings} />
2013-
</span>
2016+
<summary className="flex cursor-pointer list-none items-start justify-between gap-3 outline-none">
2017+
<div>
2018+
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
2019+
Earnings
2020+
</p>
2021+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
2022+
<span>All-repositories supply estimate</span>
2023+
<span onClick={(event) => event.stopPropagation()} className="shrink-0">
2024+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.earnings} />
2025+
</span>
2026+
</h2>
20142027
</div>
20152028
<TrendingUp
20162029
className="h-5 w-5 text-emerald-200"
@@ -2103,19 +2116,17 @@ export default function DepositPageClient() {
21032116
</details>
21042117

21052118
<details className="border border-white/10 bg-white/[0.035] px-4 py-4">
2106-
<summary className="flex cursor-pointer list-none items-start justify-between gap-3">
2107-
<div className="flex items-start gap-2">
2108-
<div>
2109-
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
2110-
Governance
2111-
</p>
2112-
<h2 className="mt-2 text-lg font-semibold text-white">
2113-
Organization authority
2114-
</h2>
2115-
</div>
2116-
<span onClick={(event) => event.stopPropagation()} className="shrink-0">
2117-
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.governance} />
2118-
</span>
2119+
<summary className="flex cursor-pointer list-none items-start justify-between gap-3 outline-none">
2120+
<div>
2121+
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
2122+
Governance
2123+
</p>
2124+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
2125+
<span>Organization authority</span>
2126+
<span onClick={(event) => event.stopPropagation()} className="shrink-0">
2127+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.governance} />
2128+
</span>
2129+
</h2>
21192130
</div>
21202131
<ShieldCheck
21212132
className="h-5 w-5 text-emerald-200"
@@ -2153,19 +2164,17 @@ export default function DepositPageClient() {
21532164
</details>
21542165

21552166
<details className="border border-white/10 bg-white/[0.035] px-4 py-4">
2156-
<summary className="flex cursor-pointer list-none items-start justify-between gap-3">
2157-
<div className="flex items-start gap-2">
2158-
<div>
2159-
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
2160-
Session
2161-
</p>
2162-
<h2 className="mt-2 text-lg font-semibold text-white">
2163-
Source-safe deposit state
2164-
</h2>
2165-
</div>
2166-
<span onClick={(event) => event.stopPropagation()} className="shrink-0">
2167-
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.session} />
2168-
</span>
2167+
<summary className="flex cursor-pointer list-none items-start justify-between gap-3 outline-none">
2168+
<div>
2169+
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
2170+
Session
2171+
</p>
2172+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
2173+
<span>Source-safe deposit state</span>
2174+
<span onClick={(event) => event.stopPropagation()} className="shrink-0">
2175+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.session} />
2176+
</span>
2177+
</h2>
21692178
</div>
21702179
<ShieldCheck
21712180
className="h-5 w-5 text-emerald-200"

‎uapi/app/deposit/DepositSourceSelection.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import type { VCSBranch, VCSCommit, VCSRepository } from "@bitcode/vcs-core";
1717

1818
import { VCSRepositorySelector } from "@/components/base/bitcode/vcs/VCSRepositorySelector";
1919
import { SearchableSelect } from "@/components/base/bitcode/forms/SearchableSelect";
20+
import BitcodeInlineExplainer from "@/components/base/bitcode/execution/BitcodeInlineExplainer";
21+
import { DEPOSIT_SECTION_EXPLAINERS } from "@/app/deposit/deposit-explainers";
2022
import {
2123
buildTerminalRepositoryAnchorDraft,
2224
type TerminalActivityRecordDraft,
@@ -417,8 +419,9 @@ export default function DepositSourceSelection({
417419
<p className="text-[0.68rem] uppercase tracking-[0.22em] text-emerald-200/80">
418420
Repository
419421
</p>
420-
<h2 className="mt-2 text-lg font-semibold text-white">
421-
Select the repository you are depositing
422+
<h2 className="mt-2 flex items-center gap-2 text-lg font-semibold text-white">
423+
<span>Select the repository you are depositing</span>
424+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.repository} />
422425
</h2>
423426
<p className="mt-2 max-w-3xl text-sm leading-6 text-neutral-400">
424427
One connected repository, branch, and commit form the source package
@@ -472,10 +475,11 @@ export default function DepositSourceSelection({
472475
</div>
473476

474477
<div className="mt-4 grid gap-4 lg:grid-cols-2">
475-
<label className="rounded-[1.25rem] border border-white/8 bg-white/5 px-4 py-4">
478+
<div className="rounded-[1.25rem] border border-white/8 bg-white/5 px-4 py-4">
476479
<span className="flex items-center gap-2 text-[0.64rem] uppercase tracking-[0.2em] text-neutral-400">
477480
<GitBranch className="h-3.5 w-3.5" />
478481
<span>Branch</span>
482+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.branch} triggerAriaLabel="More info about this field" />
479483
</span>
480484
<div className="mt-3">
481485
<SearchableSelect
@@ -514,11 +518,12 @@ export default function DepositSourceSelection({
514518
? "Loading branches…"
515519
: "Default branch is selected when available"}
516520
</p>
517-
</label>
521+
</div>
518522

519-
<label className="rounded-[1.25rem] border border-white/8 bg-white/5 px-4 py-4">
523+
<div className="rounded-[1.25rem] border border-white/8 bg-white/5 px-4 py-4">
520524
<span className="flex items-center gap-2 text-[0.64rem] uppercase tracking-[0.2em] text-neutral-400">
521525
<span>Commit / ref</span>
526+
<BitcodeInlineExplainer explainer={DEPOSIT_SECTION_EXPLAINERS.commit} triggerAriaLabel="More info about this field" />
522527
</span>
523528
<div className="mt-3">
524529
<SearchableSelect
@@ -554,7 +559,7 @@ export default function DepositSourceSelection({
554559
? "Loading commits…"
555560
: "Latest branch commit is selected when available"}
556561
</p>
557-
</label>
562+
</div>
558563
</div>
559564

560565
<div className="mt-4 flex flex-wrap items-center justify-between gap-3 border border-white/8 bg-white/[0.025] px-4 py-3">

0 commit comments

Comments
 (0)