From 4466eb3a2fd5170fd9702f512db54f75bf56aefd Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Wed, 13 May 2020 15:46:23 -0700
Subject: [PATCH] Use semantic HTML5 elements where applicable

`[role]`s are retained for now as they are harmless although
redundant when added to HTML5 elements.
`role="contentinfo"` on `footer` is a special case to address
a known VoiceOver bug.

Bug: T66477
Change-Id: I540d9a41fc7fd580c5d61b90480e8745ae145850
---
 includes/templates/Footer.mustache | 6 ++++--
 includes/templates/Menu.mustache   | 6 ++++--
 includes/templates/skin.mustache   | 7 ++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/includes/templates/Footer.mustache b/includes/templates/Footer.mustache
index 034c9ad..58d261b 100644
--- a/includes/templates/Footer.mustache
+++ b/includes/templates/Footer.mustache
@@ -14,7 +14,9 @@
 	footerRow[] array-footer-rows iterable list of footer rows
 }}
 {{{html-hook-vector-before-footer}}}
-<div id="footer" class="mw-footer" role="contentinfo" {{{html-userlangattributes}}}>
+{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles and
+	to mitigate a VoiceOver bug. }}
+<footer id="footer" class="mw-footer" role="contentinfo" {{{html-userlangattributes}}}>
 	{{#array-footer-rows}}
 	<ul id="{{id}}" {{#className}}class="{{.}}"{{/className}}>
 		{{#array-items}}
@@ -23,4 +25,4 @@
 	</ul>
 	{{/array-footer-rows}}
 	<div style="clear: both;"></div>
-</div>
+</footer>
diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 985b778..4dbe79e 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -1,7 +1,9 @@
 {{!
 	See @typedef MenuDefinition
 }}
-<div id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{label-id}}" {{{html-tooltip}}}
+{{! `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. -->
+<nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{label-id}}" role="navigation" {{{html-tooltip}}}
 	 {{{html-userlangattributes}}}>
 	{{#is-dropdown}}
 	<input type="checkbox" class="vectorMenuCheckbox vector-menu-checkbox" aria-labelledby="{{label-id}}" />
@@ -17,6 +19,6 @@
 		<ul class="{{list-classes}}">{{{html-items}}}</ul>
 		{{{html-after-portal}}}
 	</div>
-</div>
+</nav>
 {{! Note: html-hook-vector-after-toolbox is deprecated. }}
 {{{html-hook-vector-after-toolbox}}}
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 427cbdf..fba1022 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -38,8 +38,9 @@
 {{{html-headelement}}}
 
 <div id="mw-page-base" class="mw-header-placeholder noprint"></div>
-
-<div id="content" class="mw-body" role="main">
+{{! `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. -->
+<main id="content" class="mw-body" role="main">
 	<a id="top"></a>
 	{{#html-sitenotice}}
 		<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>
@@ -67,7 +68,7 @@
 		<div class="visualClear"></div>
 		{{{html-debuglog}}}
 	</div>
-</div>
+</main>
 {{{html-dataAfterContent}}}
 
 <header class="mw-header">