WordPress.org

Make WordPress Core

Changeset 44757


Ignore:
Timestamp:
02/20/2019 10:08:23 PM (20 months ago)
Author:
afercia
Message:

Accessibility: Improve buttons placement in the Comments Quick edit/Reply form.

Proximity of related information is an inclusive design principle that benefits everyone and it's particularly important for users with reduced visual field, low vision, or other vision or cognitive impairments. User interface controls that are logically grouped should be placed close to each other.
Also, this change makes the buttons visual order and the DOM order match.

Fixes #45972.

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

Legend:

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

    r44722 r44757  
    153153}
    154154
     155#replysubmit .reply-submit-buttons {
     156    margin-bottom: 0;
     157}
     158
    155159#replysubmit .button {
    156160    margin-right: 5px;
     161}
     162
     163#replysubmit .spinner {
     164    float: none;
     165    margin: -4px 0 0;
    157166}
    158167
  • trunk/src/wp-admin/includes/template.php

    r44643 r44757  
    480480
    481481    <div id="replysubmit" class="submit">
    482         <p>
    483             <a href="#comments-form" class="save button button-primary alignright">
     482        <p class="reply-submit-buttons">
     483            <a href="#comments-form" class="save button button-primary">
    484484                <span id="addbtn" style="display: none;"><?php _e( 'Add Comment' ); ?></span>
    485485                <span id="savebtn" style="display: none;"><?php _e( 'Update Comment' ); ?></span>
    486486                <span id="replybtn" style="display: none;"><?php _e( 'Submit Reply' ); ?></span>
    487487            </a>
    488             <a href="#comments-form" class="cancel button alignleft"><?php _e( 'Cancel' ); ?></a>
     488            <a href="#comments-form" class="cancel button"><?php _e( 'Cancel' ); ?></a>
    489489            <span class="waiting spinner"></span>
    490490        </p>
    491         <br class="clear" />
    492491        <div class="notice notice-error notice-alt inline hidden">
    493492            <p class="error"></p>
Note: See TracChangeset for help on using the changeset viewer.