Plugins dependencies notice alters visual and DOM order in the plugin cards

[afercia]

Noticed while testing https://core.trac.wordpress.org/ticket/22316

For accessibility, visual order and DOM order must alwasy match when they affect 'meaning and functionality'.

Basically, altering the visual order via CSS properties like order and the various flexbox/grid reverse properties must be avoided. It is only allowed for purely decorative elements like, for example, the position of an icon within a button (there was such a case in the Gutenberg editor).

The CSS recently added for the plugin dependencies alters the reading order of elements within the plugin cards in the 'Add Plugin' admin pave. See attached screenshot where I added numbers to illustrate the DOM order doesn't match the visual order.

[costdev]

Thanks for reporting this @afercia!

I'll get working on a patch.

Moving to 6.5 for visibility and the Plugins component as it's more about the style and output of a plugin's data than it upgrade/installation.

[afercia]

Sure, thanks @costdev and @afragen for the very fast feedback.

In 57545, the notice for listing dependencies in a plugin card were styled with the CSS order properties. This created a mismatch between the visual order and DOM order of elements in the plugin card.

For accessibility, visual order and DOM order must always match when they affect meaning and functionality.

This removes the CSS order properties and outputs the dependencies notice later, making the visual and DOM order match.

### Before

### After

[costdev]

@afercia I've submitted ​PR 6078 which removes the CSS order properties and corrects the DOM order.

Please test 🙂 and remember to build as this makes CSS changes.

When you mention "the various flexbox/grid reverse properties", can you confirm whether this was just informative, or did you see any use of reverse properties by Plugin Dependencies? I want to make sure I don't miss anything.

Thanks!

Tested. Works as designed. ✅

[huzaifaalmesbah]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6078

Screenshots

Before Apply Patch	After Apply Patch ✅

[huzaifaalmesbah]

I think the "plugin-dependencies" section should always set the "plugin-card-top" button area.

[afercia]

When you mention "the various flexbox/grid reverse properties", can you confirm whether this was just informative, or did you see any use of reverse properties by Plugin Dependencies? I want to make sure I don't miss anything.

@costdev thanks. It was informative.

[costdev]

Thanks @afercia!

Several testers have confirmed the patch works.

@afercia As the reporter, do you agree that ​PR 6078 resolves the reported issue and is ready for me to commit?

The order is fixed so from an a11y perspective LGTM to me.

However, I noticed an unrelated issue: when the plugin name and description are short and take little vertical space, the plugin logo and the dependencies notice may overlap. Screenshot:

[afercia]

@costdev yes I just tested the PR and it solves the a11y issue. I left a comment about an unrelated layout issue.

@afercia Nicely spotted! I'll create a new ticket for this.

In the meantime, I've done a little digging into the overlap issue and to pave the way for a fix, I've moved the .plugin-dependencies notice DIV outside of the .column-description DIV. It's not part of the description anyway so this was a worthwhile change while we're here.

Can you give the PR another quick test to make sure everything's still working okay for the DOM order?

[costdev]

@huzaifaalmesbah Good idea about keeping the notice to the bottom of the card for consistency!

Let's address this in #60501.

[bosskhj]

Test Report

Description

When I apply the patch, it works perfectly.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6078

Environment

• WordPress: 6.5-alpha-56966-src
• PHP: 8.2.15
• Server: nginx/1.25.3
• Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
• Browser: Chrome 121.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshot after patch apply

I just re-tested this PR and I can confirm it solves the order issue.
Besides the overlapping problem mentioned in a previous comment at ​https://github.com/WordPress/wordpress-develop/pull/6078#issuecomment-1938337017 that should be addressed separately, this looks good to me @costdev thank you ❤️

[costdev]

​PR 6078 has approval from Andrea.

The overlapping issue will be resolved in #60501.

Prepping for commit now.

[costdev]

In 57679:

Plugins: Output plugin card elements in the order they're displayed.

Previously, the notice for listing dependencies in a plugin card was styled with the CSS order properties. This created a mismatch between the visual order and DOM order of elements in the plugin card.

For accessibility, visual order and DOM order must always match when they affect meaning and functionality.

This removes the CSS order properties and outputs the dependencies notice later, making the visual and DOM order match. Some unused/empty CSS is also removed.

Follow-up to [57545].

Props afercia, afragen, bosskhj, huzaifaalmesbah, mukesh27, costdev.
Fixes #60488.

Committed in r57679.