Problem/Motivation

When you use the "remove block" or "remove section" actions, the dialog title is "are you sure you want to remove this block. This is ambiguous, and it would be better to say which block/section.

Accessibilty: this comes under the broad guideline of having clear labels and instructions, and specifically WCAG success criterion 3.3.4 Error Prevention (Legal, Financial, Data).

It would benefit several groups of people.:

Proposed resolution

Say specifically which block or section is being removed.
Use the block title, or the section number, in the dialog title.

For blocks

remove message for blocks

For sections
remove message for sections

Remaining tasks

patch

User interface changes

Clearer question text in an operation which leads to data loss.

API changes

None.

Data model changes

None.

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

andrewmacpherson’s picture

Priority: Normal » Major
Issue summary: View changes
Issue tags: +Layout Builder stable blocker

This overlaps with #2994909: Highlight active element while working with dialogs in Layout Builder which aims to provide a strong visual signifier to associate the off-canvas dialog with the active layout component. Visually impaired users may not benefit from that, but a clearer dialog title will be accessible to screen reader users.

It isn't an outright WCAG failure though, so not a stable blocker.

I'm revising my opinion of that. This comes under WCAG success criterion 3.3.4 Error Prevention (Legal, Financial, Data) at level AA. Specifically, these operations involve data loss, and the dialog is our implementation of G168: Requesting confirmation to continue with selected action.

I'm not 100% certain if if this is an outright WCAG failure. What is clear is that the proposal here would address the error prevention criterion much better, and several groups of users are at a disadvantage without this.

Tentatively marking this as a stable blocker. Hopefully an easy thing to fix.

tedbow’s picture

@andrewmacpherson thanks for filing this. I can see the problem now.

I think adding more to the title would be cut off. Right now it looks like the question is being cut off.

Could we do this?

  1. Change the dialog title to "Remove Section/Block"
  2. inside the dialog add the question "Are you sure you want to remove [specific label for section or block]"?
  3. The current "This action cannot be undone." would under this question.
bendeguz.csirmaz’s picture

Assigned: Unassigned » bendeguz.csirmaz
Issue tags: +Needs tests
StatusFileSize
new3.6 KB

Here's an initial patch.

tedbow’s picture

Status: Active » Needs review
bendeguz.csirmaz’s picture

Assigned: bendeguz.csirmaz » Unassigned
Issue tags: -Needs tests
StatusFileSize
new1.49 KB
new5.09 KB

Here's the test.

tim.plunkett’s picture

Title: Clarify which block or section is being removed in layout builder dialog » Clarify which block or section is being removed in layout builder dialog

It's not clear why the "question" part (which is usually pretty standard across confirmation forms) is being shortened. Maybe it will be clear from screenshots?

bendeguz.csirmaz’s picture

Issue summary: View changes
StatusFileSize
new38.58 KB
new30.45 KB
new40.94 KB
new29.64 KB

Added screenshots.

tedbow’s picture

Status: Needs review » Needs work

@bendeguz.csirmaz thanks for the patch!

