Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector

- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector

Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778

includes/SkinVector.php

@@ -345,6 +345,8 @@ class SkinVector extends SkinMustache {
 		// Conditionally used values must use null to indicate absence (not false or '').
 
 		$commonSkinData = array_merge( $parentData, [
+			'is-legacy' => $this->isLegacy(),
+
 			'is-article' => (bool)$out->isArticle(),
 
 			'is-anon' => $this->getUser()->isAnon(),

includes/templates/Menu.mustache

@@ -12,8 +12,9 @@
 		data-event-name="ui.dropdown-{{id}}"
 		class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" />
 	{{/is-dropdown}}
-	<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>{{!
-		}}{{{html-vector-heading-icon}}} <span>{{label}}</span>
+	<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}} {{^is-legacy}}aria-hidden="true"{{/is-legacy}}>
+		{{{html-vector-heading-icon}}}
+		<span>{{label}}</span>
 		{{#is-dropdown}}
 			<span class="vector-menu-checkbox-expanded">{{msg-vector-menu-checkbox-expanded}}</span>
 			<span class="vector-menu-checkbox-collapsed">{{msg-vector-menu-checkbox-collapsed}}</span>

includes/templates/Navigation.mustache

@@ -1,5 +1,4 @@
 <div id="mw-navigation">
-	<h2>{{msg-navigation-heading}}</h2>
 	{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
 	<div id="mw-head">
 		<div class="mw-article-toolbar-container">

includes/templates/SearchBox.mustache

@@ -3,9 +3,11 @@
 }}
 <div id="p-search" role="search" class="{{class}}">
 	<div>
+		{{#is-legacy}}
 			<h3 {{{html-user-language-attributes}}}>
 				<label for="searchInput">{{msg-search}}</label>
 			</h3>
+		{{/is-legacy}}
 		<form action="{{form-action}}" id="searchform">
 			<div id="simpleSearch"{{#input-location}} data-search-loc="{{.}}"{{/input-location}}>
 				{{{html-input}}}

includes/templates/skin-legacy.mustache

@@ -14,8 +14,7 @@
 	string html-body-content
 	string html-categories
 	string html-after-content
-	string msg-navigation-heading heading for entire navigation that is
-		usually hidden to screen readers
+	string msg-navigation-heading
 	MenuDefinition data-portlets.data-personal
 	MenuDefinition data-portlets.data-namespaces
 	MenuDefinition data-portlets.data-variants

includes/templates/skin.mustache

@@ -15,7 +15,6 @@
 	string html-body-content
 	string html-categories
 	string html-after-content
-	string msg-navigation-heading
 	LogoOptions data-logos
 	object data-portlets
 	MenuDefinition data-portlets.data-personal

resources/common/components/SearchBox.less

@@ -2,11 +2,6 @@
 @import 'mediawiki.ui/variables.less';
 @import '../../common/variables.less';
 
-// Search portlet.
-#p-search h3 {
-	.mixin-screen-reader-text();
-}
-
 // Defined as `div`.
 // Provide extra element for gadgets due to `form` already carrying an `id`.
 #simpleSearch {

resources/skins.vector.styles.legacy/components/SearchBox.less

@@ -0,0 +1,6 @@
+@import 'mediawiki.mixins.less';
+
+// Search portlet.
+#p-search h3 {
+	.mixin-screen-reader-text();
+}

resources/skins.vector.styles.legacy/layouts/screen.less

@@ -81,12 +81,6 @@ body {
 	height: 5em;
 }
 
-/* Hide, but keep accessible for screen-readers */
-#mw-navigation h2 {
-	position: absolute;
-	top: -9999px;
-}
-
 #mw-head {
 	position: absolute;
 	top: 0;

resources/skins.vector.styles.legacy/skin-legacy.less

@@ -9,6 +9,7 @@
 
 	// Legacy specific components
 	@import './components/MenuDropdown.less';
+	@import './components/SearchBox.less';
 	@import './components/Sidebar.less';
 	@import './components/UserLinks.less';
 }

resources/skins.vector.styles/layouts/screen.less

@@ -198,12 +198,6 @@ body {
 	z-index: @z-index-base;
 }
 
-/* Hide, but keep accessible for screen-readers */
-#mw-navigation h2 {
-	position: absolute;
-	top: -9999px;
-}
-
 /* Navigation Containers */
 .mw-article-toolbar-container {
 	// Clear the floats on #left-navigation and #right-navigation.