🔒 EXCLUSIVE: Changeset/ - High Quality

Get WordPress

Make WordPress Core

Changeset 55971


Ignore:
Timestamp:
06/21/2023 09:45:52 PM (3 years ago)
Author:
joedolson
Message:

Administration: Set accessible state for list table headers.

Implement aria-sort and change icon states to indicate current sort for list tables. Allow screen reader users to get context about the current sort and allow sighted users to know how the table is currently sorted.

Props afercia, rianrietveld, joedolson, alexstine, johnjamesjacoby.
Fixes #32170.

Location:
trunk/src/wp-admin
Files:
11 edited

Legend:

Unmodified
Added
Removed

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

    r55954 r55971  
    462462}
    463463
     464.sorting-indicators {
     465    display: grid;
     466}
     467
    464468.sorting-indicator {
    465469    display: block;
    466     visibility: hidden;
    467470    width: 10px;
    468471    height: 4px;
    469     margin-top: 8px;
     472    margin-top: 4px;
    470473    margin-left: 7px;
    471474}
    472475
    473476.sorting-indicator:before {
    474     content: "\f142";
    475477    font: normal 20px/1 dashicons;
    476478    speak: never;
    … …  
    479481    top: -4px;
    480482    left: -8px;
    481     color: #3c434a;
    482483    line-height: 0.5;
    483484    position: relative;
    … …  
    486487    -moz-osx-font-smoothing: grayscale;
    487488    text-decoration: none !important;
    488     color: #3c434a;
    489 }
    490 
    491 .column-comments .sorting-indicator:before {
    492     top: 0;
    493     left: -10px;
    494 }
    495 
    496 th.sorted.asc .sorting-indicator:before,
    497 th.desc:hover span.sorting-indicator:before,
    498 th.desc a:focus span.sorting-indicator:before {
     489    color: #a7aaad;
     490}
     491
     492.sorting-indicator.asc:before {
    499493    content: "\f142";
    500494}
    501495
    502 th.sorted.desc .sorting-indicator:before,
    503 th.asc:hover span.sorting-indicator:before,
    504 th.asc a:focus span.sorting-indicator:before {
     496.sorting-indicator.desc:before {
    505497    content: "\f140";
     498}
     499
     500th.sorted.desc .sorting-indicator.desc:before {
     501    color: #1d2327;
     502}
     503
     504th.sorted.asc .sorting-indicator.asc:before {
     505    color: #1d2327;
     506}
     507
     508th.sorted.asc a:focus .sorting-indicator.asc:before,
     509th.sorted.asc:hover .sorting-indicator.asc:before,
     510th.sorted.desc a:focus .sorting-indicator.desc:before,
     511th.sorted.desc:hover .sorting-indicator.desc:before {
     512    color: #a7aaad;
     513}
     514
     515th.sorted.asc a:focus .sorting-indicator.desc:before,
     516th.sorted.asc:hover .sorting-indicator.desc:before,
     517th.sorted.desc a:focus .sorting-indicator.asc:before,
     518th.sorted.desc:hover .sorting-indicator.asc:before {
     519    color: #1d2327;
    506520}
    507521
    … …  
    614628}
    615629
    616 .fixed .column-comments .sorting-indicator {
    617     margin-top: 3px;
    618 }
    619 
    620630#menu-locations-wrap .widefat {
    621631    width: 60%;
    … …  
    643653    float: left;
    644654    cursor: pointer;
    645 }
    646 
    647 th.sorted .sorting-indicator,
    648 th.desc:hover span.sorting-indicator,
    649 th.desc a:focus span.sorting-indicator,
    650 th.asc:hover span.sorting-indicator,
    651 th.asc a:focus span.sorting-indicator {
    652     visibility: visible;
    653655}
    654656

  • trunk/src/wp-admin/includes/class-wp-comments-list-table.php

    r55954 r55971  
    541541    protected function get_sortable_columns() {
    542542        return array(
    543             'author'   => 'comment_author',
    544             'response' => 'comment_post_ID',
     543            'author'   => array( 'comment_author', false, __( 'Author' ), __( 'Table ordered by Comment Author.' ) ),
     544            'response' => array( 'comment_post_ID', false, _x( 'In Response To', 'column name' ), __( 'Table ordered by Post Replied To.' ) ),
    545545            'date'     => 'comment_date',
    546546        );
    … …  
    581581        ?>
    582582<table class="wp-list-table <?php echo implode( ' ', $this->get_table_classes() ); ?>">
     583        <?php
     584        if ( ! isset( $_GET['orderby'] ) ) {
     585            // In the initial view, Comments are ordered by comment's date but there's no column for that.
     586            echo '<caption class="screen-reader-text">' . __( 'Ordered by Comment Date, descending.' ) . '</p>';
     587        } else {
     588            $this->print_table_description();
     589        }
     590        ?>
    583591    <thead>
    584592    <tr>

  • trunk/src/wp-admin/includes/class-wp-links-list-table.php

    r55954 r55971  
    144144    protected function get_sortable_columns() {
    145145        return array(
    146             'name'    => 'name',
    147             'url'     => 'url',
    148             'visible' => 'visible',
    149             'rating'  => 'rating',
     146            'name'    => array( 'name', false, _x( 'Name', 'link name' ), __( 'Table ordered by Name.' ), 'asc' ),
     147            'url'     => array( 'url', false, __( 'URL' ), __( 'Table ordered by URL.' ) ),
     148            'visible' => array( 'visible', false, __( 'Visible' ), __( 'Table ordered by Visibility.' ) ),
     149            'rating'  => array( 'rating', false, __( 'Rating' ), __( 'Table ordered by Rating.' ) ),
    150150        );
    151151    }

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

    r55954 r55971  
    11101110     * The format is:
    11111111     * - `'internal-name' => 'orderby'`
     1112     * - `'internal-name' => array( 'orderby', bool, 'abbr', 'orderby-text', 'initially-sorted-column-order' )` -
    11121113     * - `'internal-name' => array( 'orderby', 'asc' )` - The second element sets the initial sorting order.
    11131114     * - `'internal-name' => array( 'orderby', true )`  - The second element makes the initial order descending.
    11141115     *
    1115      * @since 3.1.0
     1116     * In the second format, passing true as second parameter will make the initial
     1117     * sorting order be descending. Following parameters add a short column name to
     1118     * be used as 'abbr' attribute, a translatable string for the current sorting
     1119     * and the initial order for the initial sorted column, 'asc' or 'desc' (default: false).
     1120     *
     1121     * @since 3.1.0
     1122     * @since 6.3.0 Added 'abbr', 'orderby-text' and 'initially-sorted-column-order'.
    11161123     *
    11171124     * @return array
    … …  
    12541261