$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( {
/* 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 {
}
/*
- * 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: