Make the toggle reachable by keyboard

Bug: T355636
Change-Id: Ie765cddd664933fa07638c661874bef80782dd45

extension.json

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

includes/CategoryTree.php

@@ -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 = '';

modules/ext.categoryTree.styles.css

@@ -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;

modules/ext.categoryTree/ext.categoryTree.css

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

modules/ext.categoryTree/ext.categoryTree.js

@@ -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' );
 	}