* No status line with URL and "#".
* No new tab on middle click.
a { cursor: pointer; } ensures to have a pointer as mouse cursor on hover.
tabindex="0" ensures to have a normal tab order.
role="button" according to
https://www.mediawiki.org/wiki/Accessibility_guide_for_developers
Change-Id: I5903901752ffb52e778f3582c7da0f820dc305c8
};
// Default toggle link. Only build it when needed to avoid jQuery memory leaks (event data).
buildDefaultToggleLink = function () {
- return $( '<a href="#"></a>' )
+ return $( '<a>' )
+ .attr( {
+ role: 'button',
+ tabindex: 0
+ } )
.text( collapseText )
.wrap( '<span class="mw-collapsible-toggle"></span>' )
.parent()
$link = $( '<a>' )
.text( showText )
- .attr( 'href', '#' )
- .click( function () {
- if ( $table.hasClass( 'collapsed' ) ) {
- $( this ).text( hideText );
- } else {
- $( this ).text( showText );
+ .attr( {
+ role: 'button',
+ tabindex: 0
+ } )
+ .on( 'click keypress', function ( e ) {
+ if (
+ e.type === 'click' ||
+ e.type === 'keypress' && e.which === 13
+ ) {
+ if ( $table.hasClass( 'collapsed' ) ) {
+ $( this ).text( hideText );
+ } else {
+ $( this ).text( showText );
+ }
+ $table.toggleClass( 'expanded collapsed' );
}
- $table.toggleClass( 'expanded collapsed' );
- return false;
} );
$col.append( $link );
text-decoration: none;
color: #0645ad;
background: none;
+ cursor: pointer; /* Always cursor:pointer even without href */
}
a:visited {
} else {
$el = $( '<a>' );
if ( typeof arg === 'function' ) {
- $el.attr( 'href', '#' )
- .click( function ( e ) {
- e.preventDefault();
+ $el.attr( {
+ role: 'button',
+ tabindex: 0
} )
- .click( arg );
+ .on( 'click keypress', function ( e ) {
+ if (
+ e.type === 'click' ||
+ e.type === 'keypress' && e.which === 13
+ ) {
+ arg.call( this, e );
+ }
+ } );
} else {
$el.attr( 'href', textify( arg ) );
}
$tocList = $toc.find( 'ul' ).eq( 0 );
// Hide/show the table of contents element
- function toggleToc( e ) {
- e.preventDefault();
+ function toggleToc() {
if ( $tocList.is( ':hidden' ) ) {
$tocList.slideDown( 'fast' );
$tocToggleLink.text( mw.msg( 'hidetoc' ) );
if ( $toc.length && $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
hideToc = mw.cookie.get( 'hidetoc' ) === '1';
- $tocToggleLink = $( '<a href="#" id="togglelink"></a>' )
+ $tocToggleLink = $( '<a role="button" tabindex="0" id="togglelink"></a>' )
.text( mw.msg( hideToc ? 'showtoc' : 'hidetoc' ) )
- .click( toggleToc );
+ .on( 'click keypress', function ( e ) {
+ if (
+ e.type === 'click' ||
+ e.type === 'keypress' && e.which === 13
+ ) {
+ toggleToc();
+ }
+ } );
$tocTitle.append(
$tocToggleLink
);
assert.htmlEqual(
formatParse( 'external-link-replace', function () {} ),
- 'Foo <a href="#">bar</a>',
+ 'Foo <a role="button" tabindex="0">bar</a>',
'External link message processed as function when format is \'parse\''
);