Special:Preferences fix broken navigation hints

Bug: T341816
Change-Id: I81d262d1124e3f16c3c10e298b58f05e20dfdc75

languages/i18n/en.json

@@ -1259,6 +1259,7 @@
 	"prefs-diffs": "Diffs",
 	"prefs-help-prefershttps": "This preference will take effect on your next login.",
 	"prefs-tabs-navigation-hint": "Tip: You can use the left and right arrow keys to navigate between the tabs in the tabs list.",
+	"prefs-sections-navigation-hint": "Tip: You can use the Tab and Shift + Tab keys to navigate between the preference sections.",
 	"userrights": "User rights",
 	"userrights-summary": "",
 	"userrights-lookup-user": "Select a user",

languages/i18n/qqq.json

@@ -1512,6 +1512,7 @@
 	"prefs-diffs": "Used in [[Special:Preferences]], tab \"Misc\".\n{{Identical|Diff}}",
 	"prefs-help-prefershttps": "Used as help text for the checkbox in [[Special:Preferences]].\n\nThe checkbox has the label {{msg-mw|Tog-prefershttps}}.\n\nSee example: [[mw:Special:Preferences]].",
 	"prefs-tabs-navigation-hint": "Hint message that explains the arrow key navigation for the tabs on [[Special:Preferences]] to screenreader users.",
+	"prefs-sections-navigation-hint": "Hint message that explains the keyboard navigation for the mobile version of [[Special:Preferences]] to screenreader users.",
 	"userrights": "Page title of [[Special:UserRights]].",
 	"userrights-summary": "{{doc-specialpagesummary|userrights}}",
 	"userrights-lookup-user": "Label text when managing user rights ([[Special:UserRights]])",

resources/Resources.php

@@ -2251,6 +2251,7 @@ return [
 		],
 		'messages' => [
 			'prefs-tabs-navigation-hint',
+			'prefs-sections-navigation-hint',
 			'prefs-signature-highlight-error',
 			'prefs-back-title',
 			'searchprefs-noresults',

resources/src/mediawiki.special.preferences.ooui/mobile.js

@@ -3,6 +3,8 @@
  */
 ( function () {
 	var nav = require( './nav.js' );
+	nav.insertHints( mw.msg( 'prefs-sections-navigation-hint' ) );
+
 	// Define a window manager to control the dialogs
 	var dialogFactory = new OO.Factory();
 	var windowManager = new OO.ui.WindowManager( { factory: dialogFactory } );

resources/src/mediawiki.special.preferences.ooui/nav.js

@@ -10,12 +10,14 @@
 		 * 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.
+		 *
+		 * @param {string} hintMsg the layout-specific navigation hint message
 		 */
-		insertHints: function () {
+		insertHints: function ( hintMsg ) {
 			$( '<div>' ).addClass( 'mw-navigation-hint' )
-				.text( mw.msg( 'prefs-sections-navigation-hint' ) )
+				.text( hintMsg )
 				.attr( {
-					sectionIndex: 0
+					tabIndex: 0
 				} )
 				.insertBefore( '.mw-htmlform-ooui-wrapper' );
 		},

resources/src/mediawiki.special.preferences.ooui/tabs.js

@@ -4,7 +4,7 @@
 ( function () {
 	var nav = require( './nav.js' );
 	$( function () {
-		nav.insertHints();
+		nav.insertHints( mw.msg( 'prefs-tabs-navigation-hint' ) );
 
 		var tabs = OO.ui.infuse( $( '.mw-prefs-tabs' ) );
 

resources/src/mediawiki.special.preferences.styles.ooui.less

@@ -48,12 +48,18 @@
 	}
 }
 
-/*
- * Hide, when not keyboard focussed.
- */
+// Preferences navigation hint
+.client-js .mw-navigation-hint {
+	overflow: hidden;
+}
+
+// Hide when not keyboard focused.
 .client-js .mw-navigation-hint:not( :focus ) {
 	height: 0;
-	overflow: hidden;
+}
+
+.client-js .mw-navigation-hint:focus {
+	margin: 10px 0 10px 0;
 }
 
 .oo-ui-panelLayout {