golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Fix aria-expanded status for user menu 

The user menu dropdown was announcing to screenreaders as "Personal tools expanded collapsed". This is due to the core icon classes causing the spans to be display: block. This patch adds !important to the relevant display styles to ensure the statuses are always read out correctly

Bug: T253650
Change-Id: I0b51af5da98af1bd0c0029db54420e395242842d
This commit is contained in:
bwang 2021-09-15 16:00:45 -05:00
parent 3c894154df
commit b295ccc931
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/common/components/MenuDropdown.less
View File

@ -64,13 +64,18 @@
.vector-menu-checkbox-expanded,
.vector-menu-checkbox-collapsed {
.mixin-screen-reader-text();
display: none;
}
// Reveal correct "expanded" status text to screen readers based off checked status.
// 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;
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.