From: Daniel Friesen <dantman@users.mediawiki.org>
Date: Sun, 25 Sep 2011 00:49:39 +0000 (+0000)
Subject: Improve the accessibility of our jump-to functionality
X-Git-Tag: 1.31.0-rc.0~27438
X-Git-Url: https://git.heureux-cyclage.org/?a=commitdiff_plain;h=db1a37382c6331c4f5d68169f0255d4de04e6fc8;p=lhc%2Fweb%2Fwiklou.git

Improve the accessibility of our jump-to functionality
- Stop hiding with display: none;, this hides our jump links from modern screen readers and users with motor disabilities (ie: nowadays, pratically everyone they are intended to help).
- Instead hide with an overflow that will make the links viable <tab> targets. This alone is enough to help screen reader users.
- Add in a script that will show the jump-links area on-focus for motor-impared users who can still see who have js enabled (this can't be done with css unfortunately)
---

diff --git a/resources/Resources.php b/resources/Resources.php
index 1d0a5a4497..c6ffee8722 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -158,6 +158,9 @@ return array(
 	'jquery.mwExtension' => array(
 		'scripts' => 'resources/jquery/jquery.mwExtension.js',
 	),
+	'jquery.mw-jump' => array(
+		'scripts' => 'resources/jquery/jquery.mw-jump.js',
+	),
 	'jquery.qunit' => array(
 		'scripts' => 'resources/jquery/jquery.qunit.js',
 		'styles' => 'resources/jquery/jquery.qunit.css',
@@ -610,6 +613,7 @@ return array(
 			'jquery.checkboxShiftClick',
 			'jquery.makeCollapsible',
 			'jquery.placeholder',
+			'jquery.mw-jump',
 			'mediawiki.util',
 		),
 	),
diff --git a/resources/jquery/jquery.mw-jump.js b/resources/jquery/jquery.mw-jump.js
new file mode 100644
index 0000000000..36b6690c28
--- /dev/null
+++ b/resources/jquery/jquery.mw-jump.js
@@ -0,0 +1,15 @@
+/**
+ * JavaScript to show jump links to motor-impaired users when they are focused.
+ */
+jQuery( function( $ ) {
+
+	$('.mw-jump').delegate( 'a', 'focus blur', function( e ) {
+		// Confusingly jQuery leaves e.type as "focusout" for delegated blur events
+		if ( e.type === "blur" || e.type === "focusout" ) {
+			$( this ).closest( '.mw-jump' ).css({ height: '0' });
+		} else {
+			$( this ).closest( '.mw-jump' ).css({ height: 'auto' });
+		}
+	} );
+
+} );
diff --git a/skins/MonoBook.php b/skins/MonoBook.php
index 1e7988c772..bd8a525138 100644
--- a/skins/MonoBook.php
+++ b/skins/MonoBook.php
@@ -80,7 +80,7 @@ class MonoBookTemplate extends BaseTemplate {
 <?php } ?><?php if($this->data['newtalk'] ) { ?>
 		<div class="usermessage"><?php $this->html('newtalk')  ?></div>
 <?php } ?><?php if($this->data['showjumplinks']) { ?>
-		<div id="jump-to-nav"><?php $this->msg('jumpto') ?> <a href="#column-one"><?php $this->msg('jumptonavigation') ?></a>, <a href="#searchInput"><?php $this->msg('jumptosearch') ?></a></div>
+		<div id="jump-to-nav" class="mw-jump"><?php $this->msg('jumpto') ?> <a href="#column-one"><?php $this->msg('jumptonavigation') ?></a>, <a href="#searchInput"><?php $this->msg('jumptosearch') ?></a></div>
 <?php } ?>
 		<!-- start content -->
 <?php $this->html('bodytext') ?>
diff --git a/skins/Vector.php b/skins/Vector.php
index 9b09ca35d2..f0b14eb961 100644
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -158,7 +158,7 @@ class VectorTemplate extends BaseTemplate {
 				<?php endif; ?>
 				<?php if ( $this->data['showjumplinks'] ): ?>
 				<!-- jumpto -->
-				<div id="jump-to-nav">
+				<div id="jump-to-nav" class="mw-jump">
 					<?php $this->msg( 'jumpto' ) ?> <a href="#mw-head"><?php $this->msg( 'jumptonavigation' ) ?></a>,
 					<a href="#p-search"><?php $this->msg( 'jumptosearch' ) ?></a>
 				</div>
diff --git a/skins/common/commonInterface.css b/skins/common/commonInterface.css
index 8dde5d2df8..aedb4711cb 100644
--- a/skins/common/commonInterface.css
+++ b/skins/common/commonInterface.css
@@ -46,7 +46,9 @@
 	display: none;
 }
 #jump-to-nav {
-	display: none;
+	/* Negate #contentSub's margin and replicate it so that the jump to links don't affect the spacing */
+	margin-top: -1.4em;
+	margin-bottom: 1.4em
 }
 #contentSub, #contentSub2 {
 	font-size: 84%;
diff --git a/skins/common/commonPrint.css b/skins/common/commonPrint.css
index 4cad47b9dc..014788f40b 100644
--- a/skins/common/commonPrint.css
+++ b/skins/common/commonPrint.css
@@ -114,6 +114,7 @@ body {
 
 .noprint,
 div#jump-to-nav,
+.mw-jump,
 div.top,
 div#column-one,
 #colophon,
diff --git a/skins/common/shared.css b/skins/common/shared.css
index f19a1279f3..f80f8ad793 100644
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -1006,3 +1006,11 @@ table.floatleft {
 #mw-credits a {
 	unicode-bidi: embed;
 }
+
+/* Accessibility */
+.mw-jump {
+	overflow: hidden;
+	height: 0;
+	zoom: 1; /* http://webaim.org/techniques/skipnav/#iequirk */
+}
+