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 5642046..38b520a 100644 (file)
--- 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.
                $( '<div>' ).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 bdcfb79..9d8ce76 100644 (file)
--- 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 baa9beb..6f91ad2 100644 (file)
--- 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: