WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Administration: A11y: Fix accordion accessibility. 

Change accordions in the customizer and the navigation menus to make proper usage of accordion markup patterns. This includes adding missing `:focus` states, using a `button` element to control tabbing and interaction, instead of the heading elements, and removing instructional text for screen reader users that was used to compensate for the incorrect markup pattern.

Props afercia, rishishah, kushang78, rcreators, krupajnanda, hmbashar, joedolson.
Fixes #42002.
Built from https://develop.svn.wordpress.org/trunk@59224


git-svn-id: http://core.svn.wordpress.org/trunk@58616 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2024-10-13 19:09:12 +00:00
parent c0dc2960e4
commit f7fb13a3c4
24 changed files with 188 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
wp-admin/css/common-rtl.css
View File

@ -2432,8 +2432,42 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
/* Back-compat for nav-menus screen */ /* Back-compat for nav-menus screen */
.nav-menus-php .metabox-holder h3 { .nav-menus-php .metabox-holder h3 {
padding: 0;
}
.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
background: inherit;
color: #1d2327;
display: block;
position: relative;
text-align: right;
width: 100%;
outline: none;
border: 0;
padding: 10px 14px 11px 10px; padding: 10px 14px 11px 10px;
line-height: 1.5; line-height: 1.5;
cursor: pointer;
}
.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
box-shadow: 0 0 0 2px #2271b1;
outline: 2px solid transparent;
}
.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
position: absolute;
left: 10px;
right: auto;
color: #787c82;
border-radius: 50px;
}
.nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
color: #1d2327;
}
.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
position: relative;
right: -1px
}
.nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
transform: rotate(-180deg);
} }
#templateside ul li a { #templateside ul li a {
@ -3523,9 +3557,9 @@ img {
/* @todo: can we use a common class for these? */ /* @todo: can we use a common class for these? */
.nav-menus-php .item-edit:before, .nav-menus-php .item-edit:before,
.widget-top .widget-action .toggle-indicator:before, .wp-customizer .control-section .accordion-section-title:after,
.control-section .accordion-section-title:after, .wp-customizer .accordion-section-title:after,
.accordion-section-title:after { .widget-top .widget-action .toggle-indicator:before {
content: "\f140"; content: "\f140";
font: normal 20px/1 dashicons; font: normal 20px/1 dashicons;
speak: never; speak: never;
@ -3543,8 +3577,7 @@ img {
.handlediv, .handlediv,
.postbox .handlediv.button-link, .postbox .handlediv.button-link,
.item-edit, .item-edit,
.toggle-indicator, .toggle-indicator {
.accordion-section-title:after {
color: #787c82; color: #787c82;
} }
@ -3560,8 +3593,7 @@ img {
.postbox .handlediv.button-link:focus, .postbox .handlediv.button-link:focus,
.item-edit:hover, .item-edit:hover,
.item-edit:focus, .item-edit:focus,
.sidebar-name:hover .toggle-indicator, .sidebar-name:hover .toggle-indicator {
.accordion-section-title:hover:after {
color: #1d2327; color: #1d2327;
/* Only visible in Windows High Contrast mode */ /* Only visible in Windows High Contrast mode */
outline: 2px solid transparent; outline: 2px solid transparent;
@ -3573,14 +3605,6 @@ img {
outline: 2px solid transparent; outline: 2px solid transparent;
} }
.control-section .accordion-section-title:after,
.accordion-section-title:after {
float: left;
left: 20px;
top: -2px;
}
.control-section.open .accordion-section-title:after,
#customize-info.open .accordion-section-title:after, #customize-info.open .accordion-section-title:after,
.nav-menus-php .menu-item-edit-active .item-edit:before, .nav-menus-php .menu-item-edit-active .item-edit:before,
.widget.open .widget-top .widget-action .toggle-indicator:before, .widget.open .widget-top .widget-action .toggle-indicator:before,
@ -3970,6 +3994,10 @@ img {
padding: 12px; padding: 12px;
} }
.nav-menus-php .metabox-holder h3 {
padding: 0;
}
.postbox .handlediv { .postbox .handlediv {
margin-top: 3px; margin-top: 3px;
} }

4
wp-admin/css/common-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

58
wp-admin/css/common.css
View File

@ -2431,8 +2431,42 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
/* Back-compat for nav-menus screen */ /* Back-compat for nav-menus screen */
.nav-menus-php .metabox-holder h3 { .nav-menus-php .metabox-holder h3 {
padding: 0;
}
.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
background: inherit;
color: #1d2327;
display: block;
position: relative;
text-align: left;
width: 100%;
outline: none;
border: 0;
padding: 10px 10px 11px 14px; padding: 10px 10px 11px 14px;
line-height: 1.5; line-height: 1.5;
cursor: pointer;
}
.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
box-shadow: 0 0 0 2px #2271b1;
outline: 2px solid transparent;
}
.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
position: absolute;
right: 10px;
left: auto;
color: #787c82;
border-radius: 50px;
}
.nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
color: #1d2327;
}
.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
position: relative;
left: -1px
}
.nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
transform: rotate(180deg);
} }
#templateside ul li a { #templateside ul li a {
@ -3522,9 +3556,9 @@ img {
/* @todo: can we use a common class for these? */ /* @todo: can we use a common class for these? */
.nav-menus-php .item-edit:before, .nav-menus-php .item-edit:before,
.widget-top .widget-action .toggle-indicator:before, .wp-customizer .control-section .accordion-section-title:after,
.control-section .accordion-section-title:after, .wp-customizer .accordion-section-title:after,
.accordion-section-title:after { .widget-top .widget-action .toggle-indicator:before {
content: "\f140"; content: "\f140";
font: normal 20px/1 dashicons; font: normal 20px/1 dashicons;
speak: never; speak: never;
@ -3542,8 +3576,7 @@ img {
.handlediv, .handlediv,
.postbox .handlediv.button-link, .postbox .handlediv.button-link,
.item-edit, .item-edit,
.toggle-indicator, .toggle-indicator {
.accordion-section-title:after {
color: #787c82; color: #787c82;
} }
@ -3559,8 +3592,7 @@ img {
.postbox .handlediv.button-link:focus, .postbox .handlediv.button-link:focus,
.item-edit:hover, .item-edit:hover,
.item-edit:focus, .item-edit:focus,
.sidebar-name:hover .toggle-indicator, .sidebar-name:hover .toggle-indicator {
.accordion-section-title:hover:after {
color: #1d2327; color: #1d2327;
/* Only visible in Windows High Contrast mode */ /* Only visible in Windows High Contrast mode */
outline: 2px solid transparent; outline: 2px solid transparent;
@ -3572,14 +3604,6 @@ img {
outline: 2px solid transparent; outline: 2px solid transparent;
} }
.control-section .accordion-section-title:after,
.accordion-section-title:after {
float: right;
right: 20px;
top: -2px;
}
.control-section.open .accordion-section-title:after,
#customize-info.open .accordion-section-title:after, #customize-info.open .accordion-section-title:after,
.nav-menus-php .menu-item-edit-active .item-edit:before, .nav-menus-php .menu-item-edit-active .item-edit:before,
.widget.open .widget-top .widget-action .toggle-indicator:before, .widget.open .widget-top .widget-action .toggle-indicator:before,
@ -3969,6 +3993,10 @@ img {
padding: 12px; padding: 12px;
} }
.nav-menus-php .metabox-holder h3 {
padding: 0;
}
.postbox .handlediv { .postbox .handlediv {
margin-top: 3px; margin-top: 3px;
} }

4
wp-admin/css/common.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
wp-admin/css/customize-controls-rtl.css
View File

@ -554,6 +554,23 @@ body.trashing #publish-settings {
.15s border-color ease-in-out; .15s border-color ease-in-out;
} }
.accordion-section-title:has(button.accordion-trigger) {
padding: 0;
}
.accordion-section-title button.accordion-trigger {
all: unset;
width: 100%;
height: 100%;
padding: 10px 14px 11px 10px;
display: flex;
align-items: center;
}
.accordion-section-title button.accordion-trigger:has(.menu-in-location) {
display: block;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
#customize-theme-controls .accordion-section-title, #customize-theme-controls .accordion-section-title,
#customize-outer-theme-controls .accordion-section-title { #customize-outer-theme-controls .accordion-section-title {
@ -580,9 +597,9 @@ body.trashing #publish-settings {
} }
#customize-controls .control-section:hover > .accordion-section-title, #customize-controls .control-section:hover > .accordion-section-title,
#customize-controls .control-section .accordion-section-title:hover, #customize-controls .control-section .accordion-section-title button:hover,
#customize-controls .control-section.open .accordion-section-title, #customize-controls .control-section.open .accordion-section-title,
#customize-controls .control-section .accordion-section-title:focus { #customize-controls .control-section .accordion-section-title button:focus {
color: #2271b1; color: #2271b1;
background: #f6f7f7; background: #f6f7f7;
border-right-color: #2271b1; border-right-color: #2271b1;

2
wp-admin/css/customize-controls-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
wp-admin/css/customize-controls.css
View File

@ -553,6 +553,23 @@ body.trashing #publish-settings {
.15s border-color ease-in-out; .15s border-color ease-in-out;
} }
.accordion-section-title:has(button.accordion-trigger) {
padding: 0;
}
.accordion-section-title button.accordion-trigger {
all: unset;
width: 100%;
height: 100%;
padding: 10px 10px 11px 14px;
display: flex;
align-items: center;
}
.accordion-section-title button.accordion-trigger:has(.menu-in-location) {
display: block;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
#customize-theme-controls .accordion-section-title, #customize-theme-controls .accordion-section-title,
#customize-outer-theme-controls .accordion-section-title { #customize-outer-theme-controls .accordion-section-title {
@ -579,9 +596,9 @@ body.trashing #publish-settings {
} }
#customize-controls .control-section:hover > .accordion-section-title, #customize-controls .control-section:hover > .accordion-section-title,
#customize-controls .control-section .accordion-section-title:hover, #customize-controls .control-section .accordion-section-title button:hover,
#customize-controls .control-section.open .accordion-section-title, #customize-controls .control-section.open .accordion-section-title,
#customize-controls .control-section .accordion-section-title:focus { #customize-controls .control-section .accordion-section-title button:focus {
color: #2271b1; color: #2271b1;
background: #f6f7f7; background: #f6f7f7;
border-left-color: #2271b1; border-left-color: #2271b1;

