Opened 5 years ago
Closed 5 years ago
#49517 closed defect (bug) (reported-upstream)
Regression: the block editor toolbar visual order and DOM order mismatch
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | 5.4 | Priority: | normal |
| Severity: | normal | Version: | 5.4 |
| Component: | Editor | Keywords: | needs-patch has-screenshots |
| Focuses: | accessibility | Cc: |
Description
This change in the block editor: https://github.com/WordPress/gutenberg/pull/19623 changed the order of the main containers within the editor toolbar.
The visual order and the DOM order now mismatch, which is a serious WCAG failure.
CSS properties that alter the visual order of elements should rarely, if ever, be used. In this case, the DOM order of edit-post-header__toolbar and edit-post-header__settings was swapped. Then, the visual order is changed by the means of the flex property flex-direction: row-reverse;.
More details: https://github.com/WordPress/gutenberg/pull/19623#issuecomment-591503443
This should be reverted soon as it's a serious accessibility regression compared to WordPress 5.3.2.
Also, it doesn't work in Internet Explorer 11 :) Screenshot incoming.
Attachments (2)
Change History (6)
This ticket was mentioned in Slack in #core by david.baumwald. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
#4
@
5 years ago
- Resolution set to reported-upstream
- Status changed from new to closed
Thank you for reporting this issue @afercia! I'm closing this ticket as https://github.com/WordPress/gutenberg/pull/19623 was reverted.
Elements order in modern browsers (Chrome)