Update sticky header to be hidden to screen readers and not tabbable

- Adds aria-hidden="true" to the sticky header
- Adds tabindex="-1" support to Button.mustache and update sticky header button data
- Add tabindex to cloned user menu

Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9

includes/SkinVector.php

@@ -47,6 +47,7 @@ class SkinVector extends SkinMustache {
 	private const NO_ICON = [
 		'icon' => 'none',
 		'is-quiet' => true,
+		'tabindex' => '-1',
 		'class' => 'sticky-header-icon'
 	];
 	private const TALK_ICON = [
@@ -55,6 +56,7 @@ class SkinVector extends SkinMustache {
 		'event' => 'talk-sticky-header',
 		'icon' => 'wikimedia-speechBubbles',
 		'is-quiet' => true,
+		'tabindex' => '-1',
 		'class' => 'sticky-header-icon'
 	];
 	private const HISTORY_ICON = [
@@ -63,6 +65,7 @@ class SkinVector extends SkinMustache {
 		'event' => 'history-sticky-header',
 		'icon' => 'wikimedia-history',
 		'is-quiet' => true,
+		'tabindex' => '-1',
 		'class' => 'sticky-header-icon'
 	];
 	private const SEARCH_EXPANDING_CLASS = 'vector-search-box-show-thumbnail';
@@ -357,6 +360,7 @@ class SkinVector extends SkinMustache {
 				'label' => $this->msg( 'search' ),
 				'icon' => 'wikimedia-search',
 				'is-quiet' => true,
+				'tabindex' => '-1',
 				'class' => 'vector-sticky-header-search-toggle',
 			],
 			'data-search' => $searchBoxData,
@@ -586,6 +590,7 @@ class SkinVector extends SkinMustache {
 			'id' => 'p-lang-btn-sticky-header',
 			'class' => 'mw-interlanguage-selector',
 			'is-quiet' => true,
+			'tabindex' => '-1',
 			'label' => $this->getULSLabel( 'vector-language-button-label' ),
 			'html-vector-button-icon' => Hooks::makeIcon( 'wikimedia-language' ),
 		];

includes/templates/Button.mustache

@@ -1,6 +1,7 @@
 {{#href}}<a href="{{.}}"{{/href}}
 {{^href}}<button{{/href}}
 	{{#id}}id="{{.}}"{{/id}}
+	{{#tabindex}}tabindex="{{.}}"{{/tabindex}}
 	{{#event}}data-event-name="{{.}}"{{/event}}
 	class="mw-ui-button{{#is-quiet}} mw-ui-quiet{{/is-quiet}}{{#icon}} mw-ui-icon mw-ui-icon-element mw-ui-icon-{{.}}{{/icon}} {{class}}">
 	{{{html-vector-button-icon}}}

includes/templates/StickyHeader.mustache

@@ -1,4 +1,13 @@
-<header id="vector-sticky-header"
+{{!
+	Sticky header is hidden from screen readers because it contains duplicated content
+	that is already accessible to assistive tech via landmark roles, element type, and other navigation methods.
+	The interactive elements in the sticky header should have the `tabindex="-1"` attribute set to ensure
+	the header is also not tab accessible.
+
+	See https://dequeuniversity.com/rules/axe/4.1/aria-hidden-focus and https://phabricator.wikimedia.org/T290201
+	for more context.
+}}
+<header id="vector-sticky-header" aria-hidden="true"
 	class="vector-sticky-header{{#is-visible}} vector-sticky-header-visible{{/is-visible}}">
 	<div class="vector-sticky-header-start">
 		<div class="vector-sticky-header-icon-start">

resources/skins.vector.js/stickyHeader.js

@@ -113,12 +113,18 @@ function makeStickyHeaderFunctional(
 	makeNodeTrackable( userMenuClone );
 	userMenuStickyElementsWithIds.forEach( makeNodeTrackable );
 
-	// Remove portlet links added by gadgets using mw.util.addPortletLink
+	// Remove portlet links added by gadgets using mw.util.addPortletLink, T291426
 	var gadgetLinks = userMenuClone.querySelector( 'mw-list-item-js' );
 	if ( gadgetLinks ) {
 		gadgetLinks.remove();
 	}
 
+	// Prevents user menu from being focusable, T290201
+	var userMenuCheckbox = userMenuClone.querySelector( 'input' );
+	if ( userMenuCheckbox ) {
+		userMenuCheckbox.setAttribute( 'tabindex', '-1' );
+	}
+
 	// Clone the updated user menu to the sticky header.
 	if ( userMenuStickyContainerInner ) {
 		userMenuStickyContainerInner.appendChild( userMenuClone );