Changeset 59825

Timestamp:

02/14/2025 08:32:48 PM (19 months ago)

Author:

joedolson

Message:

Customize: Accessibility: Restore heading semantics in sections.

Remove role="presentation" from headings in the customizer. These were needed to avoid confusing semantics when the headings also acted as buttons to control accordions, changed in [59924].

Change responsive CSS to use screen-reader-text styling rather than display: none so that mobile retains the headings hierarchy.

Props joedolson, hbhalodia, mikinc860, guillaumeturpin, rcreators, tirth03, dhrumilk .
Fixes #62215.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (3 diffs)
• wp-admin/customize.php (modified) (1 diff)
• wp-includes/class-wp-customize-nav-menus.php (modified) (2 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -448 +448 @@
         font-size: 13px;
         line-height: 1.9;
+        margin: 0;
+        font-weight: 400;
+        color: #50575e;
 }
 
@@ -2642 +2645 @@
 #available-widgets .customize-section-title,
 #available-menu-items .customize-section-title {
+        border: 0;
+        clip-path: inset(50%);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+        word-wrap: normal !important;
+}
+
+#available-widgets .customize-section-title button,
+#available-menu-items .customize-section-title button {
         display: none;
 }
@@ -2978 +2994 @@
         #available-widgets .customize-section-title,
         #available-menu-items .customize-section-title {
+                border: 0;
+                clip-path: none;
+                height: inherit;
+                margin: 0;
+                overflow: hidden;
+                padding: 0;
+                width: auto;
+                position: static;
+        }
+
+        #available-widgets .customize-section-title button,
+        #available-menu-items .customize-section-title button {
                 display: block;
-                margin: 0;
         }
 

trunk/src/wp-admin/customize.php

@@ -234 +234 @@
                                 <div id="customize-info" class="accordion-section customize-info" data-block-theme="<?php echo (int) wp_is_block_theme(); ?>">
                                         <div class="accordion-section-title">
-                                                <span class="preview-notice">
+                                                <h2 class="preview-notice">
                                                 <?php
                                                         /* translators: %s: The site/panel title in the Customizer. */
                                                         printf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name', 'display' ) . '</strong>' );
                                                 ?>
-                                                </span>
+                                                </h2>
                                                 <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text">
                                                         <?php

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -1223 +1223 @@
                 ?>
                 <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
-                        <h4 class="accordion-section-title" role="presentation">
+                        <h4 class="accordion-section-title">
                                 <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="<?php echo esc_attr( $id ); ?>-content">
                                         <?php echo esc_html( $available_item_type['title'] ); ?>
@@ -1258 +1258 @@
                 ?>
                 <div id="new-custom-menu-item" class="accordion-section">
-                        <h4 class="accordion-section-title" role="presentation">
+                        <h4 class="accordion-section-title">
                                 <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="new-custom-menu-item-content">
                                         <?php _e( 'Custom Links' ); ?>