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
$( '<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,
/*
* 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,