Changeset 57679

Timestamp:

02/21/2024 05:32:41 PM (7 months ago)

Author:

costdev

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (2 diffs)
• includes/class-wp-plugin-install-list-table.php (modified) (2 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -1592 +1592 @@
 }
 
-.plugin-card .column-description .authors {
-    order: 1;
-}
-
-.plugin-card .column-description .plugin-dependencies {
-    order: 2;
-}
-
 .plugin-card .column-description p:empty {
     display: none;
@@ -1644 +1636 @@
     .plugin-card .plugin-dependency-name {
         flex-basis: 69%;
-    }
-    .plugin-card .plugin-dependency .more-details-link {
     }
 }

trunk/src/wp-admin/includes/class-wp-plugin-install-list-table.php

@@ -525 +525 @@
             // Remove any HTML from the description.
             $description = strip_tags( $plugin['short_description'] );
-
-            $description .= $this->get_dependencies_notice( $plugin );
 
             /**
@@ -676 +674 @@
                     <p class="authors"><?php echo $author; ?></p>
                 </div>
+                <?php echo $this->get_dependencies_notice( $plugin ); ?>
             </div>
             <div class="plugin-card-bottom">