From 533bbd14bd4832ed80e163db186ca298f170dcf4 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Thu, 8 Feb 2024 23:29:18 +0000
Subject: [PATCH] Users: Replace table tags for color palettes in profiles.

Replace the `table` element used to present color palette selection in the user profile screen with generic elements. The extra semantics of a table are at best unhelpful and have some potential to great extraneous verbosity for screen readers.

Props sabernhardt, desrosj.
Fixes #53157.

git-svn-id: https://develop.svn.wordpress.org/trunk@57572 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/forms.css     |  8 +++++++-
 src/wp-admin/includes/misc.php | 18 ++++++++----------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 16f7cb899f..e6610cac47 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -933,11 +933,14 @@ table.form-table td .updated p {
 }
 
 .color-palette {
+	display: table;
 	width: 100%;
 	border-spacing: 0;
 	border-collapse: collapse;
 }
+.color-palette .color-palette-shade,
 .color-palette td {
+	display: table-cell;
 	height: 20px;
 	padding: 0;
 	border: none;
@@ -1601,12 +1604,15 @@ table.form-table td .updated p {
 		margin-bottom: 0;
 	}
 
+	.form-table .color-palette .color-palette-shade,
 	.form-table .color-palette td {
 		display: table-cell;
 		width: 15px;
+		height: 30px;
+		padding: 0;
 	}
 
-	.form-table table.color-palette {
+	.form-table .color-palette {
 		margin-right: 10px;
 	}
 
diff --git a/src/wp-admin/includes/misc.php b/src/wp-admin/includes/misc.php
index 3f48065cdf..ad3796fea3 100644
--- a/src/wp-admin/includes/misc.php
+++ b/src/wp-admin/includes/misc.php
@@ -1038,17 +1038,15 @@ function admin_color_scheme_picker( $user_id ) {
 				<input type="hidden" class="css_url" value="<?php echo esc_url( $color_info->url ); ?>" />
 				<input type="hidden" class="icon_colors" value="<?php echo esc_attr( wp_json_encode( array( 'icons' => $color_info->icon_colors ) ) ); ?>" />
 				<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
-				<table class="color-palette">
-					<tr>
-					<?php
-					foreach ( $color_info->colors as $html_color ) {
-						?>
-						<td style="background-color: <?php echo esc_attr( $html_color ); ?>">&nbsp;</td>
-						<?php
-					}
+				<div class="color-palette">
+				<?php
+				foreach ( $color_info->colors as $html_color ) {
 					?>
-					</tr>
-				</table>
+					<div class="color-palette-shade" style="background-color: <?php echo esc_attr( $html_color ); ?>">&nbsp;</div>
+					<?php
+				}
+				?>
+				</div>
 			</div>
 			<?php