mediawiki-skins-Vector/includes/templates/StickyHeader.mustache
bwang 405b52054f Update sticky header to be hidden to screen readers and not tabbable
- Adds aria-hidden="true" to the sticky header
- Adds tabindex="-1" support to Button.mustache and update sticky header button data
- Add tabindex to cloned user menu

Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9
2021-09-30 09:47:57 -05:00

41 lines
1.4 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.
}}
<header id="vector-sticky-header" aria-hidden="true"
class="vector-sticky-header{{#is-visible}} vector-sticky-header-visible{{/is-visible}}">
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start">
{{#data-button-start}}
{{>Button}}
{{/data-button-start}}
</div>
{{#data-search}}
{{>SearchBox}}
{{/data-search}}
<div class="vector-sticky-header-context-bar">
<div class="vector-sticky-header-context-bar-primary">{{html-title}}</div>
</div>
</div>
<div class="vector-sticky-header-end">
<div class="vector-sticky-header-icons">
{{#data-buttons}}
{{>Button}}
{{/data-buttons}}
</div>
{{#data-primary-action}}
{{>Button}}
{{/data-primary-action}}
<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>