Move the first two steps of field creation into a modal.

omkar.podey → changed the visibility of the branch move-to-modal-with-mr to hidden.

omkar.podey → changed the visibility of the branch move-to-modal-with-mr to active.

trying to get the errors to show up on the modals.

MR 5991 was created over 📌 Field selection breaks conventions and increases cognitive load Needs review and hence has changes from it and the changes for the conversion to modals.

Can we hide this MR https://git.drupalcode.org/project/drupal/-/merge_requests/5860?

@omkar.podey great work!

I have following observations:

1. When the modal window opened by default the "Plain text" field is highlighted. I think it should not be highlighted by default because we are going to the step 2 after clicking the field type and in this case we have to click "Plain text" field once again.

2. In the modal window Step2 the field type which was selected in Step1 should be displayed as modal window currently it is displaying the title as"Add field" and sometime when there is not much info on the step2 for example in case of adding a Link field we need this title as the field type. Therefore currently it is not clear to user which field was selected in Step1 and it would be really helpful if the field type can be displayed as the Modal window title.

3. The submit buttons "Continue" and "Back" should be there on the left side instead of the right side as those are there in the existing flow.

Thank you.

#11.2 . Addressed the modal title issue.

#11.1 . It's by design, it helps in voiceover.
#11.2 . It's based on ✨ Use modals in field creation and field edit flow Needs work which had multiple accessibility reviews and I kinda like it too.

Modal implemented successfully...

@Nitin shrivastava

Thank for the review but IMHO it is too early to mark it as RTBC, let us keep it in NR until a few reviews for a couple of days may be. Looks like it is failing some tests also https://git.drupalcode.org/issue/drupal-3409379/-/jobs/599817

Thank you.

For test failures.

Have not tested or reviewed.

omkar.podey → changed the visibility of the branch 3409379-move-the-first to hidden.

Did a quick accessibility check

Opened the first step modal and confirmed focus is on the first item
Tabbing stays inside the modal
Selecting an option opens the 2nd modal and focus is on the first itme
Tabbing stays inside the modal just fine.
Clicking back works as expected

Do wonder if this needs a change record, can see this breaking contrib tests.

Brought this up in #needs-review-queue-initiative in slack and @lendude agreed about the need for a change record.

The current MR is badly broken. I tested as follows:

1. Install Drupal with the Umami demo profile.
2. Log in as an administrator.
3. Go to the "Manage fields" page for the page content type: /en/admin/structure/types/manage/page/fields.
4. Trigger the "+Create a new field" link.
5. Select Boolean.
6. Submit the form ("Continue").
7. Enter a label: "Boolean".
8. Submit the form ("Continue").
9. Minor point: the modal form at this stage is labeled "title".
10. Submit the form ("Save settings").

After the last step, I find myself on the page /en/admin/structure/types/manage/page/fields/add-field. This is the same form that I saw in a modal in Step 5. At this point, if I submit the form ("Continue") I get an error: it seems I have to select a field type and start over. I can use the breadcrumb to navigate back to the "Manage fields" page, and I see that the field has not been created.

I am worried that the automated tests all pass. If the tests do not catch a problem like this, then the tests are badly broken, too.

Usability review

We discussed this issue at 📌 Drupal Usability Meeting 2024-11-08 Active . That issue will have a link to a recording of the meeting.

For the record, the attendees at the usability meeting were @AaronMcHale, @benjifisher, @rkoller, @shaal, @simohell, @worldlinemine.

We agreed that, of all the child issues of 🌱 [Plan] Improve field creation experience Active , either this issue or 📌 [PP-1] Move label and machine name fields to the field config edit form Active would be a good next step.

We discussed the advantages of using modals in this process. Modals speed up the process by reducing the number of full page loads. They make keyboard navigation easier, since tabbing only goes to elements within the modal. They also make it easier to keep track of the current context and to return to the start of the process if the user decides to cancel.

In the past, there have been some drawbacks to using modals, mostly related to accessibility. The current situation is much better, thanks to improvements in recent versions of jQuery.

Ideally, Drupal would provide a framework that makes it easy to implement multi-step forms in modals. (Probably there is already an issue for this.) If that is not done before this issue, then perhaps the work here can serve as a model for how to implement that.