2
wp-admin/css/customize-controls.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
wp-admin/css/customize-nav-menus-rtl.css
View File

@ -543,8 +543,9 @@
background: transparent; background: transparent;
} }
#available-menu-items .accordion-section-title button { #available-menu-items .accordion-section-title button .toggle-indicator {
display: block; display: flex;
align-items: center;
width: 28px; width: 28px;
height: 35px; height: 35px;
position: absolute; position: absolute;

2
wp-admin/css/customize-nav-menus-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
wp-admin/css/customize-nav-menus.css
View File

@ -542,8 +542,9 @@
background: transparent; background: transparent;
} }
#available-menu-items .accordion-section-title button { #available-menu-items .accordion-section-title button .toggle-indicator {
display: block; display: flex;
align-items: center;
width: 28px; width: 28px;
height: 35px; height: 35px;
position: absolute; position: absolute;

2
wp-admin/css/customize-nav-menus.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
wp-admin/includes/template.php
View File

@ -1566,23 +1566,24 @@ function do_accordion_sections( $screen, $context, $data_object ) {
++$i; ++$i;
$hidden_class = in_array( $box['id'], $hidden, true ) ? 'hide-if-js' : ''; $hidden_class = in_array( $box['id'], $hidden, true ) ? 'hide-if-js' : '';
$open_class = ''; $open_class = '';
$aria_expanded = 'false';
if ( ! $first_open && empty( $hidden_class ) ) { if ( ! $first_open && empty( $hidden_class ) ) {
$first_open = true; $first_open = true;
$open_class = 'open'; $open_class = 'open';
$aria_expanded = 'true';
} }
?> ?>
<li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>"> <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
<h3 class="accordion-section-title hndle" tabindex="0"> <h3 class="accordion-section-title hndle">
<?php echo esc_html( $box['title'] ); ?> <button type="button" class="accordion-trigger" aria-expanded="<?php echo $aria_expanded; ?>" aria-controls="<?php echo esc_attr( $box['id'] ); ?>-content">
<span class="screen-reader-text"> <span class="accordion-title">
<?php <?php echo esc_html( $box['title'] ); ?>
/* translators: Hidden accessibility text. */ <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
_e( 'Press return or enter to open this section' ); </span>
?> </button>
</span>
</h3> </h3>
<div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>"> <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>-content">
<div class="inside"> <div class="inside">
<?php call_user_func( $box['callback'], $data_object, $box ); ?> <?php call_user_func( $box['callback'], $data_object, $box ); ?>
</div><!-- .inside --> </div><!-- .inside -->

25
wp-admin/js/accordion.js
View File

@ -7,18 +7,18 @@
* *
* <div class="accordion-container"> * <div class="accordion-container">
* <div class="accordion-section open"> * <div class="accordion-section open">
* <h3 class="accordion-section-title"></h3> * <h3 class="accordion-section-title"><button type="button" aria-expanded="true" aria-controls="target-1"></button></h3>
* <div class="accordion-section-content"> * <div class="accordion-section-content" id="target">
* </div> * </div>
* </div> * </div>
* <div class="accordion-section"> * <div class="accordion-section">
* <h3 class="accordion-section-title"></h3> * <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-2"></button></h3>
* <div class="accordion-section-content"> * <div class="accordion-section-content" id="target-2">
* </div> * </div>
* </div> * </div>
* <div class="accordion-section"> * <div class="accordion-section">
* <h3 class="accordion-section-title"></h3> * <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-3"></button></h3>
* <div class="accordion-section-content"> * <div class="accordion-section-content" id="target-3">
* </div> * </div>
* </div> * </div>
* </div> * </div>
@ -34,13 +34,7 @@
$( function () { $( function () {
// Expand/Collapse accordion sections on click. // Expand/Collapse accordion sections on click.
$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { $( '.accordion-container' ).on( 'click', '.accordion-section-title button', function() {
if ( e.type === 'keydown' && 13 !== e.which ) { // "Return" key.
return;
}
e.preventDefault(); // Keep this AFTER the key filter above.
accordionSwitch( $( this ) ); accordionSwitch( $( this ) );
}); });
@ -54,7 +48,6 @@
*/ */
function accordionSwitch ( el ) { function accordionSwitch ( el ) {
var section = el.closest( '.accordion-section' ), var section = el.closest( '.accordion-section' ),
sectionToggleControl = section.find( '[aria-expanded]' ).first(),
container = section.closest( '.accordion-container' ), container = section.closest( '.accordion-container' ),
siblings = container.find( '.open' ), siblings = container.find( '.open' ),
siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(), siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
@ -86,8 +79,8 @@
}, 150); }, 150);
// If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value. // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
if ( sectionToggleControl ) { if ( el ) {
sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) ); el.attr( 'aria-expanded', String( el.attr( 'aria-expanded' ) === 'false' ) );
} }
} }

