mediawiki-skins-Vector/includes/templates/StickyHeader.mustache
Jan Drewniak 40bbb8c3a9 remove Page Tools config & HTML
Removes the config option for Page Tool menu,
its associated logic, along with the associated HTML from
the mustache templates.

Hardcodes the `vector-feature-page-tools-enabled` class
into the HTML element to prevent breakage.

Bug: T332090
Change-Id: I6466d80c6970bcc8e28d897b6bdff911a90e3655
2023-03-30 11:32:36 -04:00

58 lines
2.2 KiB
Plaintext

{{!
Sticky header is hidden from screen readers because it contains duplicated content
that is already accessible to assistive tech via landmark roles, element type, and other navigation methods.
The interactive elements in the sticky header should have the `tabindex="-1"` attribute set to ensure
the header is also not tab accessible.
See https://dequeuniversity.com/rules/axe/4.1/aria-hidden-focus and https://phabricator.wikimedia.org/T290201
for more context.
The exception to this is the TOC in the sticky header, which is not duplicated and is moved into the
sticky header in the DOM. We apply `aria-hidden` to all the contents of the sticky header except for the TOC.
}}
<header id="vector-sticky-header" class="vector-sticky-header">
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right" aria-hidden="true">
{{#data-button-start}}
{{>Button}}
{{/data-button-start}}
</div>
{{#data-search}}
{{>SearchBox}}
{{/data-search}}
<div class="vector-sticky-header-context-bar">
{{#data-toc}}
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
<nav role="navigation" aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
{{#data-sticky-header-toc-dropdown}}
{{>Dropdown/Open}}
{{#data-sticky-header-toc-pinnable-container}}
{{>PinnableContainer/Unpinned/Open}}
{{>PinnableContainer/Close}}
{{/data-sticky-header-toc-pinnable-container}}
{{>Dropdown/Close}}
{{/data-sticky-header-toc-dropdown}}
</nav>
{{/data-toc}}
<div class="vector-sticky-header-context-bar-primary" aria-hidden="true" {{{html-user-language-attributes}}}>{{{html-title}}}</div>
</div>
</div>
<div class="vector-sticky-header-end" aria-hidden="true">
<div class="vector-sticky-header-icons">
{{#data-icons}}
{{>Button}}
{{/data-icons}}
</div>
<div class="vector-sticky-header-buttons">
{{#data-buttons}}
{{>Button}}
{{/data-buttons}}
</div>
<div class="vector-sticky-header-icon-end">
<div class="vector-user-links">
{{! User menu items with unique ids are cloned here from the fixed header in stickyHeader.js. }}
</div>
</div>
</div>
</header>