Skip to content

Convert visual tabs into tablist and tabpanel in taxonomies #11035

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
joedolson wants to merge 9 commits into from
Closed

Convert visual tabs into tablist and tabpanel in taxonomies #11035

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8652163
Convert visual tabs into tablist and tabpanel in taxonomies
joedolson Feb 25, 2026
720c453
Update src/wp-admin/includes/meta-boxes.php
joedolson Feb 25, 2026
51c7bd3
Merge branch 'trunk' into fix-taxonomy-tabs
joedolson Feb 25, 2026
cd0e9e6
Omitted semicolons
joedolson Feb 25, 2026
3fa62f6
Remove duplicated aria-selected set.
joedolson Feb 25, 2026
fb076c1
Prevent shift of browser viewport when spacebar is released.
joedolson Feb 25, 2026
54ca0ed
Merge branch 'trunk' into fix-taxonomy-tabs
joedolson Feb 25, 2026
a08d1f0
Merge branch 'trunk' into fix-taxonomy-tabs
joedolson Feb 27, 2026
f616d76
Merge branch 'trunk' into fix-taxonomy-tabs
joedolson Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions src/js/_enqueues/admin/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,35 @@ jQuery( function($) {
*
* @return {boolean} Always returns false to prevent the default behavior.
*/
$('#category-tabs a').on( 'click', function(){
$('#category-tabs a').on( 'click keyup keydown', function( event ){
var t = $(this).attr('href');
$(this).parent().addClass('tabs').siblings('li').removeClass('tabs');
$('.tabs-panel').hide();
$(t).show();
if ( '#categories-all' == t )
deleteUserSetting('cats');
else
setUserSetting('cats','pop');
return false;
if ( ( event.type === 'keyup' && event.key === ' ' ) || ( event.type === 'keydown' && event.key === 'Enter' ) || event.type === 'click' ) {
event.preventDefault();
$('#category-tabs a').removeAttr( 'aria-selected' ).attr( 'tabindex', '-1' );
$(this).attr( 'aria-selected', 'true' ).removeAttr( 'tabindex' );
$(this).attr( 'aria-selected', 'true' );
$(this).parent().addClass('tabs').siblings('li').removeClass('tabs');
$('.tabs-panel').hide();
$(t).show();
if ( '#categories-all' == t ) {
deleteUserSetting('cats');
} else {
setUserSetting('cats','pop');
}
return false;
}
if ( event.type === 'keyup' && ( event.key === 'ArrowRight' || event.key === 'ArrowLeft' ) ) {
$(this).attr( 'tabindex', '-1' );
let next = $(this).parent('li').next();
let prev = $(this).parent('li').prev();
if ( next.length > 0 ) {
next.find('a').removeAttr( 'tabindex')
next.find('a').trigger( 'focus' );
} else {
prev.find('a').removeAttr( 'tabindex')
prev.find('a').trigger( 'focus' );
}
}
});
if ( getUserSetting('cats') )
$('#category-tabs a[href="#categories-pop"]').trigger( 'click' );
Expand Down
34 changes: 25 additions & 9 deletions src/js/_enqueues/admin/post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,16 +566,32 @@ jQuery( function($) {
}

// @todo Move to jQuery 1.3+, support for multiple hierarchical taxonomies, see wp-lists.js.
$('a', '#' + taxonomy + '-tabs').on( 'click', function( e ) {
e.preventDefault();
$('a', '#' + taxonomy + '-tabs').on( 'click keyup keydown', function( event ) {
var t = $(this).attr('href');
$(this).parent().addClass('tabs').siblings('li').removeClass('tabs');
$('#' + taxonomy + '-tabs').siblings('.tabs-panel').hide();
$(t).show();
if ( '#' + taxonomy + '-all' == t ) {
deleteUserSetting( settingName );
} else {
setUserSetting( settingName, 'pop' );
if ( ( event.type === 'keyup' && event.key === ' ' ) || ( event.type === 'keydown' && event.key === 'Enter' ) || event.type === 'click' ) {
event.preventDefault();
$('#' + taxonomy + '-tabs a').removeAttr( 'aria-selected' ).attr( 'tabindex', '-1' );
$(this).attr( 'aria-selected', 'true' ).removeAttr( 'tabindex' );
$(this).parent().addClass('tabs').siblings('li').removeClass('tabs');
$('#' + taxonomy + '-tabs').siblings('.tabs-panel').hide();
$(t).show();
if ( '#' + taxonomy + '-all' == t ) {
deleteUserSetting( settingName );
} else {
setUserSetting( settingName, 'pop' );
}
}
if ( event.type === 'keyup' && ( event.key === 'ArrowRight' || event.key === 'ArrowLeft' ) ) {
$(this).attr( 'tabindex', '-1' );
let next = $(this).parent('li').next();
let prev = $(this).parent('li').prev();
if ( next.length > 0 ) {
next.find('a').removeAttr( 'tabindex')
next.find('a').trigger( 'focus' );
} else {
prev.find('a').removeAttr( 'tabindex')
prev.find('a').trigger( 'focus' );
}
}
});

Expand Down
20 changes: 10 additions & 10 deletions src/wp-admin/includes/meta-boxes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -644,18 +644,18 @@ function post_categories_meta_box( $post, $box ) {
$taxonomy = get_taxonomy( $parsed_args['taxonomy'] );
?>
<div id="taxonomy-<?php echo $tax_name; ?>" class="categorydiv">
<ul id="<?php echo $tax_name; ?>-tabs" class="category-tabs">
<li class="tabs"><a href="#<?php echo $tax_name; ?>-all"><?php echo $taxonomy->labels->all_items; ?></a></li>
<li class="hide-if-no-js"><a href="#<?php echo $tax_name; ?>-pop"><?php echo esc_html( $taxonomy->labels->most_used ); ?></a></li>
<ul id="<?php echo $tax_name; ?>-tabs" class="category-tabs" role="tablist">
<li class="tabs"><a href="#<?php echo $tax_name; ?>-all" role="tab" aria-selected="true" aria-controls="<?php echo $tax_name; ?>-all"><?php echo $taxonomy->labels->all_items; ?></a></li>
Comment thread
joedolson marked this conversation as resolved.
Outdated
<li class="hide-if-no-js"><a href="#<?php echo $tax_name; ?>-pop" role="tab" aria-controls="<?php echo $tax_name; ?>-pop"><?php echo esc_html( $taxonomy->labels->most_used ); ?></a></li>
</ul>

<div id="<?php echo $tax_name; ?>-pop" class="tabs-panel" style="display: none;">
<div id="<?php echo $tax_name; ?>-pop" class="tabs-panel" style="display: none;" role="tabpanel">
<ul id="<?php echo $tax_name; ?>checklist-pop" class="categorychecklist form-no-clear" >
<?php $popular_ids = wp_popular_terms_checklist( $tax_name ); ?>
</ul>
</div>

<div id="<?php echo $tax_name; ?>-all" class="tabs-panel">
<div id="<?php echo $tax_name; ?>-all" class="tabs-panel" role="tabpanel">
<?php
$name = ( 'category' === $tax_name ) ? 'post_category' : 'tax_input[' . $tax_name . ']';
// Allows for an empty term set to be sent. 0 is an invalid term ID and will be ignored by empty() checks.
Expand Down Expand Up @@ -1176,12 +1176,12 @@ function link_submit_meta_box( $link ) {
function link_categories_meta_box( $link ) {
?>
<div id="taxonomy-linkcategory" class="categorydiv">
<ul id="category-tabs" class="category-tabs">
<li class="tabs"><a href="#categories-all"><?php _e( 'All categories' ); ?></a></li>
<li class="hide-if-no-js"><a href="#categories-pop"><?php _ex( 'Most Used', 'categories' ); ?></a></li>
<ul id="category-tabs" class="category-tabs" role="tablist">
<li class="tabs"><a href="#categories-all" role="tab" aria-controls="categories-all" aria-selected="true"><?php _e( 'All categories' ); ?></a></li>
<li class="hide-if-no-js"><a href="#categories-pop" role="tab" aria-controls="categories-pop"><?php _ex( 'Most Used', 'categories' ); ?></a></li>
</ul>

<div id="categories-all" class="tabs-panel">
<div id="categories-all" class="tabs-panel" role="tabpanel">
<ul id="categorychecklist" data-wp-lists="list:category" class="categorychecklist form-no-clear">
<?php
if ( isset( $link->link_id ) ) {
Expand All @@ -1193,7 +1193,7 @@ function link_categories_meta_box( $link ) {
</ul>
</div>

<div id="categories-pop" class="tabs-panel" style="display: none;">
<div id="categories-pop" class="tabs-panel" style="display: none;" role="tabpanel">
<ul id="categorychecklist-pop" class="categorychecklist form-no-clear">
<?php wp_popular_terms_checklist( 'link_category' ); ?>
</ul>
Expand Down
Loading