2022-11-02 23:00:04 +00:00
|
|
|
{{!
|
|
|
|
See @typedef MenuDefinition
|
|
|
|
}}
|
|
|
|
{{! this template must be used with Dropdown/Close to avoid unclosed HTML tags }}
|
2023-01-03 20:03:42 +00:00
|
|
|
{{! DO NOT REMOVE vector-menu class. It is used for click tracking in Extension:WikimediaEvents }}
|
2022-11-17 23:12:52 +00:00
|
|
|
<div id="{{id}}" class="vector-menu vector-dropdown vector-menu-dropdown{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
2022-11-02 23:00:04 +00:00
|
|
|
{{!
|
|
|
|
Dropdown menus use the checkbox hack and require `input` and `label` elements.
|
2023-01-24 18:03:54 +00:00
|
|
|
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.
|
2022-11-02 23:00:04 +00:00
|
|
|
}}
|
|
|
|
<input type="checkbox"
|
|
|
|
id="{{id}}-checkbox"
|
|
|
|
role="button"
|
|
|
|
aria-haspopup="true"
|
|
|
|
data-event-name="ui.dropdown-{{id}}"
|
|
|
|
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
|
|
|
|
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
|
2023-01-24 18:03:54 +00:00
|
|
|
{{^aria-label}}aria-label="{{label}}"{{/aria-label}}
|
2022-11-02 23:00:04 +00:00
|
|
|
{{{html-vector-menu-checkbox-attributes}}}
|
|
|
|
/>
|
|
|
|
<label
|
|
|
|
id="{{id}}-label"
|
|
|
|
for="{{id}}-checkbox"
|
|
|
|
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
|
2023-01-24 18:03:54 +00:00
|
|
|
aria-hidden="true"
|
2022-11-02 23:00:04 +00:00
|
|
|
{{{html-vector-menu-heading-attributes}}}
|
|
|
|
>
|
|
|
|
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
|
|
|
|
</label>
|
2022-12-16 18:03:07 +00:00
|
|
|
{{! FIXME: Rename this class to vector-dropdown-content. It currently clashes with MenuContents mustache template }}
|
2023-02-01 23:38:44 +00:00
|
|
|
<div class="vector-menu-content vector-dropdown-content">
|
2022-11-02 23:00:04 +00:00
|
|
|
|