Copilot commented on code in PR #8516:
URL: https://github.com/apache/texera/pull/8516#discussion_r3992294402
##########
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:
A result toggle emits `formBindingChanged$`, which synchronously rebuilds
`resultChoices` with new objects. With identity tracking, Angular destroys the
pressed button, so keyboard focus is lost after every toggle. Track these rows
by `operatorID` (and avoid the redundant explicit `readConfig()` rebuild) to
preserve focus.
##########
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:
This visible Form View UI change still has only “to be added” in the PR’s
Screenshot section. Repository guidance requires before/after screenshots or a
GIF side by side for frontend UI changes; please attach them before approval.
##########
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:
The instruction body has no persistent accessible name; its placeholder
disappears once text is entered and is not a substitute for a label. Add an
accessible label so screen-reader users can identify this textarea while
editing.
--
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]
