Customize: Accessibility: Restore heading semantics in sections.

joedolson · joedolson · commit 4599605f07a2 · 2025-02-14T20:32:48.000Z
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. git-svn-id: https://develop.svn.wordpress.org/trunk@59825 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
@@ -447,6 +447,9 @@ body.trashing #publish-settings {
 #customize-controls .customize-info .preview-notice {
 	font-size: 13px;
 	line-height: 1.9;
+	margin: 0;
+	font-weight: 400;
+	color: #50575e;
 }
 
 #customize-controls .customize-pane-child .customize-section-title h3,
@@ -2641,6 +2644,19 @@ body.adding-widget .add-new-widget:before,
 
 #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;
 }
 
@@ -2977,8 +2993,19 @@ body.adding-widget .add-new-widget:before,
 
 	#available-widgets .customize-section-title,
 	#available-menu-items .customize-section-title {
-		display: block;
+		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;
 	}
 
 	#available-widgets .customize-section-back,
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
@@ -233,12 +233,12 @@
 			<div class="wp-full-overlay-sidebar-content" tabindex="-1">
 				<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
 							/* translators: Hidden accessibility text. */
diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php
@@ -1222,7 +1222,7 @@ protected function print_post_type_container( $available_item_type ) {
 		$id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
 		?>
 		<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'] ); ?>
 					<span class="spinner"></span>
@@ -1257,7 +1257,7 @@ protected function print_post_type_container( $available_item_type ) {
 	protected function print_custom_links_available_menu_item() {
 		?>
 		<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' ); ?>
 					<span class="toggle-indicator" aria-hidden="true"></span>
