Move sidebar into header to improve tab order

* Moves the sidebar into the header so that user can tab directly from
the sidebar button into the sidebar (when open).

* Because the sidebar is absolutely positioned inside the header and the
header applies a top-margin, we need to adjust the top position
calculation for the sidebar.

* Removes the checkbox from the accessibility tree through CSS `display:
none;` instead of HTML attributes.

* Given that the checkbox is not able to receive focus, the
`#mw-sidebar-checkbox:focus ~ .mw-header .mw-checkbox-hack-button` CSS
rule is obsolete and moved instead to the label button. An additional
outline: 0 rule was added to remove the dotted outline that Firefox
applies.

* Makes the "Skip to navigation" jump link point to the sidebar now.
After the sidebar has been tabbed through, the rest of the navigation
can be tabbed to.

Bug: T246420
Change-Id: I981da3650854568bb9cfbf3c6c59e7625e7d094c

includes/templates/skin.mustache

@@ -46,9 +46,7 @@
 	type="checkbox"
 	id="mw-sidebar-checkbox"
 	class="mw-checkbox-hack-checkbox"
-	{{#sidebar-visible}}checked{{/sidebar-visible}}
-	tabindex="-1"
-	aria-hidden="true">
+	{{#sidebar-visible}}checked{{/sidebar-visible}}>
 
 {{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
 <!-- Please do not use role attribute as CSS selector, it is deprecated. -->
@@ -70,7 +68,7 @@
 			using this place to insert extra elements before.
 		}}
 		<div id="jump-to-nav"></div>
-		<a class="mw-jump-link" href="#mw-head">{{msg-vector-jumptonavigation}}</a>
+		<a class="mw-jump-link" href="#mw-sidebar-button">{{msg-vector-jumptonavigation}}</a>
 		<a class="mw-jump-link" href="#searchInput">{{msg-vector-jumptosearch}}</a>
 		{{{html-bodycontent}}}
 		{{#html-printfooter}}
@@ -94,6 +92,7 @@
 		tabindex="0">
 		{{msg-vector-action-toggle-sidebar}}
 	</label>
+	{{#data-sidebar}}{{>Sidebar}}{{/data-sidebar}}
 
 	{{>Logo}}
 </header>
@@ -112,7 +111,6 @@
 			{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
 		</div>
 	</div>
-	{{#data-sidebar}}{{>Sidebar}}{{/data-sidebar}}
 </div>
 {{#data-footer}}{{>Footer}}{{/data-footer}}
 {{{html-printtail}}}

resources/skins.vector.styles/Sidebar.less

@@ -47,17 +47,18 @@
 			opacity: 1;
 		}
 	}
-}
 
-#mw-sidebar-checkbox:focus ~ .mw-header .mw-checkbox-hack-button {
-	// Next two rules from OOUI, frameless, icon-only button widget.
-	border-color: @color-primary;
-	.box-shadow( inset 0 0 0 1px @color-primary );
+	&:focus {
+		// Next three rules from OOUI, frameless, icon-only button widget.
+		outline: 0;
+		border-color: @color-primary;
+		.box-shadow( inset 0 0 0 1px @color-primary );
+	}
 }
 
 // Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
 // checkbox input for the menu panel.
-#mw-sidebar-checkbox:not( :checked ) ~ #mw-navigation .mw-sidebar {
+#mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar {
 	// Turn off presentation so that screen readers get the same effect as visually hiding.
 	// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
 	// instead to avoid hidden rendering.

resources/skins.vector.styles/checkboxHack.less

@@ -33,11 +33,10 @@
 @import 'mediawiki.mixins.less';
 
 .mw-checkbox-hack-checkbox {
-	position: absolute;
-	// Always lower the checkbox behind the foreground content.
-	z-index: -1;
-	// The checkbox `display` cannot be `none` since its focus state is used for other selectors.
-	opacity: 0;
+	// We don't want the browser to focus on the checkbox so we remove it from the
+	// accessibility tree. Instead, we want the label button to receive focus
+	// which has a tabindex of '0'.
+	display: none;
 }
 
 .mw-checkbox-hack-button {

resources/skins.vector.styles/layout.less

@@ -144,7 +144,10 @@ body {
 
 #mw-panel {
 	position: absolute;
-	top: @height-header;
+	// The sidebar is absolutely positioned inside the header which applies a top
+	// margin so we need to subtract this top margin in order to get the correct
+	// sidebar position.
+	top: @height-header - @margin-top-header;
 	left: 0;
 	width: @width-grid-column-one;
 	.box-sizing( border-box );