From 875ed40ffb48bd8e7ba9c012eb3209c720b80b21 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 1 Oct 2015 14:51:25 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@34743 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/edit.css                    | 11 +++++---
 src/wp-admin/css/list-tables.css             | 26 ++++++++++++++-----
 src/wp-admin/includes/template-functions.php | 27 ++++++++++++--------
 src/wp-admin/js/edit-comments.js             |  6 ++---
 4 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 7eb54439b6..e8fc844d40 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -24,11 +24,15 @@
 }
 
 #save-action .spinner,
-#show-comments a,
-#show-comments .spinner {
+#show-comments a {
 	float: left;
 }
 
+#show-comments .spinner {
+	float: none;
+	margin-top: 0;
+}
+
 #lost-connection-notice .spinner {
 	visibility: visible;
 	float: left;
@@ -247,7 +251,8 @@ ul.category-tabs li,
 #normal-sortables .postbox #replyrow .submit {
 	float: none;
 	margin: 0;
-	padding: 0 7px 5px;
+	padding: 5px 7px 10px;
+	overflow: hidden;
 }
 
 #side-sortables .submitbox .submit input,
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 47ff6bef46..03dbff4848 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -152,7 +152,8 @@
 
 #replysubmit {
 	margin: 0;
-	padding: 0 5px 3px;
+	padding: 5px 7px 10px;
+	overflow: hidden;
 	text-align: center;
 }
 
@@ -166,11 +167,23 @@
 	text-align: center;
 }
 
-#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;
 }
 
 #edithead .inside,
@@ -433,7 +446,6 @@ table.media .column-title .filename {
 }
 
 #commentsdiv #edithead .inside input {
-	vertical-align: middle;
 	width: 160px;
 }
 
diff --git a/src/wp-admin/includes/template-functions.php b/src/wp-admin/includes/template-functions.php
index 91a50fc5a7..1787783ef1 100644
--- a/src/wp-admin/includes/template-functions.php
+++ b/src/wp-admin/includes/template-functions.php
@@ -380,8 +380,21 @@ function wp_comment_reply( $position = 1, $checkbox = false, $mode = 'single', $
 <?php else : ?>
 <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">
 		<label for="author-name"><?php _e( 'Name' ) ?></label>
@@ -397,14 +410,6 @@ function wp_comment_reply( $position = 1, $checkbox = false, $mode = 'single', $
 		<label for="author-url"><?php _e('URL') ?></label>
 		<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>
 
 	<p id="replysubmit" class="submit">
@@ -415,7 +420,6 @@ function wp_comment_reply( $position = 1, $checkbox = false, $mode = 'single', $
 	<a href="#comments-form" class="cancel button-secondary alignleft"><?php _e('Cancel'); ?></a>
 	<span class="waiting spinner"></span>
 	<span class="error" style="display:none;"></span>
-	<br class="clear" />
 	</p>
 
 	<input type="hidden" name="action" id="action" value="" />
@@ -430,6 +434,7 @@ function wp_comment_reply( $position = 1, $checkbox = false, $mode = 'single', $
 		if ( current_user_can( 'unfiltered_html' ) )
 			wp_nonce_field( 'unfiltered-html-comment', '_wp_unfiltered_html_comment', false );
 	?>
+	</fieldset>
 <?php if ( $table_row ) : ?>
 </td></tr></tbody></table>
 <?php else : ?>
diff --git a/src/wp-admin/js/edit-comments.js b/src/wp-admin/js/edit-comments.js
index 3ac789df5b..06597a83b1 100644
--- a/src/wp-admin/js/edit-comments.js
+++ b/src/wp-admin/js/edit-comments.js
@@ -676,7 +676,7 @@ commentReply = {
 			$('#author-url', editRow).val( $('div.author-url', rowData).text() );
 			$('#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();
 
 			if ( h > 120 ) {
@@ -691,12 +691,12 @@ commentReply = {
 			});
 		} 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);