Changeset 57572

Timestamp:

02/08/2024 11:29:18 PM (10 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/forms.css (modified) (2 diffs)
• includes/misc.php (modified) (1 diff)

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

@@ -934 +934 @@
 
 .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;
@@ -1602 +1605 @@
     }
 
+    .form-table .color-palette .color-palette-shade,
     .form-table .color-palette td {
         display: table-cell;
         width: 15px;
-    }
-
-    .form-table table.color-palette {
+        height: 30px;
+        padding: 0;
+    }
+
+    .form-table .color-palette {
         margin-right: 10px;
     }

trunk/src/wp-admin/includes/misc.php

@@ -1039 +1039 @@
                 <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>
+                <div class="color-palette">
+                <?php
+                foreach ( $color_info->colors as $html_color ) {
+                    ?>
+                    <div class="color-palette-shade" style="background-color: <?php echo esc_attr( $html_color ); ?>">&nbsp;</div>
                     <?php
-                    foreach ( $color_info->colors as $html_color ) {
-                        ?>
-                        <td style="background-color: <?php echo esc_attr( $html_color ); ?>">&nbsp;</td>
-                        <?php
-                    }
-                    ?>
-                    </tr>
-                </table>
+                }
+                ?>
+                </div>
             </div>
             <?php