mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-03-20 20:09:53 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Customize: Accessibility: Restore heading semantics in sections.

Browse Source 
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
This commit is contained in:
Joe Dolson 2025-02-14 20:32:48 +00:00
parent deec0a0b00
commit 4599605f07
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/wp-admin/css/customize-controls.css
View File

@ -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,

4
src/wp-admin/customize.php
View File

@ -233,12 +233,12 @@ do_action( 'customize_controls_head' );
<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. */

4
src/wp-includes/class-wp-customize-nav-menus.php
View File

@ -1222,7 +1222,7 @@ final class WP_Customize_Nav_Menus {
$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 @@ final class WP_Customize_Nav_Menus {
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>