Make WordPress Core

Changeset 57679


Ignore:
Timestamp:
02/21/2024 05:32:41 PM (4 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/list-tables.css

    r57580 r57679  
    15921592}
    15931593
    1594 .plugin-card .column-description .authors {
    1595     order: 1;
    1596 }
    1597 
    1598 .plugin-card .column-description .plugin-dependencies {
    1599     order: 2;
    1600 }
    1601 
    16021594.plugin-card .column-description p:empty {
    16031595    display: none;
     
    16441636    .plugin-card .plugin-dependency-name {
    16451637        flex-basis: 69%;
    1646     }
    1647     .plugin-card .plugin-dependency .more-details-link {
    16481638    }
    16491639}
  • trunk/src/wp-admin/includes/class-wp-plugin-install-list-table.php

    r57545 r57679  
    525525            // Remove any HTML from the description.
    526526            $description = strip_tags( $plugin['short_description'] );
    527 
    528             $description .= $this->get_dependencies_notice( $plugin );
    529527
    530528            /**
     
    676674                    <p class="authors"><?php echo $author; ?></p>
    677675                </div>
     676                <?php echo $this->get_dependencies_notice( $plugin ); ?>
    678677            </div>
    679678            <div class="plugin-card-bottom">
Note: See TracChangeset for help on using the changeset viewer.