Just a few points

  1. +++ b/core/modules/layout_builder/src/Form/RemoveBlockForm.php
    @@ -27,10 +30,50 @@ class RemoveBlockForm extends LayoutRebuildConfirmFormBase {
    +    return $this->t('Remove Block');
    

    I guess we should put a ? on the end since this is still supposed to be a question.

  2. +++ b/core/modules/layout_builder/src/Form/RemoveBlockForm.php
    @@ -27,10 +30,50 @@ class RemoveBlockForm extends LayoutRebuildConfirmFormBase {
    +    return $this->t('<p>Are you sure you want to remove Block @admin_label?</p><p>This action cannot be undone.</p>', ['@admin_label' => $definition['admin_label']]);
    

    I don't think we should using the block plugin admin label here. If we do then blocks that have derivatives will all have the same label.

    Instead since all blocks in the layout builder have to have a label in the configuration I think we should get the label that user entered.

    Also "Block" here does not need to be capitalized..

    Maybe also change the order to
    Are you sure you want to remove the [label] block?

  3. +++ b/core/modules/layout_builder/src/Form/RemoveSectionForm.php
    @@ -23,7 +23,14 @@ public function getFormId() {
    +    return $this->t('Remove Section');
    

    add ?

  4. +++ b/core/modules/layout_builder/src/Form/RemoveSectionForm.php
    @@ -23,7 +23,14 @@ public function getFormId() {
    +    return $this->t('<p>Are you sure you want to remove Section @delta?</p><p>This action cannot be undone.</p>', ['@delta' => $this->delta]);
    

    since the delta starts a 0 this will display "Section 0" we should +1 to the delta when displaying.

re #8
I guess we don't have to shorten the question. I just wonder about adding more text to it, the block label, since it is already being cut off.

Maybe we could leave the question and then just add detail about which block will be removed in the description?

tim.plunkett’s picture

1) "Remove Block" is wrong, it would be "Remove block" (sentence case)

2) Is this trying to work around #3037124: Off-canvas dialog titles should not be visually truncated as well?

In the other parts of Layout Builder, we add the section number but visually hide it. And we use 1-indexed numbers not 0-indexed.

// Add one to the current delta since it is zero-indexed.
'#title' => $this->t('Add Block <span class="visually-hidden">in section @section, @region region</span>', ['@section' => $delta + 1, '@region' => $region_labels[$region]]),

From #3013770: Distinguish between the repeated text of buttons in Layout Builder UI

andrewmacpherson’s picture

Issue summary: View changes

I like the idea in #4, but there's a big gotcha for screen reader users.

I tested patch #7 with a mix of browsers (Edge, IE11, FF, Chrome, and Opera) and screen readers (most recent NVDA, JAWS, and Narrator) on Windows 10. In most cases, when the dialog opens:

  • The dialog title (and role) is announced,
  • Then focus shifts to the first interactive control in the dialog. In this case it is the remove button.
  • The plain text in the dialog is NOT announced. So the specific block name in #4.2 won't be apparent unless the user browses the dialog content. But they are already focused on the danger button.

IE11 with (with JAWS, NVDA, or Narrator) and Edge (with Narrator) were the only combinations which announced the dialog's plain text content when the dialog opens. Firefox and Chrome with NVDA are particularly important combinations which didn't announce the dialog content unless you expressly browse it with the screen reader.

So it looks like the safest way will be to put the block/section name in the dialog title.

I think it will work if these ducks are in a row:

andrewmacpherson’s picture

In the other parts of Layout Builder, we add the section number but visually hide it.

These are visually hidden to achieve compact buttons, I suppose. There's no reason to do hide the section number from the dialog title.

andrewmacpherson’s picture

Issue summary: View changes

removing the before after screenshots from the issue summary, which reflected the idea in #4.

bendeguz.csirmaz’s picture

Status: Needs work » Needs review
StatusFileSize
new3.32 KB
tim.plunkett’s picture

Thanks for the review and guidance @andrewmacpherson!

  1. +++ b/core/modules/layout_builder/src/Form/LayoutRebuildConfirmFormBase.php
    @@ -42,7 +42,7 @@
    -   * Constructs a new RemoveSectionForm.
    +   * Constructs a new LayoutRebuildConfirmFormBase.
    

    Fair change, but out of scope

  2. +++ b/core/modules/layout_builder/src/Form/RemoveBlockForm.php
    @@ -30,7 +30,13 @@ class RemoveBlockForm extends LayoutRebuildConfirmFormBase {
    +    return $this->t('Are you sure you want to remove the @label block?', ['@label' => $label]);
    

    Please use %label here to help differentiate it from the rest of the sentence

tedbow’s picture

Issue summary: View changes
Status: Needs review » Needs work
StatusFileSize
new34.94 KB
new34.32 KB

This looks after #16 addressed

re #16.2 the html will actually be stripped out in the off-canvas but I guess it can hurt if if used outside the dialog
Add screenshots of current patch to issue summary and also manually tested.

bendeguz.csirmaz’s picture

StatusFileSize
new1.18 KB
new2.71 KB
bendeguz.csirmaz’s picture

Status: Needs work » Needs review
andrewmacpherson’s picture

#18 addresses the points in #16

andrewmacpherson’s picture

Status: Needs review » Reviewed & tested by the community

  • webchick committed e5472e4 on 8.7.x
    Issue #3037550 by bendeguz.csirmaz, tedbow, andrewmacpherson, tim....
webchick’s picture

Status: Reviewed & tested by the community » Fixed

Great work, everyone! Love these accessibility wins!

Committed and pushed to 8.7.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.