Commit graph

14 commits

Author SHA1 Message Date
Bartosz Dziewoński d82e4db35e Make dropdown menus keyboard-accessible without JavaScript
Instead of implementing keyboard (and mouse click) handling in
JavaScript, put an invisible <input type="checkbox"> into the
dropdown handle. It can be focused and toggled using keyboard
actions like a normal checkbox. This checkbox also takes over
the duties of handling mouse hovering and clicking.

Old JavaScript and CSS are left in place for compatibility with
cached page HTML, to be removed later in a follow-up.

Bug: T168080
Change-Id: I27532140b06c97921f1cfb64e44bff814d99a358
2018-01-03 21:58:51 +00:00
Thiemo Mättig d46cb97aeb Fix dysfunctional collapseCondition when right-most tab is the star
The issue I'm fixing here is described at
https://www.wikidata.org/wiki/Wikidata:Contact_the_development_team#Hard_to_read_titles

The code I'm touching here is from 2014. I believe the issue is not new, but
pops up extremely rarely. Multiple conditions must met:
1. The user must use an extreme zoom (or an extreme font size), or a
   super-narrow browser window. This is also how you should reproduce
   this: make your browser window very narrow, and then start zooming in
   extremely.
2. The issue only appears in namespaces where you can not move pages! This
   is the case for the vast majority of pages on Wikidata and the reason why
   it appears to be a Wikidata-only issue (which it is not). If you can move
   a page, the right-most button is "Move", which is wide enough to be worth
   collapsing, or is already collapsed.

If the right-most (":last") button is the watch star, the code believes it is
not worth collapsing it because the "More" button would consume more space.
This is true, but does not consider the other buttons that can also be
collapsed.

My code considers all collapsible buttons.

Change-Id: I6e94750b3b80940005f4d655e5e9b426d44b2ffb
2017-11-30 18:53:02 +00:00
Volker E e2c9a585e4 Bring menu tab appearance closer to standard widgets
Bringing appearance and behaviour closer to standard widget like
DropdownWidget:
- Amending color to be (closest) aligned to WikimediaUI color
  palette, but switch normal and `:hover`/`:focus` state in order not
  to be too disruptive of a change and align with rest of Vector tabs,
- removing obsolete JS functionality as IE 6 as only major browser
  affected does receive the menu items as tabs nonetheless and replacing
  with simple CSS selector,
- removing unnecessary and obsolete images and
- Lessifying selector

Bug: T153043
Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de
2017-10-19 23:24:15 +00:00
Bartosz Dziewoński 3c542f3078 Fix applying of focus styles to .vectorMenu handle
The .vectorMenuFocus class was being added on the wrong element, so
the styles for it never kicked in. I think this has been broken since
4fabc910d2e1bb4581ac7a80f019bd22758d089b (August 2013), which is
understandable since the style change is near impossible to notice
(the little triangle arrow turns a slightly lighter shade of grey).

Change-Id: I0f7881afde9e01061aacf009033255774d0acd8d
2017-10-03 19:50:51 +02:00
Ed Sanders 8842f744ee build: Update eslint-config-wikimedia 0.4->0.5, eslint 19->20
Change-Id: I61a9bc5567036dfcbc7697276583facbefac8b93
2017-08-25 16:21:21 +01:00
Fomafix 56ec1a3c87 Remove <div> inside of the <h3>
The <div> was introduced in aba11a7b but this is not valid in HTML 5.

This change ommits the <div> and attaches the background image to the
existing <span>.

Cached HTML with the <div></div> does not matter for the result.

Bug: T169551
Change-Id: I04f7032b6f6bafe10548fde690f55de66b56f61f
2017-07-12 06:21:51 +02:00
Fomafix 5c363643a7 Remove unused selectors for action menu
This change is a follow-up to aba11a7b1c.
Do not deploy this change until HTML cache from before aba11a7b1c expired.

Change-Id: I631260d58229b1b70e2d4e55f8302f9769de3511
2017-07-11 02:59:14 +00:00
Fomafix aba11a7b1c Use <div> instead of <a> for action menu
This change prevents that a middle click opens a new tab with the URL "#" and
prevents a wired outline around the button when selected of focused in Chrome.

The selector "> a" will be removed in a separate change which must get
deployed not before the HTML cache has expired.

Bug: T44241
Bug: T68388
Change-Id: I7255552d3bdec9e40727721b91630623ae24a08b
2017-06-06 08:02:49 +02:00
Timo Tijhof a1526f3ffd vector.js: Replace deprecated jQuery bind() with on()
> JQMIGRATE: jQuery.fn.bind() is deprecated

Note that bind() is not removed in v3, merely deprecated.
Even after the jQuery Migrate phase, it will continue to work.

https://jquery.com/upgrade-guide/3.0/

Ref I3c3dedaa.

Bug: T124742
Change-Id: I6bbd8f829ecf987228c6a5abd32c84e4e088a9bd
2016-11-21 18:10:43 -08:00
Timo Tijhof 46f1d417a6 vector.js: Calculate initial #p-cactions width lazily
Follows-up f354aafebc.

Avoid forced style calculation during page load. Instead calculate
in the very next animation frame. This is only a few ms later, but
makes a big difference by doing this outside the critical path.

Change-Id: I5805958781bf64d1e4a30f441ed7f57807072284
2016-08-27 00:41:44 +00:00
paladox 95ef8f2cc6 Update jscs to 2.1.0
Change-Id: Ibba453510c8e15c3e915d28f7ecf7c296bca7894
2015-10-22 00:38:01 +01:00
Bartosz Dziewoński 16e16eb075 Don't use JavaScript to style first sidebar portlet
We were adding a .first CSS class to the portlet from JavaScript
instead of just using a smarter selector, which caused the incorrectly
styled portlet to visibly flash sometimes.

This was only useful for IE 6 (even IE 7 supports the sibling selector
'+', which we can use here), and we don't serve JavaScript to it
anymore. It would be neater to use ':first-of-type', but that's not as
widely supported.

Bug: T89542
Change-Id: I1904b3899c43bca52a6c996b8ce08c8bdf764aa0
2015-02-15 00:43:55 +00:00
James D. Forrester 46c2ae820a test: Make code pass jscs 1.5.0 with Wikimedia code style preset
Change-Id: I385f7d9ca9f641b3ad936605af1f9894a57192e5
2015-02-14 12:45:20 -08:00
Bartosz Dziewoński d28f09df31 Move Vector skin from core
This is the final step of the process described at
<https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>.

Corresponding core change: Idfc38503.

Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 13:38:34 +02:00