Link control: Cancel and Save buttons visual order and DOM order mismatch

[afercia]

Description

The link control UI provides two buttons: Cancel and Save.
These buttons visual order mismatches the DOM order. For accessibility, visual order and DOM order must always match.

There may be exceptions for decorative elements that don't impact meaning and operability but, in general, the usage of CSS properties that alter the visual order like all the flex / grid *-reverse and order properties should never be used.

Introeuced in #46933. Quoting the test instructions from that PR:

Specifically check that the tab order of the Link Control allows for Apply as the first tab stop (and thus the primary option) but also allows access to Cancel as the secondary stop.

It appears the altered order was intentional. However, this is an accessibility barriere and an explicit WCAG violation. It's important to make all designers and developers aware that visual order and DOM order must always match.

As far as I can tell, the link control is used in the link inline UI and also in the media replace flow UI. Screenshots:

Aside: notice the media replace popover has some extra, inconsistent, padding around the buttons.

Step-by-step reproduction instructions

• Edit a post, select some text and add a link.
• Select the link in the text. A popover opens. Click the pencil 'Edit' button.
• A new UI opens within the popover, to edit the link.
• Tab through the focusable elements.
• Observe the Save button receives focus first, although it is placed on the right.
• Observe the Cancel button receives focus second, althouhg it is placed on the left.
• Add an Image block.
• Select the image and click 'Replace' in the block toolbar.
• Click the pencil 'Edit' button.
• A new UI opens within the popover, to edit the image URL.
• Tab through the focusable elements.
• Observe the Save button receives focus first, although it is placed on the right.
• Observe the Cancel button receives focus second, althouhg it is placed on the left.

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