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

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
Comment #2
andrewmacpherson commentedComment #3
andrewmacpherson commentedThis 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.
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.
Comment #4
tedbow@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?
Comment #5
bendeguz.csirmaz commentedHere's an initial patch.
Comment #6
tedbowComment #7
bendeguz.csirmaz commentedHere's the test.
Comment #8
tim.plunkettIt'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?
Comment #9
bendeguz.csirmaz commentedAdded screenshots.
Comment #10
tedbow@bendeguz.csirmaz thanks for the patch!
Just a few points
I guess we should put a ? on the end since this is still supposed to be a question.
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?
add ?
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?
Comment #11
tim.plunkett1) "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.
From #3013770: Distinguish between the repeated text of buttons in Layout Builder UI
Comment #12
andrewmacpherson commentedI 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:
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:
Comment #13
andrewmacpherson commentedThese are visually hidden to achieve compact buttons, I suppose. There's no reason to do hide the section number from the dialog title.
Comment #14
andrewmacpherson commentedremoving the before after screenshots from the issue summary, which reflected the idea in #4.
Comment #15
bendeguz.csirmaz commentedComment #16
tim.plunkettThanks for the review and guidance @andrewmacpherson!
Fair change, but out of scope
Please use
%labelhere to help differentiate it from the rest of the sentenceComment #17
tedbowThis 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.
Comment #18
bendeguz.csirmaz commentedComment #19
bendeguz.csirmaz commentedComment #20
andrewmacpherson commented#18 addresses the points in #16
Comment #21
andrewmacpherson commentedComment #23
webchickGreat work, everyone! Love these accessibility wins!
Committed and pushed to 8.7.x. Thanks!