wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reduce verbosity of menu dropdown with aria-hidden

Browse source 
Bug: T325026
Change-Id: I9cd919b083dcbd0ca417cde3488968be9e2c503e
This commit is contained in:
bwang 2023-01-24 12:03:54 -06:00
parent e4af2b5df3
commit 159d298aaa
3 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
includes/templates/Dropdown/Open.mustache
View file

@ -6,8 +6,11 @@
<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.
`aria-label` is applied to the `input` which is semantically a button.
The `label` element is used as a visual button.
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"
@ -16,12 +19,14 @@
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}}}
>
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>

4
tests/jest/__snapshots__/stickyHeader.test.js.snap
View file

@ -12,8 +12,8 @@ exports[`Sticky header renders 1`] = `
</div>
<div> </div> <div class=\\"vector-sticky-header-context-bar\\">
<div id=\\"vector-sticky-header-toc\\" class=\\"vector-menu vector-dropdown vector-menu-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc\\">
<input type=\\"checkbox\\" id=\\"vector-sticky-header-toc-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-sticky-header-toc\\" class=\\"vector-menu-checkbox\\" tabindex=\\"-1\\">
<label id=\\"vector-sticky-header-toc-label\\" for=\\"vector-sticky-header-toc-checkbox\\" class=\\"vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-listBullet\\" tabindex=\\"-1\\">
<input type=\\"checkbox\\" id=\\"vector-sticky-header-toc-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-sticky-header-toc\\" class=\\"vector-menu-checkbox\\" aria-label=\\"\\" tabindex=\\"-1\\">
<label id=\\"vector-sticky-header-toc-label\\" for=\\"vector-sticky-header-toc-checkbox\\" class=\\"vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-listBullet\\" aria-hidden=\\"true\\" tabindex=\\"-1\\">
<span class=\\"vector-menu-heading-label\\"></span>
</label>
<div class=\\"vector-menu-content vector-dropdown-content\\">

4
tests/jest/__snapshots__/userLinks.test.js.snap
View file

@ -19,8 +19,8 @@ exports[`UserLinks renders 1`] = `
</div>
</div>
<div id=\\"vector-user-links-dropdown\\" class=\\"vector-menu vector-dropdown vector-menu-dropdown vector-user-menu vector-user-menu-logged-in vector-menu-dropdown\\">
<input type=\\"checkbox\\" id=\\"vector-user-links-dropdown-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-user-links-dropdown\\" class=\\"vector-menu-checkbox\\">
<label id=\\"vector-user-links-dropdown-label\\" for=\\"vector-user-links-dropdown-checkbox\\" class=\\"vector-menu-heading\\">
<input type=\\"checkbox\\" id=\\"vector-user-links-dropdown-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-user-links-dropdown\\" class=\\"vector-menu-checkbox\\" aria-label=\\"Personal tools\\">
<label id=\\"vector-user-links-dropdown-label\\" for=\\"vector-user-links-dropdown-checkbox\\" class=\\"vector-menu-heading\\" aria-hidden=\\"true\\">
<span class=\\"vector-menu-heading-label\\">Personal tools</span>
</label>
<div class=\\"vector-menu-content vector-dropdown-content\\">