wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-27 00:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/includes/templates/StickyHeader.mustache

41 lines
1.4 KiB
Plaintext
Raw Normal View History

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-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.
}}
<header id="vector-sticky-header" aria-hidden="true"
Simplify TOC spacing styles/logic by reusing the visible sticky header class - Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic - Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future - This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled Bug: T307345 Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
2022-05-05 20:54:20 +00:00
class="vector-sticky-header">
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start">
Add ULS to sticky header - Rework Icon template into Button template to support all button variants - Update ULS helper functions in SkinVector - Update StickyHeader template to use the new Button template - Update Storybook Bug: T289815 Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362 Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
2021-09-07 20:22:19 +00:00
{{#data-button-start}}
{{>Button}}
{{/data-button-start}}
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
</div>
Add search to sticky header Per T289724#7342741, server renders an anchor tag pointing to #p-search into the "button-start" bucket of the sticky header. In the future after T289718, this anchor will then acts as a button when the search module is loaded and searchToggle executes. * skins.vector.search was modified to accomodate instantiating multiple search components (one in the main header and one in the sticky header). * searchToggle.js was modified to accept a searchToggle element as a param which the caller can then instantiate when ideal. For the sticky header toggle, this needs to happen *after* the search module loads. Before then, the toggle will act as a link. * Drops one jQuery usage from searchToggle so that it can be jQuery free. Because the native .closest method is used, IE11 support is also dropped. However, the script feature detects and returns early if the API isn't available. * Makes App.vue accept an `id` prop so that multiple instances of it can be created. Bug: T289724 Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-09 21:40:06 +00:00
{{#data-search}}
Wire up sticky header search feature Bug: T289724 Change-Id: I784ea5eb12b6f43d19769ff48a14d3fd4627853c
2021-09-16 19:27:10 +00:00
{{>SearchBox}}
Add search to sticky header Per T289724#7342741, server renders an anchor tag pointing to #p-search into the "button-start" bucket of the sticky header. In the future after T289718, this anchor will then acts as a button when the search module is loaded and searchToggle executes. * skins.vector.search was modified to accomodate instantiating multiple search components (one in the main header and one in the sticky header). * searchToggle.js was modified to accept a searchToggle element as a param which the caller can then instantiate when ideal. For the sticky header toggle, this needs to happen *after* the search module loads. Before then, the toggle will act as a link. * Drops one jQuery usage from searchToggle so that it can be jQuery free. Because the native .closest method is used, IE11 support is also dropped. However, the script feature detects and returns early if the API isn't available. * Makes App.vue accept an `id` prop so that multiple instances of it can be created. Bug: T289724 Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-09 21:40:06 +00:00
{{/data-search}}
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
<div class="vector-sticky-header-context-bar">
Fix article title in sticky header template. Bug: T289814 Change-Id: Ie12097f722053eb9efb557a1e9668d26104a7091
2021-10-18 20:00:47 +00:00
<div class="vector-sticky-header-context-bar-primary" {{{html-user-language-attributes}}}>{{{html-title}}}</div>
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
</div>
</div>
<div class="vector-sticky-header-end">
<div class="vector-sticky-header-icons">
Add ULS to sticky header - Rework Icon template into Button template to support all button variants - Update ULS helper functions in SkinVector - Update StickyHeader template to use the new Button template - Update Storybook Bug: T289815 Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362 Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
2021-09-07 20:22:19 +00:00
{{#data-buttons}}
{{>Button}}
{{/data-buttons}}
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
</div>
Add ULS to sticky header - Rework Icon template into Button template to support all button variants - Update ULS helper functions in SkinVector - Update StickyHeader template to use the new Button template - Update Storybook Bug: T289815 Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362 Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
2021-09-07 20:22:19 +00:00
{{#data-primary-action}}
{{>Button}}
{{/data-primary-action}}
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
<div class="vector-sticky-header-icon-end">
Add user menu to sticky header - Remove unused button, data from sticky header. - Simplify template to leave sticky user menu placeholder. - Update js to clone user menu with new ids. - Include gadget-injected items in sticky user menu. Bug: T289816 Change-Id: I23fde537efc2a66a2df22cd2633fbab034b73eb6
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>
Build the sticky header skeleton The sticky header is currently disabled unconditionally and nothing is wired up, with placeholders for data and functionality which will be added in future. Bug: T289716 Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-08-30 22:44:00 +00:00
</div>
</div>
</header>
Reference in a new issue Copy permalink