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 795a2b7..11ed425 100644 (file)
--- 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 ecf6887..fac53f3 100644 (file)
--- 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,