- 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
One of the goals with desktop improvements is to not make any
visible changes to the original Vector skin.
In T289163 we wrapped links in a span, and moved the font-size
declaration to the span. The padding of the link is now applying
with font-size 16px.
Bug: T289163
Change-Id: Ifbf6f7a4c5cb6fda6389b33fc9962bdb03dd1f43
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)
Known limitations:
* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.
[1] https://caniuse.com/mdn-css_properties_scroll-padding-top
Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
When looking at raw html it always looks like something is missing when
there are trailing or leading spaces on attributes.
Just move the space into the conditions and it looks better.
Change-Id: I2a8d3246c43b8345eb819eae5887a39f68cfbdc0
* In legacy Vector, menu items are now wrapped with spans. This
consistency in HTML is required for splitting Vector into two
different skins.
* Vector's portlet link items now support icons
Bug: T289163
Bug: T291722
Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5
Styling should not depend on IDs to allow us to have multiple
searches in the page.
Precursor for wiring up search in the sticky header.
This also tweaks performance metrics to track separate metrics
for the sticky header search
Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
This is going to be forbidden going forward.
The legacy lookup and overrides are deferred
until they are actually needed to keep the constructor
cheap
Bug: T289163
Change-Id: Ib23360e3439abc828404c1de8e0906915ee7d8b6
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button
Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
1. "Change article language" can be understood as changing the article
itself. I'm changing it to "Go to an article in another language."
2. Remove comma splice.
Change-Id: I46c484129ecfda263603defe87c84906c1881c2b
Given we don't want to change the color in modern Vector we must rely on this
ugly hack to change the link color.
This can be revisited when Vector has been split into two skins
which can use 'mediawiki.skin.variables.less'.
Bug: T288739
Change-Id: I17401f897dce4e6adca9d05008899d28ff02517c
The user menu dropdown was announcing to screenreaders as "Personal tools expanded collapsed". This is due to the core icon classes causing the spans to be display: block. This patch adds !important to the relevant display styles to ensure the statuses are always read out correctly
Bug: T253650
Change-Id: I0b51af5da98af1bd0c0029db54420e395242842d
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
This makes the code more readable and allows us to apply
the suffixing in other places in the sticky header.
Change-Id: I44008c18a3faea2089bc93eb5ce7fea1cad1aaec
