Changeset 34743

Timestamp:

10/01/2015 02:51:25 PM (8 years ago)

Author:

afercia

Message:

In wp_comment_reply() change the H5 headings in fieldset legends for better accessibility.

Also, add a "Edit Comment" legend before the Quick Edit form to pair it with "Reply to Comment" and "Add new Comment" and move the Name, Email, and URL fields after the Comment textarea.

Props joedolson, afercia.

Fixes #33757.

Location:

trunk/src/wp-admin

Files:

• css/edit.css (modified) (2 diffs)
• css/list-tables.css (modified) (3 diffs)
• includes/template-functions.php (modified) (4 diffs)
• js/edit-comments.js (modified) (2 diffs)

trunk/src/wp-admin/css/edit.css

@@ -25 +25 @@
 
 #save-action .spinner,
-#show-comments a,
+#show-comments a {
+    float: left;
+}
+
 #show-comments .spinner {
-    float: left;
+    float: none;
+    margin-top: 0;
 }
 
@@ -248 +252 @@
     float: none;
     margin: 0;
-    padding: 0 7px 5px;
+    padding: 5px 7px 10px;
+    overflow: hidden;
 }
 

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

@@ -153 +153 @@
 #replysubmit {
     margin: 0;
-    padding: 0 5px 3px;
+    padding: 5px 7px 10px;
+    overflow: hidden;
     text-align: center;
 }
@@ -167 +168 @@
 }
 
-#replyrow h5 {
-    margin: .2em 0 0;
-    padding: 0 5px;
-    line-height: 1.4em;
-    font-size: 1em;
+#replyrow.inline-edit-row fieldset.comment-reply {
+    font-size: inherit;
+    line-height: inherit;
+}
+
+#replyrow legend {
+    margin: 0;
+    padding: .2em 5px 0;
+    font-size: 13px;
+    line-height: 1.4;
+    font-weight: 600;
+}
+
+#replyrow.inline-edit-row label {
+    display: inline;
+    vertical-align: baseline;
+    line-height: inherit;
 }
 
@@ -434 +447 @@
 
 #commentsdiv #edithead .inside input {
-    vertical-align: middle;
     width: 160px;
 }

trunk/src/wp-admin/includes/template-functions.php

@@ -381 +381 @@
 <div id="com-reply" style="display:none;"><div id="replyrow" style="display:none;">
 <?php endif; ?>
-    <div id="replyhead" style="display:none;"><h5><?php _e( 'Reply to Comment' ); ?></h5></div>
-    <div id="addhead" style="display:none;"><h5><?php _e('Add new Comment'); ?></h5></div>
+    <fieldset class="comment-reply">
+    <legend>
+        <span class="hidden" id="editlegend"><?php _e( 'Edit Comment' ); ?></span>
+        <span class="hidden" id="replyhead"><?php _e( 'Reply to Comment' ); ?></span>
+        <span class="hidden" id="addhead"><?php _e( 'Add new Comment' ); ?></span>
+    </legend>
+
+    <div id="replycontainer">
+    <label for="replycontent" class="screen-reader-text"><?php _e( 'Comment' ); ?></label>
+    <?php
+    $quicktags_settings = array( 'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close' );
+    wp_editor( '', 'replycontent', array( 'media_buttons' => false, 'tinymce' => false, 'quicktags' => $quicktags_settings ) );
+    ?>
+    </div>
+
     <div id="edithead" style="display:none;">
         <div class="inside">
@@ -398 +411 @@
         <input type="text" id="author-url" name="newcomment_author_url" class="code" size="103" value="" />
         </div>
-        <div style="clear:both;"></div>
-    </div>
-
-    <div id="replycontainer">
-    <?php
-    $quicktags_settings = array( 'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close' );
-    wp_editor( '', 'replycontent', array( 'media_buttons' => false, 'tinymce' => false, 'quicktags' => $quicktags_settings ) );
-    ?>
     </div>
 
@@ -416 +421 @@
     <span class="waiting spinner"></span>
     <span class="error" style="display:none;"></span>
-    <br class="clear" />
     </p>
 
@@ -431 +435 @@
             wp_nonce_field( 'unfiltered-html-comment', '_wp_unfiltered_html_comment', false );
     ?>
+    </fieldset>
 <?php if ( $table_row ) : ?>
 </td></tr></tbody></table>

trunk/src/wp-admin/js/edit-comments.js

@@ -677 +677 @@
             $('#status', editRow).val( $('div.comment_status', rowData).text() );
             $('#replycontent', editRow).val( $('textarea.comment', rowData).val() );
-            $('#edithead, #savebtn', editRow).show();
+            $( '#edithead, #editlegend, #savebtn', editRow ).show();
             $('#replyhead, #replybtn, #addhead, #addbtn', editRow).hide();
 
@@ -692 +692 @@
         } else if ( action == 'add' ) {
             $('#addhead, #addbtn', editRow).show();
-            $('#replyhead, #replybtn, #edithead, #savebtn', editRow).hide();
+            $( '#replyhead, #replybtn, #edithead, #editlegend, #savebtn', editRow ) .hide();
             $('#the-comment-list').prepend(editRow);
             $('#replyrow').fadeIn(300);
         } else {
             replyButton = $('#replybtn', editRow);
-            $('#edithead, #savebtn, #addhead, #addbtn', editRow).hide();
+            $( '#edithead, #editlegend, #savebtn, #addhead, #addbtn', editRow ).hide();
             $('#replyhead, #replybtn', editRow).show();
             c.after(editRow);