wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-13 17:57:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Follow-up: Update menu label elements"

Browse source
This commit is contained in:
jenkins-bot 2022-06-13 14:37:25 +00:00 committed by Gerrit Code Review
parent f607dad3bc 467d994123
commit d529efeaf8
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
includes/templates/Menu.mustache
View file

@ -4,10 +4,9 @@
<div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}> <div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}>
{{! {{!
Dropdown menus use the checkbox hack and require `input` and `label` elements 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 `aria-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 The `label` element is used as a visual button.
to reduce verbosity, as it's contents are already used or overridden in the `input` element
}} }}
{{#is-dropdown}} {{#is-dropdown}}
<input type="checkbox" <input type="checkbox"
@ -17,28 +16,26 @@
data-event-name="ui.dropdown-{{id}}" data-event-name="ui.dropdown-{{id}}"
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox" class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}} {{#aria-label}}aria-label="{{.}}"{{/aria-label}}
{{^aria-label}}aria-label="{{label}}"{{/aria-label}}
/> />
<label <label
id="{{id}}-label" id="{{id}}-label"
for="{{id}}-checkbox"
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}" class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
aria-hidden="true"
> >
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span> {{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</label> </label>
{{/is-dropdown}} {{/is-dropdown}}
{{! {{!
Portal menus also require `label` elements, but these Portal menus also require a label
should not be hidden and should have an accessible label
}} }}
{{#is-portal}} {{#is-portal}}
<label <p
id="{{id}}-label" id="{{id}}-label"
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}" class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}} {{#aria-label}}aria-label="{{.}}"{{/aria-label}}
> >
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span> {{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</label> </p>
{{/is-portal}} {{/is-portal}}
<div class="vector-menu-content"> <div class="vector-menu-content">
{{{html-before-portal}}} {{{html-before-portal}}}

11
includes/templates/legacy/Menu.mustache
View file

@ -13,7 +13,6 @@
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox" class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
aria-labelledby="{{id}}-label" aria-labelledby="{{id}}-label"
/> />
{{/is-dropdown}}
<label <label
id="{{id}}-label" id="{{id}}-label"
{{#aria-label}} aria-label="{{.}}"{{/aria-label}} {{#aria-label}} aria-label="{{.}}"{{/aria-label}}
@ -21,6 +20,16 @@
> >
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span> {{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</label> </label>
{{/is-dropdown}}
{{^is-dropdown}}
<h3
id="{{id}}-label"
{{#aria-label}} aria-label="{{.}}"{{/aria-label}}
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
>
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</h3>
{{/is-dropdown}}
<div class="vector-menu-content"> <div class="vector-menu-content">
{{{html-before-portal}}} {{{html-before-portal}}}
<ul class="vector-menu-content-list">{{{html-items}}}</ul> <ul class="vector-menu-content-list">{{{html-items}}}</ul>