[wp-trac] [WordPress Trac] #49517: Regression: the block editor toolbar visual order and DOM order mismatch

[WordPress Trac]

#49517: Regression: the block editor toolbar visual order and DOM order mismatch
---------------------------+-------------------------
 Reporter:  afercia        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  5.4
Component:  Editor         |    Version:  trunk
 Severity:  normal         |   Keywords:  needs-patch
  Focuses:  accessibility  |
---------------------------+-------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49517>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform