mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-15 03:34:25 +00:00
9e665f9034
An issue was found in QA where certain browser/screenreader combos could not read `aria-labelledby`+`aria-label`. Instead, we avoid using `aria-labelledby` and the `label` element entirely and apply the accessible label directly to the `input`. This great simplifies our labelling and improves screenreader support, while also allowing us to hide the `label` element to reduce verbosity. Because the `label` element is used differently in the portal menu, we use the `is-portal` variable to maintain the old markup for portal menus Bug: T301051 Change-Id: I5a0f7d5d78838fabe561095b33176e7162b31aea
49 lines
1.6 KiB
Plaintext
49 lines
1.6 KiB
Plaintext
{{!
|
|
See @typedef MenuDefinition
|
|
}}
|
|
|
|
<div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
|
{{!
|
|
Dropdown menus use the checkbox hack and require `input` and `label` elements
|
|
The accessible label is applied to the `input` which is semantically a button
|
|
The `label` element is used as a visual button and is hidden from screenreaders
|
|
to reduce verbosity, as it's contents are already used or overridden in the `input` element
|
|
}}
|
|
{{#is-dropdown}}
|
|
<input type="checkbox"
|
|
id="{{id}}-checkbox"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
data-event-name="ui.dropdown-{{id}}"
|
|
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
|
|
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
|
|
{{^aria-label}}aria-label="{{label}}"{{/aria-label}}
|
|
/>
|
|
<label
|
|
id="{{id}}-label"
|
|
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
|
|
aria-hidden="true"
|
|
>
|
|
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
|
|
</label>
|
|
{{/is-dropdown}}
|
|
{{!
|
|
Portal menus also require `label` elements, but these
|
|
should not be hidden and should have an accessible label
|
|
}}
|
|
{{#is-portal}}
|
|
<label
|
|
id="{{id}}-label"
|
|
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
|
|
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
|
|
>
|
|
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
|
|
</label>
|
|
{{/is-portal}}
|
|
<div class="vector-menu-content">
|
|
{{{html-before-portal}}}
|
|
<ul class="vector-menu-content-list">{{{html-items}}}</ul>
|
|
{{{html-after-portal}}}
|
|
</div>
|
|
</div>
|