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 20bd405..de307a6 100644 (file)
--- 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', {