From 01bc0b97720a74760f8b24723163bf583c5ed90c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 1 Apr 2019 15:07:30 +0000
Subject: [PATCH] Accessibility: Improve the Site Health accordions.

- removes the definition list and uses the markup from the ARIA Authoring Practices example
- removes incorrect ARIA roles
- avoids ARIA landmark regions proliferation

Props mukesh27 for the initial patch.
Fixes #46714.


git-svn-id: https://develop.svn.wordpress.org/trunk@45087 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/site-health.css  | 10 +++++++---
 src/wp-admin/site-health-info.php | 26 +++++++++++++-------------
 src/wp-admin/site-health.php      | 16 ++++++++--------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index a9c6461b46..ec345ec04b 100644
--- a/src/wp-admin/css/site-health.css
+++ b/src/wp-admin/css/site-health.css
@@ -271,12 +271,16 @@
 	border: 1px solid #e2e4e7;
 }
 
-.health-check-accordion dt {
-	font-weight: 600;
+.health-check-accordion-heading {
+	margin: 0;
 	border-top: 1px solid #e2e4e7;
+	font-size: inherit;
+	line-height: inherit;
+	font-weight: 600;
+	color: inherit;
 }
 
-.health-check-accordion dt:first-child {
+.health-check-accordion-heading:first-child {
 	border-top: none;
 }
 
diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php
index 713bc255f6..9bd9568dc5 100644
--- a/src/wp-admin/site-health-info.php
+++ b/src/wp-admin/site-health-info.php
@@ -95,7 +95,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 		<?php endif; ?>
 	</div>
 
-	<dl id="health-check-debug" role="presentation" class="health-check-accordion">
+	<div id="health-check-debug" class="health-check-accordion">
 
 		<?php
 		foreach ( $info as $section => $details ) {
@@ -103,20 +103,20 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 				continue;
 			}
 			?>
-			<dt role="heading" aria-level="3">
-				<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" id="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" type="button">
-		<span class="title">
-			<?php echo esc_html( $details['label'] ); ?>
+			<h3 class="health-check-accordion-heading">
+				<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" type="button">
+					<span class="title">
+						<?php echo esc_html( $details['label'] ); ?>
 
-			<?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
-				<?php printf( '(%d)', count( $details['fields'] ) ); ?>
-			<?php endif; ?>
-		</span>
+						<?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
+							<?php printf( '(%d)', count( $details['fields'] ) ); ?>
+						<?php endif; ?>
+					</span>
 					<span class="icon"></span>
 				</button>
-			</dt>
+			</h3>
 
-			<dd id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" role="region" aria-labelledby="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
+			<div id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
 				<?php
 				if ( isset( $details['description'] ) && ! empty( $details['description'] ) ) {
 					printf(
@@ -161,9 +161,9 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 					?>
 					</tbody>
 				</table>
-			</dd>
+			</div>
 		<?php } ?>
-	</dl>
+	</div>
 </div>
 
 <?php
diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php
index d41c752491..5450cba1c7 100644
--- a/src/wp-admin/site-health.php
+++ b/src/wp-admin/site-health.php
@@ -92,7 +92,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 				<span class="issue-count">0</span> <?php _e( 'Critical issues' ); ?>
 			</h3>
 
-			<dl id="health-check-site-status-critical" role="presentation" class="health-check-accordion issues"></dl>
+			<div id="health-check-site-status-critical" class="health-check-accordion issues"></div>
 		</div>
 
 		<div class="site-health-issues-wrapper" id="health-check-issues-recommended">
@@ -100,7 +100,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 				<span class="issue-count">0</span> <?php _e( 'Recommended improvements' ); ?>
 			</h3>
 
-			<dl id="health-check-site-status-recommended" role="presentation" class="health-check-accordion issues"></dl>
+			<div id="health-check-site-status-recommended" class="health-check-accordion issues"></div>
 		</div>
 	</div>
 
@@ -115,24 +115,24 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 			<span class="issue-count">0</span> <?php _e( 'Items with no issues detected' ); ?>
 		</h3>
 
-		<dl id="health-check-site-status-good" role="presentation" class="health-check-accordion issues"></dl>
+		<div id="health-check-site-status-good" class="health-check-accordion issues"></div>
 	</div>
 </div>
 
 <script id="tmpl-health-check-issue" type="text/template">
-	<dt role="heading" aria-level="4">
-		<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-{{ data.test }}" id="health-check-accordion-heading-{{ data.test }}" type="button">
+	<h4 class="health-check-accordion-heading">
+		<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-{{ data.test }}" type="button">
 			<span class="title">{{ data.label }}</span>
 			<span class="badge {{ data.badge.color }}">{{ data.badge.label }}</span>
 			<span class="icon"></span>
 		</button>
-	</dt>
-	<dd id="health-check-accordion-block-{{ data.test }}" aria-labelledby="health-check-accordion-heading-{{ data.test }}" role="region" class="health-check-accordion-panel" hidden="hidden">
+	</h4>
+	<div id="health-check-accordion-block-{{ data.test }}" class="health-check-accordion-panel" hidden="hidden">
 		{{{ data.description }}}
 		<div class="actions">
 			<p class="button-container">{{{ data.actions }}}</p>
 		</div>
-	</dd>
+	</div>
 </script>
 
 <?php