Matmarex has uploaded a new change for review.
https://gerrit.wikimedia.org/r/72719
Change subject: jquery.makeCollapsible: Togglers keyboard accessibility
......................................................................
jquery.makeCollapsible: Togglers keyboard accessibility
Handle keypresses where e.which is 13 (Enter key) in addition to clicks.
Followup to If59590de.
Bug: 17616
Change-Id: Ib86833dbbbe8d5e4109090c70f1949ba97b9d119
---
M resources/jquery/jquery.makeCollapsible.js
1 file changed, 19 insertions(+), 16 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/19/72719/1
diff --git a/resources/jquery/jquery.makeCollapsible.js
b/resources/jquery/jquery.makeCollapsible.js
index 3a6c1b1..5ca0b12 100644
--- a/resources/jquery/jquery.makeCollapsible.js
+++ b/resources/jquery/jquery.makeCollapsible.js
@@ -143,7 +143,7 @@
}
/**
- * Handles clicking on the collapsible element toggle and other
+ * Handles clicking/keypressing on the collapsible element toggle and
other
* situations where a collapsible element is toggled (e.g. the initial
* toggle for collapsed ones).
*
@@ -160,8 +160,11 @@
}
if ( e ) {
- // Don't fire if a link was clicked, if requested (for
premade togglers by default)
- if ( options.linksPassthru && $.nodeName( e.target, 'a'
) ) {
+ if ( e.type === 'click' && options.linksPassthru &&
$.nodeName( e.target, 'a' ) ) {
+ // Don't fire if a link was clicked, if
requested (for premade togglers by default)
+ return;
+ } else if ( e.type === 'keypress' && e.which !== 13 ) {
+ // Only handle keypresses on the "Enter" key
return;
} else {
e.preventDefault();
@@ -227,7 +230,7 @@
}
return this.each( function () {
- var $collapsible, collapseText, expandText, $toggle,
clickHandler, buildDefaultToggleLink,
+ var $collapsible, collapseText, expandText, $toggle,
actionHandler, buildDefaultToggleLink,
premadeToggleHandler, $toggleLink, $firstItem,
collapsibleId, $customTogglers, firstval;
// Ensure class "mw-collapsible" is present in case
.makeCollapsible()
@@ -245,8 +248,8 @@
collapseText = options.collapseText ||
$collapsible.attr( 'data-collapsetext' ) || mw.msg( 'collapsible-collapse' );
expandText = options.expandText || $collapsible.attr(
'data-expandtext' ) || mw.msg( 'collapsible-expand' );
- // Default click handler and toggle link to use when
none is present
- clickHandler = function ( e, opts ) {
+ // Default click/keypress handler and toggle link to
use when none is present
+ actionHandler = function ( e, opts ) {
var defaultOpts = {
toggleClasses: true,
toggleText: { collapseText:
collapseText, expandText: expandText }
@@ -262,7 +265,7 @@
.parent()
.prepend( ' [' )
.append( '] ' )
- .on( 'click.mw-collapsible',
clickHandler );
+ .on( 'click.mw-collapsible
keypress.mw-collapsible', actionHandler );
};
// Default handler for clicking on premade toggles
@@ -291,14 +294,14 @@
// Bind the togglers
if ( $customTogglers && $customTogglers.length ) {
- clickHandler = function ( e, opts ) {
+ actionHandler = function ( e, opts ) {
var defaultOpts = {};
opts = $.extend( defaultOpts, options,
opts );
togglingHandler( $( this ),
$collapsible, e, opts );
};
$toggleLink = $customTogglers;
- $toggleLink.on( 'click.mw-collapsible',
clickHandler );
+ $toggleLink.on( 'click.mw-collapsible
keypress.mw-collapsible', actionHandler );
} else {
// If this is not a custom case, do the
default: wrap the
@@ -313,8 +316,8 @@
if ( !$toggle.length ) {
$toggleLink =
buildDefaultToggleLink().prependTo( $firstItem.eq( -1 ) );
} else {
- clickHandler =
premadeToggleHandler;
- $toggleLink = $toggle.on(
'click.mw-collapsible', clickHandler );
+ actionHandler =
premadeToggleHandler;
+ $toggleLink = $toggle.on(
'click.mw-collapsible keypress.mw-collapsible', actionHandler );
}
} else if ( $collapsible.is( 'ul' ) ||
$collapsible.is( 'ol' ) ) {
@@ -334,8 +337,8 @@
$toggleLink =
buildDefaultToggleLink();
$toggleLink.wrap( '<li
class="mw-collapsible-toggle-li"></li>' ).parent().prependTo( $collapsible );
} else {
- clickHandler =
premadeToggleHandler;
- $toggleLink = $toggle.on(
'click.mw-collapsible', clickHandler );
+ actionHandler =
premadeToggleHandler;
+ $toggleLink = $toggle.on(
'click.mw-collapsible keypress.mw-collapsible', actionHandler );
}
} else { // <div>, <p> etc.
@@ -352,8 +355,8 @@
if ( !$toggle.length ) {
$toggleLink =
buildDefaultToggleLink().prependTo( $collapsible );
} else {
- clickHandler =
premadeToggleHandler;
- $toggleLink = $toggle.on(
'click.mw-collapsible', clickHandler );
+ actionHandler =
premadeToggleHandler;
+ $toggleLink = $toggle.on(
'click.mw-collapsible keypress.mw-collapsible', actionHandler );
}
}
}
@@ -368,7 +371,7 @@
$collapsible.removeClass( 'mw-collapsed' );
// One toggler can hook to multiple elements,
and one element can have
// multiple togglers. This is the sanest way to
handle that.
- clickHandler.call( $toggleLink.get( 0 ), null,
{ instantHide: true } );
+ actionHandler.call( $toggleLink.get( 0 ), null,
{ instantHide: true } );
}
} );
};
--
To view, visit https://gerrit.wikimedia.org/r/72719
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib86833dbbbe8d5e4109090c70f1949ba97b9d119
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Matmarex <matma....@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
