Fix field-help review findings (Fable review + Opus verification)
Test and deploy / test-and-deploy (push) Successful in 1m25s
Test and deploy / test-and-deploy (push) Successful in 1m25s
Highest severity: injected "?" buttons were hijacking the implicit <label> association on 14 fields, so clicking the label text opened the help dialog instead of focusing the input and screen readers lost the input's accessible name. ensureLabelAssociation() now gives each affected input an explicit id/for pairing before the button lands. Also: milestones-ror/actuators topic placement is now text-matched with a warning fallback instead of blind array indexing; every topic warns if it resolves zero containers; dialog temperatures (milestone table, RoR budget, worked example, both charge-setting tables) now respect the °C/°F toggle instead of being stuck in °C; the print worksheet's duplicate curve chart was missing the data-tempc attributes its live counterpart had, so only its title/caption (not its axis numbers) converted; the "?" trigger's touch target grew from 15px to a WCAG-conformant ~25px without changing the visual dot; two genuine coverage gaps closed (a roast-log checklist topic, a curve-reading topic); a worked feasibility example was restored; two claims that didn't trace back to the source worksheet were corrected (an invented "±15 seconds" sweet-spot tolerance, a wrong moisture-to-time mapping); three cultivar cells regained detail lost in the original transcription; a data-transcription footnote no longer leaks into an unrelated topic; checklist items keep their list semantics under VoiceOver. Co-Authored-By: Fable <[email protected]> Co-Authored-By: Opus <[email protected]>
This commit is contained in:
+33
-1
@@ -493,6 +493,28 @@ label.filebtn input[type="file"] {
|
||||
.help-body dl {
|
||||
margin: 0;
|
||||
}
|
||||
.help-checklist {
|
||||
list-style: none;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.help-checklist li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.help-checklist li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1.5px solid var(--line-strong);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.help-table-wrap {
|
||||
overflow-x: auto;
|
||||
margin: 6px 0 10px;
|
||||
@@ -763,6 +785,7 @@ label.filebtn input[type="file"] {
|
||||
gap: 4px;
|
||||
}
|
||||
.help-btn {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@@ -777,6 +800,14 @@ label.filebtn input[type="file"] {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* Keeps the 15px visual dot but gives touch/mouse a ~25px target (WCAG's 24px minimum) —
|
||||
matters on a mobile PWA. Kept modest rather than the fuller 44px so it doesn't swallow
|
||||
clicks meant for the label text 4px away or the input just below. */
|
||||
.help-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -5px;
|
||||
}
|
||||
.help-btn:hover,
|
||||
.help-btn:focus-visible {
|
||||
border-color: var(--ember);
|
||||
@@ -788,7 +819,8 @@ label.filebtn input[type="file"] {
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.subhead .help-btn,
|
||||
.dock-card-head .help-btn {
|
||||
.dock-card-head .help-btn,
|
||||
.panel-head h2 .help-btn {
|
||||
margin-left: 6px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user