mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CategoryTree
synced 2024-11-13 18:37:03 +00:00
Make the toggle reachable by keyboard
Bug: T355636 Change-Id: Ie765cddd664933fa07638c661874bef80782dd45
This commit is contained in:
parent
cf210d9548
commit
08a23b5c26
|
@ -52,7 +52,6 @@
|
|||
"ext.categoryTree": {
|
||||
"localBasePath": "modules/ext.categoryTree",
|
||||
"remoteExtPath": "CategoryTree/modules/ext.categoryTree",
|
||||
"styles": "ext.categoryTree.css",
|
||||
"packageFiles": [
|
||||
"ext.categoryTree.js",
|
||||
{
|
||||
|
|
|
@ -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 = '';
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
.CategoryTreeToggleHandlerAttached {
|
||||
cursor: pointer;
|
||||
}
|
|
@ -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 () {
|
||||
return mw.msg(
|
||||
$( this ).attr( 'data-ct-state' ) === 'collapsed' ?
|
||||
'categorytree-expand' :
|
||||
'categorytree-collapse'
|
||||
);
|
||||
.attr( {
|
||||
href: '#',
|
||||
role: 'button',
|
||||
title: function () {
|
||||
return mw.msg(
|
||||
$( this ).attr( 'aria-expanded' ) === 'false' ?
|
||||
'categorytree-expand' :
|
||||
'categorytree-collapse'
|
||||
);
|
||||
}
|
||||
} )
|
||||
.addClass( 'CategoryTreeToggleHandlerAttached' );
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue