jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Handle accessible labels differently for dropdown and portal menus 

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
This commit is contained in:
bwang 2022-05-12 16:26:05 -05:00 committed by Bernard Wang
parent 2924c9ec38
commit 9e665f9034
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
includes/SkinVector.php
View File

@ -918,8 +918,7 @@ abstract class SkinVector extends SkinMustache {
return $portletData + [
'is-dropdown' => $type === self::MENU_TYPE_DROPDOWN,
// In modern vector only dropdown and portal menus render a label element
'has-label' => $this->isLegacy() || $type === self::MENU_TYPE_DROPDOWN || $type === self::MENU_TYPE_PORTAL,
'is-portal' => $type === self::MENU_TYPE_PORTAL,
];
}
}

28
includes/templates/Menu.mustache
View File

@ -3,6 +3,12 @@
}}
<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"
@ -10,18 +16,30 @@
aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}"
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
aria-labelledby="{{id}}-label"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
{{^aria-label}}aria-label="{{label}}"{{/aria-label}}
/>
{{/is-dropdown}}
{{#has-label}}
<label
id="{{id}}-label"
{{#aria-label}} aria-label="{{.}}"{{/aria-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>
{{/has-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>