From bbba25e0b0a8d6c4710ee983743bd79079abc1cf Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Tue, 10 Jul 2018 17:28:43 +0200 Subject: [PATCH] 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 `
` 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 --- resources/src/mediawiki.special.preferences.ooui/tabs.js | 8 +------- .../src/mediawiki.special.preferences.styles.ooui.less | 6 ++---- 2 files changed, 3 insertions(+), 11 deletions(-) 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 @@ $( '
' ).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, -- 2.20.1