2
wp-admin/js/accordion.min.js vendored
View File

@ -1,2 +1,2 @@
/*! This file is auto-generated */ /*! This file is auto-generated */
!function(s){s(function(){s(".accordion-container").on("click keydown",".accordion-section-title",function(e){var n,o,a,i,t;"keydown"===e.type&&13!==e.which||(e.preventDefault(),e=(e=s(this)).closest(".accordion-section"),n=e.find("[aria-expanded]").first(),o=e.closest(".accordion-container"),a=o.find(".open"),i=a.find("[aria-expanded]").first(),t=e.find(".accordion-section-content"),e.hasClass("cannot-expand"))||(o.addClass("opening"),e.hasClass("open")?(e.toggleClass("open"),t.toggle(!0).slideToggle(150)):(i.attr("aria-expanded","false"),a.removeClass("open"),a.find(".accordion-section-content").show().slideUp(150),t.toggle(!1).slideToggle(150),e.toggleClass("open")),setTimeout(function(){o.removeClass("opening")},150),n&&n.attr("aria-expanded",String("false"===n.attr("aria-expanded"))))})})}(jQuery); !function(s){s(function(){s(".accordion-container").on("click",".accordion-section-title button",function(){var n,o,e,a,t,i;n=s(this),o=n.closest(".accordion-section"),e=o.closest(".accordion-container"),a=e.find(".open"),t=a.find("[aria-expanded]").first(),i=o.find(".accordion-section-content"),o.hasClass("cannot-expand")||(e.addClass("opening"),o.hasClass("open")?(o.toggleClass("open"),i.toggle(!0).slideToggle(150)):(t.attr("aria-expanded","false"),a.removeClass("open"),a.find(".accordion-section-content").show().slideUp(150),i.toggle(!1).slideToggle(150),o.toggleClass("open")),setTimeout(function(){e.removeClass("opening")},150),n&&n.attr("aria-expanded",String("false"===n.attr("aria-expanded"))))})})}(jQuery);

25
wp-admin/js/customize-controls.js
View File

@ -1530,7 +1530,7 @@
} }
// Expand/Collapse accordion sections on click. // Expand/Collapse accordion sections on click.
section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) { section.container.find( '.accordion-section-title button, .customize-section-back' ).on( 'click keydown', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return; return;
} }
@ -1605,7 +1605,7 @@
content = section.contentContainer, content = section.contentContainer,
overlay = section.headContainer.closest( '.wp-full-overlay' ), overlay = section.headContainer.closest( '.wp-full-overlay' ),
backBtn = content.find( '.customize-section-back' ), backBtn = content.find( '.customize-section-back' ),
sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(), sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
expand, panel; expand, panel;
if ( expanded && ! content.hasClass( 'open' ) ) { if ( expanded && ! content.hasClass( 'open' ) ) {
@ -1615,9 +1615,6 @@
} else { } else {
expand = function() { expand = function() {
section._animateChangeExpanded( function() { section._animateChangeExpanded( function() {
sectionTitle.attr( 'tabindex', '-1' );
backBtn.attr( 'tabindex', '0' );
backBtn.trigger( 'focus' ); backBtn.trigger( 'focus' );
content.css( 'top', '' ); content.css( 'top', '' );
container.scrollTop( 0 ); container.scrollTop( 0 );
@ -1663,8 +1660,6 @@
} }
} }
section._animateChangeExpanded( function() { section._animateChangeExpanded( function() {
backBtn.attr( 'tabindex', '-1' );
sectionTitle.attr( 'tabindex', '0' );
sectionTitle.trigger( 'focus' ); sectionTitle.trigger( 'focus' );
content.css( 'top', '' ); content.css( 'top', '' );
@ -2699,7 +2694,7 @@
container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ), container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ),
content = section.contentContainer, content = section.contentContainer,
backBtn = content.find( '.customize-section-back' ), backBtn = content.find( '.customize-section-back' ),
sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(), sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
body = $( document.body ), body = $( document.body ),
expand, panel; expand, panel;
@ -2719,9 +2714,6 @@
} else { } else {
expand = function() { expand = function() {
section._animateChangeExpanded( function() { section._animateChangeExpanded( function() {
sectionTitle.attr( 'tabindex', '-1' );
backBtn.attr( 'tabindex', '0' );
backBtn.trigger( 'focus' ); backBtn.trigger( 'focus' );
content.css( 'top', '' ); content.css( 'top', '' );
container.scrollTop( 0 ); container.scrollTop( 0 );
@ -2752,8 +2744,6 @@
} }
} }
section._animateChangeExpanded( function() { section._animateChangeExpanded( function() {
backBtn.attr( 'tabindex', '-1' );
sectionTitle.attr( 'tabindex', '0' );
sectionTitle.trigger( 'focus' ); sectionTitle.trigger( 'focus' );
content.css( 'top', '' ); content.css( 'top', '' );
@ -2843,7 +2833,7 @@
var meta, panel = this; var meta, panel = this;
// Expand/Collapse accordion sections on click. // Expand/Collapse accordion sections on click.
panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) { panel.headContainer.find( '.accordion-section-title button' ).on( 'click keydown', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return; return;
} }
@ -2947,7 +2937,7 @@
accordionSection = panel.contentContainer, accordionSection = panel.contentContainer,
overlay = accordionSection.closest( '.wp-full-overlay' ), overlay = accordionSection.closest( '.wp-full-overlay' ),
container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ), container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
topPanel = panel.headContainer.find( '.accordion-section-title' ), topPanel = panel.headContainer.find( '.accordion-section-title button' ),
backBtn = accordionSection.find( '.customize-panel-back' ), backBtn = accordionSection.find( '.customize-panel-back' ),
childSections = panel.sections(), childSections = panel.sections(),
skipTransition; skipTransition;
@ -2974,9 +2964,6 @@
} ); } );
} else { } else {
panel._animateChangeExpanded( function() { panel._animateChangeExpanded( function() {
topPanel.attr( 'tabindex', '-1' );
backBtn.attr( 'tabindex', '0' );
backBtn.trigger( 'focus' ); backBtn.trigger( 'focus' );
accordionSection.css( 'top', '' ); accordionSection.css( 'top', '' );
container.scrollTop( 0 ); container.scrollTop( 0 );
@ -2996,8 +2983,6 @@
skipTransition = accordionSection.hasClass( 'skip-transition' ); skipTransition = accordionSection.hasClass( 'skip-transition' );
if ( ! skipTransition ) { if ( ! skipTransition ) {
panel._animateChangeExpanded( function() { panel._animateChangeExpanded( function() {
topPanel.attr( 'tabindex', '0' );
backBtn.attr( 'tabindex', '-1' );
topPanel.focus(); topPanel.focus();
accordionSection.css( 'top', '' ); accordionSection.css( 'top', '' );

2
wp-admin/js/customize-controls.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/js/customize-nav-menus.js
View File

@ -1107,7 +1107,7 @@
var section = this, var section = this,
$title; $title;
$title = section.container.find( '.accordion-section-title:first' ); $title = section.container.find( '.accordion-section-title button:first' );
$title.find( '.menu-in-location' ).remove(); $title.find( '.menu-in-location' ).remove();
_.each( themeLocationSlugs, function( themeLocationSlug ) { _.each( themeLocationSlugs, function( themeLocationSlug ) {
var $label, locationName; var $label, locationName;

2
wp-admin/js/customize-nav-menus.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1223,20 +1223,14 @@ final class WP_Customize_Nav_Menus {
?> ?>
<div id="<?php echo esc_attr( $id ); ?>" class="accordion-section"> <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
<h4 class="accordion-section-title" role="presentation"> <h4 class="accordion-section-title" role="presentation">
<?php echo esc_html( $available_item_type['title'] ); ?> <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="<?php echo esc_attr( $id ); ?>-content">
<span class="spinner"></span> <?php echo esc_html( $available_item_type['title'] ); ?>
<span class="no-items"><?php _e( 'No items' ); ?></span> <span class="spinner"></span>
<button type="button" class="button-link" aria-expanded="false"> <span class="no-items"><?php _e( 'No items' ); ?></span>
<span class="screen-reader-text">
<?php
/* translators: %s: Title of a section with menu items. */
printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) );
?>
</span>
<span class="toggle-indicator" aria-hidden="true"></span> <span class="toggle-indicator" aria-hidden="true"></span>
</button> </button>
</h4> </h4>
<div class="accordion-section-content"> <div class="accordion-section-content" id="<?php echo esc_attr( $id ); ?>-content">
<?php if ( 'post_type' === $available_item_type['type'] ) : ?> <?php if ( 'post_type' === $available_item_type['type'] ) : ?>
<?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?> <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
<?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?> <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
@ -1264,18 +1258,12 @@ final class WP_Customize_Nav_Menus {
?> ?>
<div id="new-custom-menu-item" class="accordion-section"> <div id="new-custom-menu-item" class="accordion-section">
<h4 class="accordion-section-title" role="presentation"> <h4 class="accordion-section-title" role="presentation">
<?php _e( 'Custom Links' ); ?> <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="new-custom-menu-item-content">
<button type="button" class="button-link" aria-expanded="false"> <?php _e( 'Custom Links' ); ?>
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Toggle section: Custom Links' );
?>
</span>
<span class="toggle-indicator" aria-hidden="true"></span> <span class="toggle-indicator" aria-hidden="true"></span>
</button> </button>
</h4> </h4>
<div class="accordion-section-content customlinkdiv"> <div class="accordion-section-content customlinkdiv" id="new-custom-menu-item-content">
<input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" /> <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
<p id="menu-item-url-wrap" class="wp-clearfix"> <p id="menu-item-url-wrap" class="wp-clearfix">
<label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label> <label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>

14
wp-includes/class-wp-customize-panel.php
View File

@ -346,16 +346,12 @@ class WP_Customize_Panel {
protected function render_template() { protected function render_template() {
?> ?>
<li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}"> <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
<h3 class="accordion-section-title" tabindex="0"> <h3 class="accordion-section-title">
{{ data.title }} <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
<span class="screen-reader-text"> {{ data.title }}
<?php </button>
/* translators: Hidden accessibility text. */
_e( 'Press return or enter to open this panel' );
?>
</span>
</h3> </h3>
<ul class="accordion-sub-container control-panel-content"></ul> <ul class="accordion-sub-container control-panel-content" id="{{ data.id }}-content"></ul>
</li> </li>
<?php <?php
} }

14
wp-includes/class-wp-customize-section.php
View File

@ -355,16 +355,12 @@ class WP_Customize_Section {
protected function render_template() { protected function render_template() {
?> ?>
<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}"> <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
<h3 class="accordion-section-title" tabindex="0"> <h3 class="accordion-section-title">
{{ data.title }} <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
<span class="screen-reader-text"> {{ data.title }}
<?php </button>
/* translators: Hidden accessibility text. */
_e( 'Press return or enter to open this section' );
?>
</span>
</h3> </h3>
<ul class="accordion-section-content"> <ul class="accordion-section-content" id="{{ data.id }}-content">
<li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>"> <li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
<div class="customize-section-title"> <div class="customize-section-title">
<button class="customize-section-back" tabindex="-1"> <button class="customize-section-back" tabindex="-1">

1
wp-includes/customize/class-wp-customize-themes-panel.php
View File

@ -44,7 +44,6 @@ class WP_Customize_Themes_Panel extends WP_Customize_Panel {
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}'; echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
} }
?> ?>
<?php if ( current_user_can( 'switch_themes' ) ) : ?> <?php if ( current_user_can( 'switch_themes' ) ) : ?>
<button type="button" class="button change-theme" aria-label="<?php esc_attr_e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button> <button type="button" class="button change-theme" aria-label="<?php esc_attr_e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
<?php endif; ?> <?php endif; ?>

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.7-beta2-59223'; $wp_version = '6.7-beta2-59224';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.