Pages Editor: design updates for internal test #7129

shaunanoordin · 2024-06-21T16:36:52Z

PR Overview

Part of: Pages Editor MVP project and FEM Lab super-project
Follows #7105
Staging branch URL: https://pr-7129.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

This PR adds a number of small design updates, in preparation for additional internal tests. Here's the ToDo List from Slack, 10 Jun:

TasksPage: "Add New Task" button shouldn't take up 100% width when there are 0 tasks
EditStepDialog: "Add New Task" button should take up 66% of space, "Done" button should take up 33% of space
EditStepDialog: collapsible "Help" text box (original query from Sean: should Page only have 1 Help box? But this is a larger question, so collapsible first)
- New behaviour: 1. "Help" fields can be collapsed & expanded. 2. a "Help" field of a Task starts off automatically expanded if EITHER the Task is the first in its Page, OR the Help field is not empty.
✖️ ~~BranchingNextPage: answers' Next Page should have "New Task" option~~ Won't be done in this PR
NewTaskDialog: centre Task options
Teal should be 005d69
⭐ project: Make Project 23976 use PageEditor links in Edit Workflow (i.e. modify /lab/workflows to automatically use /editor in links)
Design: dropdown menu missing carats
- ❗ EXPLANATION: in 7105, I added select { -webkit-appearance: none } to remove a weird coloured gradient overlay on all HTML <select> dropdown elements. Unfortunately, this also removed the decorative "collapse/expand" carats/arrows on the dropdowns of EVERY browser. I've decided to ignore relatively small style issues on Safari, if the workarounds end up borking more browsers.

Status

Ready for review!

coveralls · 2024-06-21T16:40:04Z

coverage: 56.991%. remained the same
when pulling 66d24fb on pages-editor-pt26
into 78699da on master.

coveralls · 2024-06-21T16:57:36Z

coverage: 56.999% (+0.008%) from 56.991%
when pulling 7376979 on pages-editor-pt26
into 78699da on master.

shaunanoordin · 2024-06-21T17:09:36Z

Testing Steps

Test with macOS + Chrome or Firefox. If you use Safari, please be warned that the dropdowns look gradient-ly, which is out of design.

Testing Feature update: Workflow URLs on the Workflows listing

View the workflows of a project that's not on the "use Pages Editor" list (example), and ensure that clicking on any example workflow DOESN'T take you to the Pages Editor page, but instead takes you to the classic PFE "Edit Workflow" page. (example)
View the workflows of a(/the one and only) test project that IS on the "use Pages Editor" list (example), and ensure that clicking on any example workflow DOES take you to the Pages Editor page. (example)
NOTE: this updated URL only works on the default workflows view, not the "reorder workflows" view.

Testing Feature update: collapsible Help fields

Create a new Page
Add a new Text/Question/Drawing Task. Observe that the Help field is automatically expanded.
Add two more Tasks (of any type). Observe that the Help fields for the 2nd Task onwards are automatically collapsed.
Click on the expand/collapse icons to expand/collapse various Help fields.
Open the Help field of the 3rd Task, and type in something.
Close the Page, then open/edit it again.
Observe that the following Tasks' help fields start off automatically expanded: the 1st Task on the Page (even if the Help text is empty), and the 3rd Task on the Page (because the Help text isn't empty)
- All other Tasks' help fields start off automatically collapsed.

Testing Design updates:

Testing URL: https://pr-7129.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging
eyeball it based on the descriptions above, or defer to @seanmiller26 to give his thumbs up

eatyourgreens · 2024-06-22T07:52:16Z

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx

+        <div className="flex-row spacing-bottom-S">
+          <label
+            className="big"
+            htmlFor={`task-${taskKey}-help`}


This requires the input to be in the DOM at all times. You can’t have a label without its corresponding input in the DOM, so the show/hide pattern used in this PR is broken. It works visually but produces a broken DOM when the text input is removed. That won’t work in a screen reader.

