Description

SimilarlySimilarly to #61241 / #61243 the CSS flex row-reverse and column-reverse values for flex-direction introduce a mismatch between visual/reading and DOM order.

For more details about why this is a problem for accessibility and the very limited cases where these values can be used, please see #61241.

To prevent future usages of these values I'd like to porpose to add a new stylelint rule.

Currently, there are 5 occurrences of -reverse; in the *.scss files in the codebase:

packages/block-editor/src/hooks/block-hooks.scss:
  7: 		flex-direction: row-reverse;

packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss:
  8: 	flex-direction: column-reverse;

packages/block-library/src/form-input/style.scss:
  27: 		flex-direction: row-reverse;

packages/block-library/src/media-text/style.native.scss:
  10: 	flex-direction: row-reverse;
  17: 		flex-direction: column-reverse;

All these occurrences should be double checked and if they do alter visual/DOM order, the implementation should be changed.

Step-by-step reproduction instructions

• Run a search in the codebase for the string -reverse;.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes