Put ARIA roles and attributes into context

Hide checkbox from AT by adding `aria-hidden="true" to checkbox
and disable tabbing in via tabindex="-1". Both attributes are temporarily
added and might be removed when the checkbox receives `display: none` in
upcoming patch.

Add
- `role="button"`,
- `aria-controls` and
- `tabindex="0"
to button turned label for ATs via `role` definition, make it focusable
and use `aria-controls` for connection to sidebar id.

Bug: T254851
Change-Id: Ife287fc8c6e0d2aee5facf42d5d4308dea918ee3

includes/templates/skin.mustache

@@ -46,10 +46,9 @@
 	type="checkbox"
 	id="mw-sidebar-checkbox"
 	class="mw-checkbox-hack-checkbox"
-	role="button"
 	{{#sidebar-visible}}checked{{/sidebar-visible}}
-	aria-labelledby="mw-sidebar-button"
-	aria-controls="mw-panel">
+	tabindex="-1"
+	aria-hidden="true">
 
 {{! `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. -->
@@ -89,7 +88,10 @@
 		id="mw-sidebar-button"
 		class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
 		for="mw-sidebar-checkbox"
-		data-event-name="ui.sidebar">
+		role="button"
+		aria-controls="mw-panel"
+		data-event-name="ui.sidebar"
+		tabindex="0">
 		{{msg-vector-action-toggle-sidebar}}
 	</label>