From b843094a2d8c27a17e2c2b2ba97fb4aeea1d95d4 Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Mon, 21 May 2018 17:28:07 +0100 Subject: [PATCH] Re-implement and improve mw-jump links with pure CSS * Improve their accessibility by giving both links a full label "Jump to x" and "Jump to y" instead of "Jump to: ", "x", "y". This also makes things much better for localisation, for which we generally discourage use of concatenation. * Use pure CSS for the toggling of the visibility on focus, instead of relying on JavaScript. Especially given the JS comes form core's 'jquery.mw-jump' module, which is considered technical debt per T195256. Alternatively, that could be copied to vector.js, but pure CSS is possible, so why not. * Use plain links in the HTML instead of wrapped in a
. This solves the long-standing problem whereby the margin between #contentSub and #mw-content-text had to be awkwardly negated and overridden in core and on various to make sure that the wrapper itself would become visible as needed, in a way that has margin around this. This whole problem doesn't apply when simply using inline links that aren't part of the regular flow with .mixin-screen-reader-text. On focus, the individually focussed link appears in regular flow, without the need for any custom styles. * This uses :not(:focus) to naturally make it render in the default way on focus, and visibibly hidden/clipped otherwise. This is supported in IE9+ and Android 2+. There is a way to make it work with CSS2 for IE7-8, by applying the mixin to '.mw-jump-link' only and then undoing all of 'position', 'width', 'height', 'clip', and 'margin' on :focus. But I'm not sure that's worth it here. The fallback in IE7-8 for not supporting ":not(:focus)" is that the accessibility link is simply visible always, which seems like a good fallback for accessibility, and doesn't hurt anything. Bug: T195256 Change-Id: Icaadb290f692b3617688d32cbb66dfb007f1c82c --- components/navigation.less | 4 ++++ i18n/en.json | 2 ++ i18n/qqq.json | 2 ++ includes/VectorTemplate.php | 12 +++++------- print.less | 7 ++++--- 5 files changed, 17 insertions(+), 10 deletions(-) diff --git a/components/navigation.less b/components/navigation.less index 1dc8a5b8a..2b047c2af 100644 --- a/components/navigation.less +++ b/components/navigation.less @@ -9,6 +9,10 @@ top: -9999px; } +.mw-jump-link:not( :focus ) { + .mixin-screen-reader-text; +} + /* Head */ #mw-page-base { height: 5em; diff --git a/i18n/en.json b/i18n/en.json index 949218e75..8cf88d4de 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -17,5 +17,7 @@ "vector-view-history": "View history", "vector-view-view": "Read", "vector-view-viewsource": "View source", + "vector-jumptonavigation": "Jump to navigation", + "vector-jumptosearch": "Jump to search", "vector-more-actions": "More" } diff --git a/i18n/qqq.json b/i18n/qqq.json index e34789e47..95a605961 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -26,5 +26,7 @@ "vector-view-history": "Tab label in the Vector skin. See for example {{canonicalurl:Main_Page|useskin=vector}}\n{{Identical|View history}}", "vector-view-view": "Tab label in the Vector skin (verb). See for example {{canonicalurl:Main_Page|useskin=vector}}.\n{{Identical|Read}}", "vector-view-viewsource": "Tab label in the Vector skin.\n{{Identical|View source}}", + "vector-jumptonavigation": "Accessibility link for jumping to the navigation links. Visually hidden by default.\n\nSee also\n* {{mw-msg|Navigation}}", + "vector-jumptosearch": "Accessibility link for jumping to the site search. Visually hidden by default.\n\nSee also\n* {{mw-msg|Search}}", "vector-more-actions": "Label in the Vector skin's menu for the less-important or rarer actions which are not shown as tabs (like moving the page, or for sysops deleting or protecting the page), as well as (for users with a narrow viewing window in their browser) the less-important tab actions which the user's browser is unable to fit in. {{Identical|More}}" } diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php index 7b2f9e131..ca339889c 100644 --- a/includes/VectorTemplate.php +++ b/includes/VectorTemplate.php @@ -118,14 +118,12 @@ class VectorTemplate extends BaseTemplate { $this->get( 'newtalk' ) ); } + // Keep this empty `div` for compatibility with gadgets and user scripts + // using this place to insert extra elements before. + echo Html::element( 'div', [ 'id' => 'jump-to-nav' ] ); ?> - + msg( 'vector-jumptonavigation' ) ?> + msg( 'vector-jumptosearch' ) ?> html( 'bodycontent' ); diff --git a/print.less b/print.less index ce1e6aa21..ec6a3705a 100644 --- a/print.less +++ b/print.less @@ -205,10 +205,11 @@ font-size: 10pt; } } + } - .tocnumber { - display: none; - } + .mw-jump-link, + .toc .tocnumber { + display: none; } .printfooter {