wikimedia/mediawiki-extensions-CategoryTree
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CategoryTree synced 2024-11-30 11:06:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the toggle reachable by keyboard

Browse source 
Bug: T355636
Change-Id: Ie765cddd664933fa07638c661874bef80782dd45
This commit is contained in:
Nardog 2024-01-23 14:03:40 +09:00
parent cf210d9548
commit 08a23b5c26
5 changed files with 27 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
extension.json
View file

@ -52,7 +52,6 @@
"ext.categoryTree": { "ext.categoryTree": {
"localBasePath": "modules/ext.categoryTree", "localBasePath": "modules/ext.categoryTree",
"remoteExtPath": "CategoryTree/modules/ext.categoryTree", "remoteExtPath": "CategoryTree/modules/ext.categoryTree",
"styles": "ext.categoryTree.css",
"packageFiles": [ "packageFiles": [
"ext.categoryTree.js", "ext.categoryTree.js",
{ {

7
includes/CategoryTree.php
View file

@ -395,18 +395,19 @@ class CategoryTree {
$attr['class'] = 'CategoryTreeEmptyBullet'; $attr['class'] = 'CategoryTreeEmptyBullet';
} else { } else {
$linkattr = [ $linkattr = [
// href and role will be added client-side
'class' => 'CategoryTreeToggle', 'class' => 'CategoryTreeToggle',
'data-ct-title' => $key, 'data-ct-title' => $key,
]; ];
if ( $children === 0 ) { if ( $children === 0 ) {
$linkattr['data-ct-state'] = 'collapsed'; $linkattr['aria-expanded'] = 'false';
} else { } else {
$linkattr['data-ct-loaded'] = true; $linkattr['data-ct-loaded'] = true;
$linkattr['data-ct-state'] = 'expanded'; $linkattr['aria-expanded'] = 'true';
} }
$bullet = Html::element( 'span', $linkattr ) . ' '; $bullet = Html::element( 'a', $linkattr ) . ' ';
} }
} else { } else {
$bullet = ''; $bullet = '';

12
modules/ext.categoryTree.styles.css
View file

@ -117,7 +117,7 @@
} }
.CategoryTreeEmptyBullet, .CategoryTreeEmptyBullet,
.CategoryTreeToggle[ data-ct-state='collapsed' ] { .CategoryTreeToggle[ aria-expanded='false' ] {
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-left: 10px solid; border-left: 10px solid;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
@ -126,23 +126,23 @@
/* @noflip */ /* @noflip */
.mw-content-ltr .CategoryTreeEmptyBullet, .mw-content-ltr .CategoryTreeEmptyBullet,
.mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ], .mw-content-ltr .CategoryTreeToggle[ aria-expanded='false' ],
.mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet, .mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet,
.mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ] { .mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ aria-expanded='false' ] {
border-left: 10px solid; border-left: 10px solid;
border-right: 0 none; border-right: 0 none;
} }
/* @noflip */ /* @noflip */
.mw-content-rtl .CategoryTreeEmptyBullet, .mw-content-rtl .CategoryTreeEmptyBullet,
.mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ], .mw-content-rtl .CategoryTreeToggle[ aria-expanded='false' ],
.mw-content-ltr .mw-content-rtl .CategoryTreeEmptyBullet, .mw-content-ltr .mw-content-rtl .CategoryTreeEmptyBullet,
.mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ] { .mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ aria-expanded='false' ] {
border-right: 10px solid; border-right: 10px solid;
border-left: 0 none; border-left: 0 none;
} }
.CategoryTreeToggle[ data-ct-state='expanded' ] { .CategoryTreeToggle[ aria-expanded='true' ] {
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 10px solid; border-top: 10px solid;

3
modules/ext.categoryTree/ext.categoryTree.css
View file

@ -1,3 +0,0 @@
.CategoryTreeToggleHandlerAttached {
cursor: pointer;
}

19
modules/ext.categoryTree/ext.categoryTree.js
View file

@ -39,7 +39,7 @@
$link.attr( { $link.attr( {
title: mw.msg( 'categorytree-collapse' ), title: mw.msg( 'categorytree-collapse' ),
'data-ct-state': 'expanded' 'aria-expanded': 'true'
} ); } );
if ( !$link.data( 'ct-loaded' ) ) { if ( !$link.data( 'ct-loaded' ) ) {
@ -60,7 +60,7 @@
$link.attr( { $link.attr( {
title: mw.msg( 'categorytree-expand' ), title: mw.msg( 'categorytree-expand' ),
'data-ct-state': 'collapsed' 'aria-expanded': 'false'
} ); } );
} }
@ -68,10 +68,13 @@
* Handles clicks on the expand buttons, and calls the appropriate function * Handles clicks on the expand buttons, and calls the appropriate function
* *
* @this {Element} CategoryTreeToggle * @this {Element} CategoryTreeToggle
* @param {jQuery.Event} e
*/ */
function handleNode() { function handleNode( e ) {
e.preventDefault();
var $link = $( this ); var $link = $( this );
if ( $link.attr( 'data-ct-state' ) === 'collapsed' ) { if ( $link.attr( 'aria-expanded' ) === 'false' ) {
expandNode( $link ); expandNode( $link );
} else { } else {
collapseNode( $link ); collapseNode( $link );
@ -86,12 +89,16 @@
function attachHandler( $content ) { function attachHandler( $content ) {
$content.find( '.CategoryTreeToggle' ) $content.find( '.CategoryTreeToggle' )
.on( 'click', handleNode ) .on( 'click', handleNode )
.attr( 'title', function () { .attr( {
href: '#',
role: 'button',
title: function () {
return mw.msg( return mw.msg(
$( this ).attr( 'data-ct-state' ) === 'collapsed' ? $( this ).attr( 'aria-expanded' ) === 'false' ?
'categorytree-expand' : 'categorytree-expand' :
'categorytree-collapse' 'categorytree-collapse'
); );
}
} ) } )
.addClass( 'CategoryTreeToggleHandlerAttached' ); .addClass( 'CategoryTreeToggleHandlerAttached' );
} }