From 4f8967672dd0064ebc106f62f00f74a6517cd02d Mon Sep 17 00:00:00 2001
From: Fomafix <fomafix@googlemail.com>
Date: Mon, 16 Jun 2014 08:30:17 +0000
Subject: [PATCH] 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
---
 .../src/jquery/jquery.makeCollapsible.js      |  6 ++++-
 .../mediawiki.action.view.metadata.js         | 23 ++++++++++++-------
 resources/src/mediawiki.skinning/elements.css |  1 +
 .../src/mediawiki/mediawiki.jqueryMsg.js      | 15 ++++++++----
 resources/src/mediawiki/mediawiki.toc.js      | 14 +++++++----
 .../mediawiki/mediawiki.jqueryMsg.test.js     |  2 +-
 6 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index ac60e8f435..eef3846eb2 100644
--- 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 4c75e333f5..a3a82d51a6 100644
--- 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 7b0b071f46..5fbfb85c65 100644
--- 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 44b9117799..2646cffe98 100644
--- 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 7bf73b6186..0955c23f06 100644
--- 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 71330398a0..caaef83c1b 100644
--- 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\''
 		);
 
-- 
2.20.1