yangzhang75 commented on code in PR #8516:
URL: https://github.com/apache/texera/pull/8516#discussion_r3992515665
##########
frontend/src/app/workspace/component/workflow-form/workflow-form.component.html:
##########
@@ -70,48 +94,126 @@
</div>
<div [hidden]="loading">
- <!-- The author's one piece of guidance, shown as rendered markdown,
collapsible, and only when
- there is instruction text to show. Editing it is part of the
authoring PR. -->
+ <!-- The author's one piece of guidance, shown as rendered markdown,
collapsible. A reader sees
+ it only when there is text; an author always sees the section, to
write it (write/preview). -->
<section
class="card instr"
- *ngIf="hasInstruction"
+ *ngIf="hasInstruction || authoring"
[class.open]="instructionOpen">
- <button
- type="button"
+ <!-- The header is a row, not one big button, because while authoring it
holds the title INPUT,
+ and an input inside a button is invalid interactive nesting
(assistive tech gets two
+ controls fighting over one click). Reading: the whole row is the
toggle. Authoring: the
+ row is icon, title input, and a chevron button that toggles, so the
input is the control's
+ sibling rather than its child. Either toggle names the body it
opens (aria-controls). -->
+ <div
class="instr-bar"
- [attr.aria-expanded]="instructionOpen"
- (click)="toggleInstruction()">
- <i
- nz-icon
- nzType="info-circle"
- class="lead"
- aria-hidden="true"></i>
- <h2>{{ instructionTitle || "How to use this" }}</h2>
- <i
- nz-icon
- nzType="down"
- class="chev"
- aria-hidden="true"></i>
- </button>
+ [class.authoring]="authoring">
+ <button
+ *ngIf="!authoring"
+ type="button"
+ class="instr-toggle"
+ [attr.aria-expanded]="instructionOpen"
+ aria-controls="instr-body"
+ (click)="toggleInstruction()">
+ <i
+ nz-icon
+ nzType="info-circle"
+ class="lead"
+ aria-hidden="true"></i>
+ <h2>{{ instructionTitle || "How to use this" }}</h2>
+ <i
+ nz-icon
+ nzType="down"
+ class="chev"
+ aria-hidden="true"></i>
+ </button>
+
+ <ng-container *ngIf="authoring">
+ <i
+ nz-icon
+ nzType="info-circle"
+ class="lead"
+ aria-hidden="true"></i>
+ <!-- An author edits the heading in place here, not in a separate
Title box. -->
+ <input
+ class="instr-title-input"
+ [(ngModel)]="instructionTitle"
+ (ngModelChange)="onInstructionChange()"
+ placeholder="How to use this"
+ aria-label="Instruction heading" />
+ <button
+ type="button"
+ class="instr-toggle instr-chev"
+ [attr.aria-expanded]="instructionOpen"
+ aria-controls="instr-body"
+ [attr.aria-label]="instructionOpen ? 'Collapse the instruction' :
'Expand the instruction'"
+ (click)="toggleInstruction()">
+ <i
+ nz-icon
+ nzType="down"
+ class="chev"
+ aria-hidden="true"></i>
+ </button>
+ </ng-container>
+ </div>
<div
+ id="instr-body"
class="instr-body"
[hidden]="!instructionOpen">
<div
class="md"
+ *ngIf="!authoring"
[innerHTML]="instructionPreviewHtml"></div>
+
+ <ng-container *ngIf="authoring">
+ <div class="tabs">
+ <button
+ type="button"
+ [attr.aria-current]="instructionMode === 'write'"
+ (click)="setInstructionMode('write')">
+ Write
+ </button>
+ <button
+ type="button"
+ [attr.aria-current]="instructionMode === 'preview'"
+ (click)="setInstructionMode('preview')">
+ Preview
+ </button>
+ </div>
+
+ <ng-container *ngIf="instructionMode === 'write'">
+ <textarea
+ class="md-input"
+ [(ngModel)]="instructionBody"
+ (ngModelChange)="onInstructionChange()"
+ placeholder="Explain what this does and what to fill
in."></textarea>
Review Comment:
Right, a placeholder is not a name. Fixed in 1c9ed8863: the body carries
`aria-label="Instruction body"`, matching the heading's `Instruction heading`;
the rendered spec asserts both.
##########
frontend/src/app/workspace/component/workflow-form/workflow-form.component.html:
##########
@@ -336,5 +445,30 @@ <h2>{{ instructionTitle || "How to use this" }}</h2>
</div>
</ng-container>
</section>
+
+ <!-- Author picks which earlier steps also report back; the final result
always shows. Toggling a
+ pill writes the chosen set; a reader never sees this section. -->
+ <section
+ class="card respick"
+ *ngIf="authoring">
+ <h3>Results shown here</h3>
+ <p>The final result always shows. Toggle an earlier step here to feature
its result too.</p>
+ <div class="opts">
+ <button
+ type="button"
+ class="pill"
+ *ngFor="let choice of resultChoices"
+ [class.on]="choice.shown"
+ [attr.aria-pressed]="choice.shown"
+ (click)="onToggleResult(choice)">
Review Comment:
Good catch. Fixed in 1c9ed8863: the pills are tracked by step (`trackBy:
trackByChoice`, keyed on the operator id), so the rebuild after a toggle reuses
the button and the focus stays on it. The rendered spec focuses a pill,
rebuilds the choices as new objects and checks the same element is still there
and still focused.
##########
frontend/src/app/workspace/component/workflow-form/workflow-form.component.html:
##########
@@ -61,6 +61,30 @@
</div>
<div class="pc-page">
+ <!-- Only a writer sees Edit, which flips the whole page into in-place
authoring; the lede appears
+ only while authoring, to say what edit mode is for. -->
+ <header
+ class="pc-head"
+ *ngIf="canEdit">
Review Comment:
Screenshot pending from the author (edit-mode header with the instruction
editor and the result picker); the PR stays a draft until it is in.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
