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
This commit is contained in:
Volker E 2020-05-13 15:46:23 -07:00 committed by Jdlrobson
parent 14790f2ea8
commit 4466eb3a2f
3 changed files with 12 additions and 7 deletions

View file

@ -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>

View file

@ -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}}}

View file

@ -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">