mediawiki-skins-Vector/includes/templates/Dropdown/Open.mustache
bwang 8db112ddb3 Fix dropdown icon markup to match Codex button
- Fixes TOC button being transparent (https://jmp.sh/jbuivqlM). FYI the fixed width toggle button has the same issue.
- Add replace `html-vector-heading-icon` with Icon.mustache

Bug: T320453
Depends-on: I9a990ea8de63fb336391bea11b4503d447fb9d4f
Change-Id: I39397f8e98f79a2fdde9a8d785690133ea5a2619
2023-02-21 12:41:44 -06:00

38 lines
1.6 KiB
Plaintext

{{!
See @typedef MenuDefinition
}}
{{! this template must be used with Dropdown/Close to avoid unclosed HTML tags }}
{{! DO NOT REMOVE vector-menu class. It is used for click tracking in Extension:WikimediaEvents }}
<div id="{{id}}" class="vector-menu vector-dropdown vector-menu-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-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
{{^aria-label}}aria-label="{{label}}"{{/aria-label}}
{{{html-vector-menu-checkbox-attributes}}}
/>
<label
id="{{id}}-label"
for="{{id}}-checkbox"
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
aria-hidden="true"
{{{html-vector-menu-heading-attributes}}}
>
{{#icon}}{{>Icon}}{{/icon}}
<span class="vector-menu-heading-label">{{label}}</span>
</label>
{{! FIXME: Rename this class to vector-dropdown-content. It currently clashes with MenuContents mustache template }}
<div class="vector-menu-content vector-dropdown-content">