From: Volker E <volker.e@wikimedia.org>
Date: Fri, 20 Sep 2019 03:14:46 +0000 (-0700)
Subject: jquery.makeCollapsible: Add toggleARIA option and enable for plain toggle
X-Git-Tag: 1.34.0-rc.0~127^2
X-Git-Url: https://git.cyclocoop.org//%22%7B%7Blocalurle:Project:Pol%C3%ADtica_de_imagens%7D%7D/%22?a=commitdiff_plain;h=be9241218edc36b6aedf44b5f7e13cbaf073862b;p=lhc%2Fweb%2Fwiklou.git

jquery.makeCollapsible: Add toggleARIA option and enable for plain toggle

Adding `aria-expanded` attributes to `$toggle`.
That is not resolving each and every issue, but it gives at least
a valuable hint for screen readers and resolves the situation for
togglers, where the toggled content comes directly after `$toggle`.

Bug: T222904
Change-Id: Ic457bda58e56fb9ba2dce6df195e9fb48afb07f6
---

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index 20bd405038..de307a69d9 100644
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -136,6 +136,11 @@
 				.toggleClass( 'mw-collapsible-toggle-expanded', wasCollapsed );
 		}
 
+		// Toggle `aria-expanded` attribute, if requested (for default and premade togglers by default).
+		if ( options.toggleARIA ) {
+			$toggle.attr( 'aria-expanded', wasCollapsed ? 'true' : 'false' );
+		}
+
 		// Toggle the text ("Show"/"Hide") within elements tagged with mw-collapsible-text
 		if ( options.toggleText ) {
 			collapseText = options.toggleText.collapseText;
@@ -211,6 +216,7 @@
 			actionHandler = function ( e, opts ) {
 				var defaultOpts = {
 					toggleClasses: true,
+					toggleARIA: true,
 					toggleText: { collapseText: collapseText, expandText: expandText }
 				};
 				opts = $.extend( defaultOpts, options, opts );
@@ -324,6 +330,7 @@
 
 			// Attach event handlers to togglelink
 			$toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler )
+				.attr( 'aria-expanded', 'true' )
 				.prop( 'tabIndex', 0 );
 
 			$( this ).data( 'mw-collapsible', {