bfc95effdb
* Moves the sidebar into the header so that user can tab directly from the sidebar button into the sidebar (when open). * Because the sidebar is absolutely positioned inside the header and the header applies a top-margin, we need to adjust the top position calculation for the sidebar. * Removes the checkbox from the accessibility tree through CSS `display: none;` instead of HTML attributes. * Given that the checkbox is not able to receive focus, the `#mw-sidebar-checkbox:focus ~ .mw-header .mw-checkbox-hack-button` CSS rule is obsolete and moved instead to the label button. An additional outline: 0 rule was added to remove the dotted outline that Firefox applies. * Makes the "Skip to navigation" jump link point to the sidebar now. After the sidebar has been tabbed through, the rest of the navigation can be tabbed to. Bug: T246420 Change-Id: I981da3650854568bb9cfbf3c6c59e7625e7d094c
117 lines
4.3 KiB
Plaintext
117 lines
4.3 KiB
Plaintext
{{!
|
|
string html-headelement a string of attribute HTML that begins with `<html>` and ends with
|
|
`</head>` and contains `meta` tags and ResourceLoader internals.
|
|
string|null html-sitenotice the contents of a banner defined in MediaWiki:Sitenotice.
|
|
Also used by CentralNotice to inject banners into Vector.
|
|
Indicator[] data-indicators wiki-defined badges such as "good article",
|
|
"featured article". An empty array if none are defined.
|
|
string page-langcode the content language of the article. Assumed to be escaped HTML.
|
|
string html-title
|
|
string html-prebodyhtml
|
|
bool page-isarticle
|
|
string msg-tagline
|
|
string html-subtitle
|
|
string html-undelete
|
|
string html-newtalk
|
|
string msg-vector-jumptonavigation
|
|
string msg-vector-jumptosearch
|
|
string html-bodycontent
|
|
string html-printfooter
|
|
string html-catlinks
|
|
string html-debuglog
|
|
string html-dataAfterContent
|
|
string html-navigation-heading heading for entire navigation that is usually hidden to screen
|
|
readers
|
|
LogoOptions data-logos
|
|
MenuDefinition data-personal-menu
|
|
MenuDefinition data-namespace-tabs
|
|
MenuDefinition data-variants
|
|
MenuDefinition data-page-actions
|
|
MenuDefinition data-page-actions-more
|
|
object data-search-box. See SearchBox.mustache for documentation.
|
|
boolean sidebar-visible For users that want to see the sidebar on initial render, this should be
|
|
true.
|
|
string msg-vector-action-toggle-sidebar The label used by the sidebar button.
|
|
object data-sidebar. See Sidebar.mustache for documentation.
|
|
object data-footer for footer template partial. see Footer.mustache for documentation.
|
|
string html-printtail HTML to render at the end of the page contained necessary script tags for
|
|
ResourceLoader terminated with `</body></html>`.
|
|
}}
|
|
|
|
{{{html-headelement}}}
|
|
|
|
<div id="mw-page-base" class="mw-header-placeholder noprint"></div>
|
|
|
|
<input
|
|
type="checkbox"
|
|
id="mw-sidebar-checkbox"
|
|
class="mw-checkbox-hack-checkbox"
|
|
{{#sidebar-visible}}checked{{/sidebar-visible}}>
|
|
|
|
{{! `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>
|
|
{{/html-sitenotice}}
|
|
{{>Indicators}}
|
|
<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
|
|
{{{html-prebodyhtml}}}
|
|
<div id="bodyContent" class="mw-body-content">
|
|
{{#page-isarticle}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/page-isarticle}}
|
|
<div id="contentSub"{{{html-userlangattributes}}}>{{{html-subtitle}}}</div>
|
|
{{#html-undelete}}<div id="contentSub2">{{{html-undelete}}}</div>{{/html-undelete}}
|
|
{{#html-newtalk}}<div class="usermessage">{{{html-newtalk}}}</div>{{/html-newtalk}}
|
|
{{!
|
|
Keep this empty `div` for compatibility with gadgets and user scripts
|
|
using this place to insert extra elements before.
|
|
}}
|
|
<div id="jump-to-nav"></div>
|
|
<a class="mw-jump-link" href="#mw-sidebar-button">{{msg-vector-jumptonavigation}}</a>
|
|
<a class="mw-jump-link" href="#searchInput">{{msg-vector-jumptosearch}}</a>
|
|
{{{html-bodycontent}}}
|
|
{{#html-printfooter}}
|
|
<div class="printfooter">{{{html-printfooter}}}</div>
|
|
{{/html-printfooter}}
|
|
{{{html-catlinks}}}
|
|
<div class="visualClear"></div>
|
|
{{{html-debuglog}}}
|
|
</div>
|
|
</main>
|
|
{{{html-dataAfterContent}}}
|
|
|
|
<header class="mw-header">
|
|
<label
|
|
id="mw-sidebar-button"
|
|
class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
|
|
for="mw-sidebar-checkbox"
|
|
role="button"
|
|
aria-controls="mw-panel"
|
|
data-event-name="ui.sidebar"
|
|
tabindex="0">
|
|
{{msg-vector-action-toggle-sidebar}}
|
|
</label>
|
|
{{#data-sidebar}}{{>Sidebar}}{{/data-sidebar}}
|
|
|
|
{{>Logo}}
|
|
</header>
|
|
|
|
<div id="mw-navigation">
|
|
<h2>{{{html-navigation-heading}}}</h2>
|
|
<div id="mw-head">
|
|
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
|
|
<div id="left-navigation">
|
|
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
|
|
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
|
</div>
|
|
<div id="right-navigation">
|
|
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
|
|
{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
|
|
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#data-footer}}{{>Footer}}{{/data-footer}}
|
|
{{{html-printtail}}}
|