mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-22 12:42:43 +00:00
4b4fc6c6c9
- Hooking into mw.util.addPortlet - merged in tests from: I3258388d74c103515e3f0680304f9a376e439a35 possible follow-ups: - tooltips support - custom attributes support - Adapting portlets of types dropdown, tab to vector skin. Check patch set 10 for a starting point Depends-on: I79bad8661e34e653d41e6cb1cd4462ac5c6bc3b1 Bug: T303488 Change-Id: I35a51df6ece2e48e086e722337d4c6bba427eeb4
35 lines
1.6 KiB
Plaintext
35 lines
1.6 KiB
Plaintext
{{!
|
|
See @typedef MenuDefinition
|
|
}}
|
|
{{! this template must be used with Dropdown/Close to avoid unclosed HTML tags }}
|
|
<div id="{{id}}" class="vector-dropdown{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
|
{{!
|
|
Dropdown menus use the checkbox hack and require `input` and `label` elements.
|
|
The `label` element functions as the "visual" button and is hidden from screenreader users (T325026)
|
|
while the `input` element is the actual semantic button for toggling the dropdown.
|
|
The `input` element will always have an `aria-label`, which will usually match the
|
|
text inside the `label` element, unless an alternative label is provided via the `#aria-label`
|
|
mustache template data.
|
|
}}
|
|
<input {{!
|
|
}}type="checkbox" {{!
|
|
}}id="{{id}}-checkbox" {{!
|
|
}}role="button" {{!
|
|
}}aria-haspopup="true" {{!
|
|
}}data-event-name="ui.dropdown-{{id}}" {{!--
|
|
}}class="vector-dropdown-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}" {{!
|
|
}}{{#aria-label}}aria-label="{{.}}"{{/aria-label}} {{!
|
|
}}{{^aria-label}}aria-label="{{label}}"{{/aria-label}} {{!
|
|
}}{{#html-vector-menu-checkbox-attributes}} {{{.}}}{{/html-vector-menu-checkbox-attributes}}>
|
|
<label {{!
|
|
}}id="{{id}}-label" {{!
|
|
}}for="{{id}}-checkbox" {{!
|
|
}}class="vector-dropdown-label{{#label-class}} {{.}}{{/label-class}}" {{!
|
|
}}aria-hidden="true" {{!
|
|
}}{{#html-vector-menu-label-attributes}} {{{.}}}{{/html-vector-menu-label-attributes}}>{{!
|
|
}}{{#icon}}{{>Icon}}{{/icon}}{{!
|
|
}}<span class="vector-dropdown-label-text">{{label}}</span>
|
|
</label>
|
|
<div class="vector-dropdown-content">
|
|
|