This needs to use a details/summary pattern, or the correct ARIA roles and state for a collapsible panel, in order to work for any users that can't physically see the task editor.

I’d also suggest using the HTML hidden boolean attribute to hide the input, rather than removing it from the DOM.

Here's the WAI-ARIA pattern for building a disclosure widget, including roles, states and keyboard interactions.

Alternatively, of course, you could use the native HTML disclosure widget.

Scott O'Hara summarised the pros and cons of using a native disclosure widget vs. rolling your own in JavaScript. You can use that to make a decision as to which fits best here.

coveralls · 2024-06-24T16:50:43Z

coverage: 56.999% (+0.008%) from 56.991%
when pulling d8a1927 on pages-editor-pt26
into 78699da on master.

shaunanoordin · 2024-06-24T16:52:34Z

PR Update

Accessibility: the Help input fields, when hidden, now use <textarea hidden=true>. Thanks, Jim! 👍

eatyourgreens · 2024-06-24T16:54:26Z

@shaunanoordin you're welcome. You'll still need to add the expanded state etc. to your toggle button, so that it's announced as open/closed for blind users. I'll add a comment to the PR.

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx

...pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx

seanmiller26 · 2024-06-24T17:02:18Z

Observe that the following Tasks' help fields start off automatically expanded: the 1st Task on the Page (even if the Help text is empty), and the 3rd Task on the Page (because the Help text isn't empty)
All other Tasks' help fields start off automatically collapsed.

Interesting UX choices here. Let's see how it tests first, but I hope we can revisit the '1 Help text entry per page' discussion at a later stage to really sort this out.

1 minor styling nitpick: Can we change the Help Text header to be less bold than the Main Text/Text Task header style?

Figma:

coveralls · 2024-06-24T17:14:19Z

coverage: 56.999% (+0.03%) from 56.969%
when pulling 7bcfb06 on pages-editor-pt26
into 6703327 on master.

eatyourgreens · 2024-06-24T17:18:59Z

Very minor styling point. Since you're hiding the input with hidden, maybe use a CSS animation to transition between the visible and hidden states.

coveralls · 2024-06-24T21:05:59Z

coverage: 56.999% (+0.03%) from 56.969%
when pulling c19dbac on pages-editor-pt26
into 6703327 on master.

coveralls · 2024-06-24T21:06:14Z

coverage: 56.999% (+0.03%) from 56.969%
when pulling c19dbac on pages-editor-pt26
into 6703327 on master.

coveralls · 2024-06-24T21:06:16Z

coverage: 56.999% (+0.03%) from 56.969%
when pulling c19dbac on pages-editor-pt26
into 6703327 on master.

coveralls · 2024-06-24T21:27:28Z

coverage: 56.999% (+0.03%) from 56.969%
when pulling 55c4a95 on pages-editor-pt26
into 6703327 on master.

shaunanoordin · 2024-06-24T21:29:59Z

PR Update

Accessibility: recommendations from Jim incorporated; expand/collapse buttons now indicate change of state via ARIA.
Design: "Help" field's label has been de-bolded; expand/collapse icon changed from caret (solid triangle) to angle-triangle-arrow-thing

👍

coveralls · 2024-06-24T21:33:49Z

coverage: 56.999% (+0.008%) from 56.991%
when pulling 740ed7c on pages-editor-pt26
into 25a04dc on master.

kieftrav

Works as expected and overall looks good to me (tested on Chrome). One strong recommendation to refactor the shared aspects of the different Tasks so as to de-duplicate code & prevent future issues if someone changes one file without knowledge of the others.

kieftrav · 2024-06-26T17:50:48Z

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx

+            Help Text
+          </label>
+          <button
+            aria-label={`Show/Hide Help field`}


You can modify this text to be more accurate to the existing state:

${(showHelpField) ? 'Hide' : 'Show'} Help Field

That would change the labels to 'Show help field (closed)' and 'Hide help field (expanded)', since the ARIA expanded state is read out as part of the label. I don't think it's recommended practice to change the labels for toggles, based on the toggle state. Rather, have a single toggle button label that makes sense when accompanied by the open/closed state.

