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": {
"localBasePath": "modules/ext.categoryTree",
"remoteExtPath": "CategoryTree/modules/ext.categoryTree",
"styles": "ext.categoryTree.css",
"packageFiles": [
"ext.categoryTree.js",
{

7
includes/CategoryTree.php
View file

@ -395,18 +395,19 @@ class CategoryTree {
$attr['class'] = 'CategoryTreeEmptyBullet';
} else {
$linkattr = [
// href and role will be added client-side
'class' => 'CategoryTreeToggle',
'data-ct-title' => $key,
];
if ( $children === 0 ) {
$linkattr['data-ct-state'] = 'collapsed';
$linkattr['aria-expanded'] = 'false';
} else {
$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 {
$bullet = '';

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

@ -117,7 +117,7 @@
}
.CategoryTreeEmptyBullet,
.CategoryTreeToggle[ data-ct-state='collapsed' ] {
.CategoryTreeToggle[ aria-expanded='false' ] {
border-top: 5px solid transparent;
border-left: 10px solid;
border-bottom: 5px solid transparent;
@ -126,23 +126,23 @@
/* @noflip */
.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 .CategoryTreeToggle[ data-ct-state='collapsed' ] {
.mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ aria-expanded='false' ] {
border-left: 10px solid;
border-right: 0 none;
}
/* @noflip */
.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 .CategoryTreeToggle[ data-ct-state='collapsed' ] {
.mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ aria-expanded='false' ] {
border-right: 10px solid;
border-left: 0 none;
}
.CategoryTreeToggle[ data-ct-state='expanded' ] {
.CategoryTreeToggle[ aria-expanded='true' ] {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
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( {
title: mw.msg( 'categorytree-collapse' ),
'data-ct-state': 'expanded'
'aria-expanded': 'true'
} );
if ( !$link.data( 'ct-loaded' ) ) {
@ -60,7 +60,7 @@
$link.attr( {
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
*
* @this {Element} CategoryTreeToggle
* @param {jQuery.Event} e
*/
function handleNode() {
function handleNode( e ) {
e.preventDefault();
var $link = $( this );
if ( $link.attr( 'data-ct-state' ) === 'collapsed' ) {
if ( $link.attr( 'aria-expanded' ) === 'false' ) {
expandNode( $link );
} else {
collapseNode( $link );
@ -86,12 +89,16 @@
function attachHandler( $content ) {
$content.find( '.CategoryTreeToggle' )
.on( 'click', handleNode )
.attr( 'title', function () {
.attr( {
href: '#',
role: 'button',
title: function () {
return mw.msg(
$( this ).attr( 'data-ct-state' ) === 'collapsed' ?
$( this ).attr( 'aria-expanded' ) === 'false' ?
'categorytree-expand' :
'categorytree-collapse'
);
}
} )
.addClass( 'CategoryTreeToggleHandlerAttached' );
}