From cccd5bfd2b8442a67b67468f805cf72e0cddb1a1 Mon Sep 17 00:00:00 2001 From: Volker E Date: Wed, 19 Sep 2018 11:45:00 -0700 Subject: [PATCH] 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 --- resources/src/mediawiki.special.preferences.ooui/tabs.js | 7 +++++-- resources/src/mediawiki.special.preferences.styles.css | 7 +++---- .../src/mediawiki.special.preferences.styles.ooui.less | 5 +++-- 3 files changed, 11 insertions(+), 8 deletions(-) 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: -- 2.20.1