mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 10:49:25 +00:00
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:
parent
3c894154df
commit
b295ccc931
|
@ -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.
|
||||
|
|
Loading…
Reference in a new issue