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:
parent
14790f2ea8
commit
4466eb3a2f
|
@ -14,7 +14,9 @@
|
||||||
footerRow[] array-footer-rows iterable list of footer rows
|
footerRow[] array-footer-rows iterable list of footer rows
|
||||||
}}
|
}}
|
||||||
{{{html-hook-vector-before-footer}}}
|
{{{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}}
|
{{#array-footer-rows}}
|
||||||
<ul id="{{id}}" {{#className}}class="{{.}}"{{/className}}>
|
<ul id="{{id}}" {{#className}}class="{{.}}"{{/className}}>
|
||||||
{{#array-items}}
|
{{#array-items}}
|
||||||
|
@ -23,4 +25,4 @@
|
||||||
</ul>
|
</ul>
|
||||||
{{/array-footer-rows}}
|
{{/array-footer-rows}}
|
||||||
<div style="clear: both;"></div>
|
<div style="clear: both;"></div>
|
||||||
</div>
|
</footer>
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
{{!
|
{{!
|
||||||
See @typedef MenuDefinition
|
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}}}>
|
{{{html-userlangattributes}}}>
|
||||||
{{#is-dropdown}}
|
{{#is-dropdown}}
|
||||||
<input type="checkbox" class="vectorMenuCheckbox vector-menu-checkbox" aria-labelledby="{{label-id}}" />
|
<input type="checkbox" class="vectorMenuCheckbox vector-menu-checkbox" aria-labelledby="{{label-id}}" />
|
||||||
|
@ -17,6 +19,6 @@
|
||||||
<ul class="{{list-classes}}">{{{html-items}}}</ul>
|
<ul class="{{list-classes}}">{{{html-items}}}</ul>
|
||||||
{{{html-after-portal}}}
|
{{{html-after-portal}}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
{{! Note: html-hook-vector-after-toolbox is deprecated. }}
|
{{! Note: html-hook-vector-after-toolbox is deprecated. }}
|
||||||
{{{html-hook-vector-after-toolbox}}}
|
{{{html-hook-vector-after-toolbox}}}
|
||||||
|
|
|
@ -38,8 +38,9 @@
|
||||||
{{{html-headelement}}}
|
{{{html-headelement}}}
|
||||||
|
|
||||||
<div id="mw-page-base" class="mw-header-placeholder noprint"></div>
|
<div id="mw-page-base" class="mw-header-placeholder noprint"></div>
|
||||||
|
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
||||||
<div id="content" class="mw-body" role="main">
|
<!-- Please do not use role attribute as CSS selector, it is deprecated. -->
|
||||||
|
<main id="content" class="mw-body" role="main">
|
||||||
<a id="top"></a>
|
<a id="top"></a>
|
||||||
{{#html-sitenotice}}
|
{{#html-sitenotice}}
|
||||||
<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>
|
<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>
|
||||||
|
@ -67,7 +68,7 @@
|
||||||
<div class="visualClear"></div>
|
<div class="visualClear"></div>
|
||||||
{{{html-debuglog}}}
|
{{{html-debuglog}}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
{{{html-dataAfterContent}}}
|
{{{html-dataAfterContent}}}
|
||||||
|
|
||||||
<header class="mw-header">
|
<header class="mw-header">
|
||||||
|
|
Loading…
Reference in New Issue