A button with <a href="#"> is already selectable with tabs.
The tabindex="0" generates an additional selectable element.
Change-Id: I99b51129dc7fb3b2496c393607f7d8ae7854a0b6
} else {
collapsibleId = $collapsible.attr( 'id' ) || '';
if ( collapsibleId.indexOf( 'mw-customcollapsible-' ) === 0 ) {
} else {
collapsibleId = $collapsible.attr( 'id' ) || '';
if ( collapsibleId.indexOf( 'mw-customcollapsible-' ) === 0 ) {
- $customTogglers = $( '.' + collapsibleId.replace( 'mw-customcollapsible', 'mw-customtoggle' ) );
- $customTogglers.addClass( 'mw-customtoggle' );
+ $customTogglers = $( '.' + collapsibleId.replace( 'mw-customcollapsible', 'mw-customtoggle' ) )
+ .addClass( 'mw-customtoggle' );
togglingHandler( $( this ), $collapsible, e, opts );
};
togglingHandler( $( this ), $collapsible, e, opts );
};
- $toggleLink = $customTogglers;
- $toggleLink.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ $toggleLink = $customTogglers
+ .on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler )
+ .prop( 'tabIndex', 0 );
} else {
// If this is not a custom case, do the default: wrap the
} else {
// If this is not a custom case, do the default: wrap the
$toggleLink = buildDefaultToggleLink().appendTo( $caption );
} else {
actionHandler = premadeToggleHandler;
$toggleLink = buildDefaultToggleLink().appendTo( $caption );
} else {
actionHandler = premadeToggleHandler;
- $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler )
+ .prop( 'tabIndex', 0 );
}
} else {
// The toggle-link will be in one the the cells (td or th) of the first row
}
} else {
// The toggle-link will be in one the the cells (td or th) of the first row
$toggleLink = buildDefaultToggleLink().prependTo( $firstItem.eq( -1 ) );
} else {
actionHandler = premadeToggleHandler;
$toggleLink = buildDefaultToggleLink().prependTo( $firstItem.eq( -1 ) );
} else {
actionHandler = premadeToggleHandler;
- $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler )
+ .prop( 'tabIndex', 0 );
$toggleLink.wrap( '<li class="mw-collapsible-toggle-li"></li>' ).parent().prependTo( $collapsible );
} else {
actionHandler = premadeToggleHandler;
$toggleLink.wrap( '<li class="mw-collapsible-toggle-li"></li>' ).parent().prependTo( $collapsible );
} else {
actionHandler = premadeToggleHandler;
- $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler )
+ .prop( 'tabIndex', 0 );
}
} else { // <div>, <p> etc.
}
} else { // <div>, <p> etc.
$toggleLink = buildDefaultToggleLink().prependTo( $collapsible );
} else {
actionHandler = premadeToggleHandler;
$toggleLink = buildDefaultToggleLink().prependTo( $collapsible );
} else {
actionHandler = premadeToggleHandler;
- $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
+ $toggleLink = $toggle.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler )
+ .prop( 'tabIndex', 0 );
- // Attributes for accessibility. This isn't necessary when the toggler is already
- // an <a> or a <button> etc., but it doesn't hurt either, and it's consistent.
- $toggleLink.prop( 'tabIndex', 0 );
-
// Initial state
if ( options.collapsed || $collapsible.hasClass( 'mw-collapsed' ) ) {
// One toggler can hook to multiple elements, and one element can have
// Initial state
if ( options.collapsed || $collapsible.hasClass( 'mw-collapsed' ) ) {
// One toggler can hook to multiple elements, and one element can have