When off-canvas dialogs have long titles, the title is truncated. In some cases, the missing text is important to understand the purpose of the dialog.
Example: in layout builder, if you click "remove block", the off-canvas dialog opens, but the visible text is "Are you sure you want to re..."
Firefox 65 screenshot:
The full title is present in the DOM, but is being truncated by CSS. The relevant rule from jQuery UI, in core/assets/vendor/jquery.ui/themes/base/dialog.css:
.ui-dialog .ui-dialog-title {
white-space: nowrap;
}
This is a WCAG level-A failure (3.3.2 "Labels and instructions).
So far this only seems to be a problem for the off-canvas dialogs. (In centrally positioned dialogs, the title will wrap to a second line when the viewport is narrow.)
Don't truncate the dialog title.
If necessary, it should wrap to a second line in the dialog title area.
TODO
TODO
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | 3037124-whitespace-10.patch | 531 bytes | tim.plunkett |
| #5 | 3037124-5-after.png | 33.9 KB | bnjmnm |
| #5 | 3037124-5-before.png | 29.46 KB | bnjmnm |
| #5 | 3037124-5.patch | 603 bytes | bnjmnm |
| off-canvas-dialog-title-ellipsis-firefox65.png | 8.17 KB | andrewmacpherson |
Comments
Comment #2
andrewmacpherson commentedComment #3
andrewmacpherson commentedThe delete block and remove section dialogs suffer from this in particular.
This isn't actually layout builder's fault, but I think it's a pretty major issue nonetheless. Tentatively marking this as a stable blocker.
I'm not really sure that every task in layout builder should use the off-canvas dialog style. Off-canvas is good for tasks where you don't want to obscure the page content; such as moving a block. But for a danger/confirm question like removing a section, a centrally-placed dialog would be better IMO - it's something urgent which needs to command attention.
Comment #4
andrewmacpherson commentedClarifying title. The full dialog title is present in the DOM, so screen readers will convey it. This is a visual problem only.
Comment #5
bnjmnmAdded
white-space: normal;to.ui-dialog.ui-dialog-off-canvas .ui-dialog-title.Before and after screenshots attached.
Comment #6
tim.plunkettThanks for this, that's quite an elegant fix!
Comment #7
xjmOh thank goodness. This causes soooo many UX/a11y issues. For this reason, I'm committing this even though it changes Stable, as per the frontend BC policy notes from @Cottser:
In this case the worst that would happen is ugly output for some themes, which is vastly preferable to critical text being invisible.
As this is a disruptive change (because it changes Stable), I've not backported this fix to 8.6.x.
Thank you for finally fixing this!!
Comment #9
xjmOops, we also need to change this in
core/misc. Tim will post a quick followup for that.Comment #10
tim.plunkettCopied 1:1 from stable. Nice catch @xjm!
Comment #12
xjmCommitted the followup. Thanks @tim.plunkett!