From: Bartosz Dziewoński <matma.rex@gmail.com>
Date: Tue, 10 Jul 2018 15:28:43 +0000 (+0200)
Subject: mw.special.preferences: Prevent invisible accessibility hint from affecting content
X-Git-Tag: 1.34.0-rc.0~4828
X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/%22http:/wikimediafoundation.org/fundraising/%7B%7B%20url_for%28%27user_settings%27%2C%20userid=session.userid%29%20%7D%7D?a=commitdiff_plain;h=bbba25e0b0a8d6c4710ee983743bd79079abc1cf;p=lhc%2Fweb%2Fwiklou.git

mw.special.preferences: Prevent invisible accessibility hint from affecting content

With the current styles, if there is some text before the preferences
form (it can be defined in the 'preferences-summary' message), the
`<div class="mw-navigation-hint">` somehow pushes the rest of the page
content down by a few pixels. I think it might be preventing some
margins from collapsing? This actually causes a tiny FOUC after the
styles load.

Instead, use a neat pure CSS technique borrowed from Vector:
b843094a2d8c27a17e2c2b2ba97fb4aeea1d95d4.

I'm only changing the OOUI version, since the old one doesn't have the
problem.

Bug: T195986
Change-Id: I21924dd13bb83a0cb75b337ae7439c8ad8357946
---

diff --git a/resources/src/mediawiki.special.preferences.ooui/tabs.js b/resources/src/mediawiki.special.preferences.ooui/tabs.js
index 795a2b7e97..11ed425415 100644
--- a/resources/src/mediawiki.special.preferences.ooui/tabs.js
+++ b/resources/src/mediawiki.special.preferences.ooui/tabs.js
@@ -13,13 +13,7 @@
 		$( '<div>' ).addClass( 'mw-navigation-hint' )
 			.text( mw.msg( 'prefs-tabs-navigation-hint' ) )
 			.attr( 'tabIndex', 0 )
-			.on( 'focus blur', function ( e ) {
-				if ( e.type === 'blur' || e.type === 'focusout' ) {
-					$( this ).css( 'height', '0' );
-				} else {
-					$( this ).css( 'height', 'auto' );
-				}
-			} ).prependTo( '#mw-content-text' );
+			.prependTo( '#mw-content-text' );
 
 		tabs = new OO.ui.IndexLayout( {
 			expanded: false,
diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less
index ecf6887e4a..fac53f3032 100644
--- a/resources/src/mediawiki.special.preferences.styles.ooui.less
+++ b/resources/src/mediawiki.special.preferences.styles.ooui.less
@@ -30,10 +30,8 @@
 /*
  * Hide, but keep accessible for screen-readers.
  */
-.client-js .mw-navigation-hint {
-	overflow: hidden;
-	height: 0;
-	zoom: 1;
+.client-js .mw-navigation-hint:not( :focus ) {
+	.mixin-screen-reader-text;
 }
 
 /* Override OOUI styles so that dropdowns near the bottom of the form don't get clipped,