The visible label could be changed, though, for sighted users.

kieftrav · 2024-06-26T18:00:35Z

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx

-        >
-          Help Text
-        </label>
+        <div className="flex-row spacing-bottom-S">


I'd strongly consider refactoring the shared code between DrawingTask / TextTask / QuestionTask into a file called SharedTaskFields or something like that. Without your context, I could imagine it being easy to change something in one and miss the others.

…low is empty

…d Icons

Co-authored-by: Jim O'Donnell <[email protected]>

coveralls · 2024-06-27T14:44:51Z

coverage: 56.948% (+0.008%) from 56.94%
when pulling 1f9d10d on pages-editor-pt26
into d7f9954 on master.

…button

coveralls · 2024-06-27T15:02:04Z

coverage: 56.948% (+0.008%) from 56.94%
when pulling 46db5b5 on pages-editor-pt26
into d7f9954 on master.

shaunanoordin · 2024-06-27T16:24:17Z

Thanks Travis!

I've adjusted the aria-label for the Tasks accordingly. 👌
Agreed that the QuestionTask, DrawingTask, and TextTask need to be re-written to use shared code; the amount of repeated code in 'em is a bit ridiculous, if I'm honest.
- For context, there was a lot of copy-pasting instead of setting up shared code, because early on, I wasn't sure which bits could be shared and which couldn't. For example, we'd think the "main text" of a task should be shared, but the question tasks use task.question while everything else uses task.instructions 🤦

eatyourgreens · 2024-06-27T17:35:25Z

I've adjusted the aria-label for the Tasks accordingly.

The aria-label shouldn’t change when the button is pressed. That can make the UX confusing in a screen reader.

shaunanoordin requested a review from a team June 21, 2024 16:36

eatyourgreens reviewed Jun 22, 2024

View reviewed changes

eatyourgreens reviewed Jun 24, 2024

View reviewed changes

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx Outdated Show resolved Hide resolved

eatyourgreens reviewed Jun 24, 2024

View reviewed changes

...pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx Outdated Show resolved Hide resolved

eatyourgreens reviewed Jun 24, 2024

View reviewed changes

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx Outdated Show resolved Hide resolved

shaunanoordin force-pushed the pages-editor-pt26 branch from d8a1927 to 7bcfb06 Compare June 24, 2024 17:11

shaunanoordin force-pushed the pages-editor-pt26 branch from 55c4a95 to 740ed7c Compare June 24, 2024 21:30

shaunanoordin force-pushed the pages-editor-pt26 branch from 740ed7c to bfc6ff1 Compare June 25, 2024 15:23

kieftrav requested review from kieftrav and removed request for a team June 26, 2024 17:39

kieftrav approved these changes Jun 26, 2024

View reviewed changes

shaunanoordin added 4 commits June 27, 2024 15:41

pages-editor-pt26: remove Safari fix which kills other browsers

2cd5204

TasksPage design: Add New Task button only takes 50% width when workf…

5d0a5ad

…low is empty

EditStepDialog design: Done button now has 33% min width

b42e07a

NewTaskDialog design: center-align new Tasks button

2719866

shaunanoordin and others added 9 commits June 27, 2024 15:41

Design: replace light teal with darker teal

4a7bcf8

Tasks: add functionality to hide/show Help fields. Add Collapse/Expan…

ee6243b

…d Icons

Add collapsible Help field for Drawing and Question Tasks

4e9762a

Lab Workflows: set certain projects to use PagesEditor

9fd1672

Accessibility: hidden fields now use HTML hidden

4f000d2

Accessibility: show/hide Help field button indicates change of state

1d6b945

Co-authored-by: Jim O'Donnell <[email protected]>

Accessibility: show/hide Help field button indicates change of state

f72bb8f

Co-authored-by: Jim O'Donnell <[email protected]>

Accessibility: show/hide Help field button indicates change of state

8d1be63

