Remove custom handling of aria-expanded in Vector checkbox hack buttons
Removed class "vector-menu-checkbox-expanded" and "vector-menu-checkbox-collapsed" in includes/templates/Menu.mustache and deleted the necessary lines in resources/common/components/MenuDropdown.less, tests/jest/stickyHeader.test.js, includes/templates/skin.mustache, skin.json, i18n/en.json and i18n/qqq.json. Bug: T299173 Change-Id: Ibf8a08e6e5d1a6c607abf170c030a0285e84ad74
This commit is contained in:
parent
094928736c
commit
ae50914d4e
|
@ -42,7 +42,5 @@
|
|||
"vector-anon-user-menu-pages-label": "Learn more about editing",
|
||||
"vector-personal-more-label": "User links",
|
||||
"vector-main-menu-tooltip": "Main menu",
|
||||
"tooltip-vector-anon-user-menu-title": "More options",
|
||||
"vector-menu-checkbox-expanded": "expanded",
|
||||
"vector-menu-checkbox-collapsed": "collapsed"
|
||||
"tooltip-vector-anon-user-menu-title": "More options"
|
||||
}
|
||||
|
|
|
@ -56,7 +56,5 @@
|
|||
"vector-anon-user-menu-pages-label": "Accessible version of 'vector-anon-user-menu-pages' link text, prompts user to learn more about editing",
|
||||
"vector-personal-more-label": "Label describing the user links next to the user links dropdown menu.",
|
||||
"vector-main-menu-tooltip": "Used as title attribute for main menu icon on hover.",
|
||||
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users.",
|
||||
"vector-menu-checkbox-expanded": "Label for expanded state of dropdown menus for screen reader or assistive technology users.",
|
||||
"vector-menu-checkbox-collapsed": "Label for collapsed state of dropdown menus for screen reader or assistive technology users."
|
||||
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users."
|
||||
}
|
||||
|
|
|
@ -14,10 +14,6 @@
|
|||
{{/is-dropdown}}
|
||||
<label id="{{id}}-label" aria-label="{{aria-label}}"{{#heading-class}} class="{{.}}"{{/heading-class}}{{^is-legacy}} aria-hidden="true"{{/is-legacy}}>
|
||||
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
|
||||
{{#is-dropdown}}
|
||||
<span class="vector-menu-checkbox-expanded">{{msg-vector-menu-checkbox-expanded}}</span>
|
||||
<span class="vector-menu-checkbox-collapsed">{{msg-vector-menu-checkbox-collapsed}}</span>
|
||||
{{/is-dropdown}}
|
||||
</label>
|
||||
<div class="vector-menu-content">
|
||||
{{{html-before-portal}}}
|
||||
|
|
|
@ -27,8 +27,6 @@
|
|||
true.
|
||||
string msg-vector-action-toggle-sidebar The label used by the sidebar button.
|
||||
string msg-vector-main-menu-tooltip The title attribute for the main menu icon.
|
||||
string msg-vector-menu-checkbox-expanded Dropdown menu span content for expanded selection in checkbox hack.
|
||||
string msg-vector-menu-checkbox-collapsed Dropdown menu span content for collapsed selection in checkbox hack.
|
||||
object data-portlets-sidebar. See Sidebar.mustache for documentation.
|
||||
object data-footer for footer template partial. see Footer.mustache for documentation.
|
||||
}}
|
||||
|
|
|
@ -60,24 +60,6 @@
|
|||
z-index: @z-index-menu;
|
||||
}
|
||||
|
||||
// Hide elements visually but not from screen readers.
|
||||
.vector-menu-checkbox-expanded,
|
||||
.vector-menu-checkbox-collapsed {
|
||||
.mixin-screen-reader-text();
|
||||
}
|
||||
|
||||
// Reveal correct "expanded" or "collapsed" status text to screen readers based off checked status.
|
||||
// !important needed to override `.mw-ui-button.mw-ui-icon-element:not(.mw-ui-icon-with-label-desktop) span` rule in core
|
||||
.vector-menu-checkbox:checked + .vector-menu-heading .vector-menu-checkbox-expanded,
|
||||
.vector-menu-checkbox:not( :checked ) + .vector-menu-heading .vector-menu-checkbox-collapsed {
|
||||
display: inline !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.vector-menu-checkbox:not( :checked ) + .vector-menu-heading .vector-menu-checkbox-expanded,
|
||||
.vector-menu-checkbox:checked + .vector-menu-heading .vector-menu-checkbox-collapsed {
|
||||
display: none !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
// Hide and show menu content based off checked status.
|
||||
.vector-menu-checkbox:checked ~ .vector-menu-content {
|
||||
opacity: 1;
|
||||
|
|
|
@ -46,8 +46,6 @@
|
|||
"vector-opt-out",
|
||||
"vector-action-toggle-sidebar",
|
||||
"vector-main-menu-tooltip",
|
||||
"vector-menu-checkbox-expanded",
|
||||
"vector-menu-checkbox-collapsed",
|
||||
"vector-jumptosearch",
|
||||
"vector-jumptocontent",
|
||||
"search",
|
||||
|
@ -81,8 +79,6 @@
|
|||
"navigation-heading",
|
||||
"vector-action-toggle-sidebar",
|
||||
"vector-main-menu-tooltip",
|
||||
"vector-menu-checkbox-expanded",
|
||||
"vector-menu-checkbox-collapsed",
|
||||
"vector-jumptonavigation",
|
||||
"vector-jumptosearch",
|
||||
"vector-jumptocontent",
|
||||
|
|
|
@ -6,8 +6,6 @@ describe( 'sticky header', () => {
|
|||
menu.innerHTML = `<input type="checkbox" id="p-personal-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-personal" class="vector-menu-checkbox" aria-labelledby="p-personal-label" aria-expanded="true">
|
||||
<h3 id="p-personal-label" aria-label="" class="vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-userAvatar" aria-hidden="true">
|
||||
<span class="vector-menu-heading-label">Personal tools</span>
|
||||
<span class="vector-menu-checkbox-expanded">expanded</span>
|
||||
<span class="vector-menu-checkbox-collapsed">collapsed</span>
|
||||
</h3>
|
||||
<div class="vector-menu-content">
|
||||
<ul class="vector-menu-content-list">
|
||||
|
|
Loading…
Reference in New Issue