2021-09-21 16:01:33 +00:00
|
|
|
{{!
|
|
|
|
|
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.
|
2023-02-21 21:19:52 +00:00
|
|
|
|
|
|
|
|
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.
|
2021-09-21 16:01:33 +00:00
|
|
|
}}
|
2023-03-28 17:45:48 +00:00
|
|
|
<div id="vector-sticky-header" class="vector-sticky-header">
|
2021-08-30 22:44:00 +00:00
|
|
|
<div class="vector-sticky-header-start">
|
2023-04-27 20:39:40 +00:00
|
|
|
<div class="vector-sticky-header-icon-start vector-button-flush-left vector-button-flush-right" aria-hidden="true">
|
2021-09-07 20:22:19 +00:00
|
|
|
{{#data-button-start}}
|
|
|
|
|
{{>Button}}
|
|
|
|
|
{{/data-button-start}}
|
2021-08-30 22:44:00 +00:00
|
|
|
</div>
|
2021-09-09 21:40:06 +00:00
|
|
|
{{#data-search}}
|
2021-09-16 19:27:10 +00:00
|
|
|
{{>SearchBox}}
|
2021-09-09 21:40:06 +00:00
|
|
|
{{/data-search}}
|
2021-08-30 22:44:00 +00:00
|
|
|
<div class="vector-sticky-header-context-bar">
|
2023-02-27 21:58:49 +00:00
|
|
|
{{#data-toc}}
|
2023-01-12 22:08:03 +00:00
|
|
|
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
|
2023-02-21 21:19:52 +00:00
|
|
|
<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>
|
2023-02-27 21:58:49 +00:00
|
|
|
{{/data-toc}}
|
2023-02-21 21:19:52 +00:00
|
|
|
<div class="vector-sticky-header-context-bar-primary" aria-hidden="true" {{{html-user-language-attributes}}}>{{{html-title}}}</div>
|
2021-08-30 22:44:00 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-03-27 20:29:34 +00:00
|
|
|
<div class="vector-sticky-header-end" aria-hidden="true">
|
2021-08-30 22:44:00 +00:00
|
|
|
<div class="vector-sticky-header-icons">
|
2023-04-25 16:53:19 +00:00
|
|
|
{{#array-icon-buttons}}
|
2023-01-30 15:33:57 +00:00
|
|
|
{{>Button}}
|
2023-04-25 16:53:19 +00:00
|
|
|
{{/array-icon-buttons}}
|
2023-01-30 15:33:57 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="vector-sticky-header-buttons">
|
2023-04-25 16:53:19 +00:00
|
|
|
{{#array-buttons}}
|
2021-09-07 20:22:19 +00:00
|
|
|
{{>Button}}
|
2023-04-25 16:53:19 +00:00
|
|
|
{{/array-buttons}}
|
2021-08-30 22:44:00 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="vector-sticky-header-icon-end">
|
2021-09-09 02:26:33 +00:00
|
|
|
<div class="vector-user-links">
|
|
|
|
|
{{! User menu items with unique ids are cloned here from the fixed header in stickyHeader.js. }}
|
|
|
|
|
</div>
|
2021-08-30 22:44:00 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-03-28 17:45:48 +00:00
|
|
|
</div>
|
