From be9241218edc36b6aedf44b5f7e13cbaf073862b Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 19 Sep 2019 20:14:46 -0700 Subject: [PATCH] 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 --- resources/src/jquery/jquery.makeCollapsible.js | 7 +++++++ 1 file changed, 7 insertions(+) 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', { -- 2.20.1