Changeset 59825

Timestamp:

02/14/2025 08:32:48 PM (3 weeks 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' ); ?>