From: Volker E Date: Wed, 19 Sep 2018 18:45:00 +0000 (-0700) Subject: Special:Preferences: Expose `.mw-navigation-hint` on keyboard focus only X-Git-Tag: 1.34.0-rc.0~3568^2 X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dmes_infos.php?a=commitdiff_plain;h=cccd5bfd2b8442a67b67468f805cf72e0cddb1a1;p=lhc%2Fweb%2Fwiklou.git Special:Preferences: Expose `.mw-navigation-hint` on keyboard focus only Screen reader users are not benefitting from the navigation hint message as we're exposing ARIA roles on tabs to them and keyboard navigation hint is sufficient. Bug: T204861 Change-Id: I720bb34ad7bed96fc3925648e4606fb1efa7d5e9 --- diff --git a/resources/src/mediawiki.special.preferences.ooui/tabs.js b/resources/src/mediawiki.special.preferences.ooui/tabs.js index 5642046773..38b520a7fb 100644 --- a/resources/src/mediawiki.special.preferences.ooui/tabs.js +++ b/resources/src/mediawiki.special.preferences.ooui/tabs.js @@ -7,12 +7,15 @@ $preferences = $( '#preferences' ); - // Make sure the accessibility tip is selectable so that screen reader users take notice, + // Make sure the accessibility tip is focussable so that keyboard users take notice, // but hide it by default to reduce visual clutter. // Make sure it becomes visible when focused. $( '
' ).addClass( 'mw-navigation-hint' ) .text( mw.msg( 'prefs-tabs-navigation-hint' ) ) - .attr( 'tabIndex', 0 ) + .attr( { + tabIndex: 0, + 'aria-hidden': 'true' + } ) .prependTo( '#mw-content-text' ); tabs = new OO.ui.IndexLayout( { diff --git a/resources/src/mediawiki.special.preferences.styles.css b/resources/src/mediawiki.special.preferences.styles.css index bdcfb79661..9d8ce7674e 100644 --- a/resources/src/mediawiki.special.preferences.styles.css +++ b/resources/src/mediawiki.special.preferences.styles.css @@ -24,12 +24,11 @@ /* The CSS below is also for JS enabled version, because we want to prevent FOUC */ /* - * Hide, but keep accessible for screen-readers. + * Hide, when not keyboard focussed. */ -.client-js .mw-navigation-hint { - overflow: hidden; +.client-js .mw-navigation-hint:not( :focus ) { height: 0; - zoom: 1; + overflow: hidden; } .client-nojs #preftoc { diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less index baa9beb305..6f91ad26f3 100644 --- a/resources/src/mediawiki.special.preferences.styles.ooui.less +++ b/resources/src/mediawiki.special.preferences.styles.ooui.less @@ -28,10 +28,11 @@ } /* - * Hide, but keep accessible for screen-readers. + * Hide, when not keyboard focussed. */ .client-js .mw-navigation-hint:not( :focus ) { - .mixin-screen-reader-text; + height: 0; + overflow: hidden; } /* Most outer Panellayout: