sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@44757 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-02-20 22:08:23 +00:00
parent cf8c68fe38
commit 6a32cc13e2
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/css/list-tables.css
View File

@ -152,10 +152,19 @@
overflow: hidden;
}
#replysubmit .reply-submit-buttons {
margin-bottom: 0;
}
#replysubmit .button {
margin-right: 5px;
}
#replysubmit .spinner {
float: none;
margin: -4px 0 0;
}
#replyrow.inline-edit-row fieldset.comment-reply {
font-size: inherit;
line-height: inherit;

7
src/wp-admin/includes/template.php
View File

@ -479,16 +479,15 @@ function wp_comment_reply( $position = 1, $checkbox = false, $mode = 'single', $
</div>
<div id="replysubmit" class="submit">
<p>
<a href="#comments-form" class="save button button-primary alignright">
<p class="reply-submit-buttons">
<a href="#comments-form" class="save button button-primary">
<span id="addbtn" style="display: none;"><?php _e( 'Add Comment' ); ?></span>
<span id="savebtn" style="display: none;"><?php _e( 'Update Comment' ); ?></span>
<span id="replybtn" style="display: none;"><?php _e( 'Submit Reply' ); ?></span>
</a>
<a href="#comments-form" class="cancel button alignleft"><?php _e( 'Cancel' ); ?></a>
<a href="#comments-form" class="cancel button"><?php _e( 'Cancel' ); ?></a>
<span class="waiting spinner"></span>
</p>
<br class="clear" />
<div class="notice notice-error notice-alt inline hidden">
<p class="error"></p>
</div>