Use <a> instead of <a href="#"> for JavaScript click events

* 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

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index ac60e8f..eef3846 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -270,7 +270,11 @@
                        };
                        // 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()

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.metadata.js b/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
index 4c75e33..a3a82d5 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
+++ b/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
@@ -23,15 +23,22 @@
 
                $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 );

diff --git a/resources/src/mediawiki.skinning/elements.css b/resources/src/mediawiki.skinning/elements.css
index 7b0b071..5fbfb85 100644 (file)
--- a/resources/src/mediawiki.skinning/elements.css
+++ b/resources/src/mediawiki.skinning/elements.css
@@ -11,6 +11,7 @@ a {
        text-decoration: none;
        color: #0645ad;
        background: none;
+       cursor: pointer; /* Always cursor:pointer even without href */
 }
 
 a:visited {

diff --git a/resources/src/mediawiki/mediawiki.jqueryMsg.js b/resources/src/mediawiki/mediawiki.jqueryMsg.js
index 44b9117..2646cff 100644 (file)
--- a/resources/src/mediawiki/mediawiki.jqueryMsg.js
+++ b/resources/src/mediawiki/mediawiki.jqueryMsg.js
@@ -1126,11 +1126,18 @@
                        } 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 ) );
                                }

diff --git a/resources/src/mediawiki/mediawiki.toc.js b/resources/src/mediawiki/mediawiki.toc.js
index 7bf73b6..0955c23 100644 (file)
--- a/resources/src/mediawiki/mediawiki.toc.js
+++ b/resources/src/mediawiki/mediawiki.toc.js
@@ -10,8 +10,7 @@
                $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' ) );
@@ -30,9 +29,16 @@
                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

diff --git a/tests/qunit/suites/resources/mediawiki/mediawiki.jqueryMsg.test.js b/tests/qunit/suites/resources/mediawiki/mediawiki.jqueryMsg.test.js
index 7133039..caaef83 100644 (file)
--- a/tests/qunit/suites/resources/mediawiki/mediawiki.jqueryMsg.test.js
+++ b/tests/qunit/suites/resources/mediawiki/mediawiki.jqueryMsg.test.js
@@ -662,7 +662,7 @@
                );
                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\''
                );