Co-authored-by: Jim O'Donnell <[email protected]>

Tasks: restyle Help field label

1f9d10d

shaunanoordin force-pushed the pages-editor-pt26 branch from bfc6ff1 to 1f9d10d Compare June 27, 2024 14:41

Feedback: dynamically alter aria description of show/hide help field …

46db5b5

…button

shaunanoordin merged commit 4af77a2 into master Jun 27, 2024
5 checks passed

shaunanoordin deleted the pages-editor-pt26 branch June 27, 2024 16:24

shaunanoordin mentioned this pull request Jun 27, 2024

Pages Editor: Cleanup #7135

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pages Editor: design updates for internal test #7129

Pages Editor: design updates for internal test #7129

shaunanoordin commented Jun 21, 2024 •

edited

Loading

coveralls commented Jun 21, 2024

coveralls commented Jun 21, 2024

shaunanoordin commented Jun 21, 2024

eatyourgreens Jun 22, 2024 •

edited

Loading

eatyourgreens Jun 22, 2024

eatyourgreens Jun 22, 2024

eatyourgreens Jun 22, 2024 •

edited

Loading

coveralls commented Jun 24, 2024

shaunanoordin commented Jun 24, 2024

eatyourgreens commented Jun 24, 2024

seanmiller26 commented Jun 24, 2024

coveralls commented Jun 24, 2024

eatyourgreens commented Jun 24, 2024

coveralls commented Jun 24, 2024

coveralls commented Jun 24, 2024

coveralls commented Jun 24, 2024

coveralls commented Jun 24, 2024

shaunanoordin commented Jun 24, 2024

coveralls commented Jun 24, 2024

kieftrav left a comment

kieftrav Jun 26, 2024

eatyourgreens Jun 27, 2024 •

edited

Loading

kieftrav Jun 26, 2024

coveralls commented Jun 27, 2024

coveralls commented Jun 27, 2024

shaunanoordin commented Jun 27, 2024

eatyourgreens commented Jun 27, 2024

Pages Editor: design updates for internal test #7129

Pages Editor: design updates for internal test #7129

Conversation

shaunanoordin commented Jun 21, 2024 • edited Loading

PR Overview

Status

coveralls commented Jun 21, 2024

coveralls commented Jun 21, 2024

shaunanoordin commented Jun 21, 2024

Testing Steps

eatyourgreens Jun 22, 2024 • edited Loading

Choose a reason for hiding this comment

eatyourgreens Jun 22, 2024

Choose a reason for hiding this comment

eatyourgreens Jun 22, 2024

Choose a reason for hiding this comment

eatyourgreens Jun 22, 2024 • edited Loading

Choose a reason for hiding this comment

coveralls commented Jun 24, 2024

shaunanoordin commented Jun 24, 2024

PR Update

eatyourgreens commented Jun 24, 2024

seanmiller26 commented Jun 24, 2024

coveralls commented Jun 24, 2024

eatyourgreens commented Jun 24, 2024

coveralls commented Jun 24, 2024

coveralls commented Jun 24, 2024

coveralls commented Jun 24, 2024

coveralls commented Jun 24, 2024

shaunanoordin commented Jun 24, 2024

PR Update

coveralls commented Jun 24, 2024

kieftrav left a comment

Choose a reason for hiding this comment

kieftrav Jun 26, 2024

Choose a reason for hiding this comment

eatyourgreens Jun 27, 2024 • edited Loading

Choose a reason for hiding this comment

kieftrav Jun 26, 2024

Choose a reason for hiding this comment

coveralls commented Jun 27, 2024

coveralls commented Jun 27, 2024

shaunanoordin commented Jun 27, 2024

eatyourgreens commented Jun 27, 2024

shaunanoordin commented Jun 21, 2024 •

edited

Loading

eatyourgreens Jun 22, 2024 •

edited

Loading

eatyourgreens Jun 22, 2024 •

edited

Loading

eatyourgreens Jun 27, 2024 •

edited

Loading