From 6263175b8de9136ab7efbdabc0de1d71226a86e2 Mon Sep 17 00:00:00 2001
From: Jb Audras <audrasjb@git.wordpress.org>
Date: Fri, 25 Mar 2022 21:18:45 +0000
Subject: [PATCH] Twenty Nineteen: Override flex order in comment form.

This change updates Twenty Nineteen bundled theme to fix the DOM order in the comment form, and to add a new `.comment-form-wrapper` class to change `flex` display to `block` for this specific area.

Props garrett-eclipse, audrasjb, sabernhardt.
Fixes #46600.


git-svn-id: https://develop.svn.wordpress.org/trunk@52993 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-content/themes/twentynineteen/comments.php          | 7 +++----
 .../themes/twentynineteen/sass/site/primary/_comments.scss | 5 +++++
 src/wp-content/themes/twentynineteen/style-rtl.css         | 5 +++++
 src/wp-content/themes/twentynineteen/style.css             | 5 +++++
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/wp-content/themes/twentynineteen/comments.php b/src/wp-content/themes/twentynineteen/comments.php
index d00ac46118..9ef3fd6acc 100644
--- a/src/wp-content/themes/twentynineteen/comments.php
+++ b/src/wp-content/themes/twentynineteen/comments.php
@@ -61,7 +61,7 @@ $discussion = twentynineteen_get_discussion_data();
 			get_template_part( 'template-parts/post/discussion', 'meta' );
 		}
 		?>
-	</div><!-- .comments-title-flex -->
+	</div><!-- .comments-title-wrap -->
 	<?php
 	if ( have_comments() ) :
 
@@ -101,10 +101,9 @@ $discussion = twentynineteen_get_discussion_data();
 		// Show comment form at bottom if showing newest comments at the bottom.
 		if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
 			?>
-			<div class="comment-form-flex">
-				<span class="screen-reader-text"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></span>
+			<div class="comment-form-flex comment-form-wrapper">
+				<h2 class="comments-title"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
 				<?php twentynineteen_comment_form( 'asc' ); ?>
-				<h2 class="comments-title" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
 			</div>
 			<?php
 		endif;
diff --git a/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss b/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss
index 1e0af67ca4..dc7b80c15b 100644
--- a/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss
+++ b/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss
@@ -114,6 +114,11 @@
 	}
 }
 
+.comment-form-wrapper,
+.comment-form-wrapper .comments-title {
+	display: block;
+}
+
 .comment-list {
 	list-style: none;
 	padding: 0;
diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css
index 10b62e13b4..82c8cb4d79 100644
--- a/src/wp-content/themes/twentynineteen/style-rtl.css
+++ b/src/wp-content/themes/twentynineteen/style-rtl.css
@@ -4693,6 +4693,11 @@ body.page .main-navigation {
   display: block;
 }
 
+.comment-form-wrapper,
+.comment-form-wrapper .comments-title {
+  display: block;
+}
+
 .comment-list {
   list-style: none;
   padding: 0;
diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css
index 73a5ce75e7..531e4013cc 100644
--- a/src/wp-content/themes/twentynineteen/style.css
+++ b/src/wp-content/themes/twentynineteen/style.css
@@ -4699,6 +4699,11 @@ body.page .main-navigation {
   display: block;
 }
 
+.comment-form-wrapper,
+.comment-form-wrapper .comments-title {
+  display: block;
+}
+
 .comment-list {
   list-style: none;
   padding: 0;