Update ULS button states to be consistent with other quiet buttons

- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
This commit is contained in:
bwang 2021-08-13 15:56:51 -05:00
parent a068d6125d
commit c08ae1152e
7 changed files with 8 additions and 41 deletions

View file

@ -488,14 +488,14 @@ class SkinVector extends SkinMustache {
$languageButtonData = [
'id' => 'p-lang-btn',
'label' => $label,
// ext.uls.interface attaches click handler to this selector.
'checkbox-class' => ' mw-interlanguage-selector ',
'heading-class' =>
' vector-menu-heading ' .
' mw-ui-icon ' .
' mw-ui-icon-before ' .
' mw-ui-icon-wikimedia-language ' .
' mw-ui-button mw-ui-quiet ' .
// ext.uls.interface attaches click handler to this selector.
' mw-interlanguage-selector ',
' mw-ui-button mw-ui-quiet '
];
// Adds class to hide language button

View file

@ -6,8 +6,9 @@
{{{html-user-language-attributes}}}>
{{#is-dropdown}}
<input type="checkbox"
id="{{id}}-checkbox"
data-event-name="ui.dropdown-{{id}}"
class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />
class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" />
{{/is-dropdown}}
<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>{{!
}}<span>{{label}}</span>

View file

@ -153,6 +153,7 @@
display: block;
}
// Add focus state to legacy menu dropdown buttons (i.e. p-variants, p-cactions)
&:focus + h3 {
// Simulate browser focus ring
outline: dotted 1px; // Firefox style

View file

@ -37,8 +37,7 @@ function disableDropdownBehavior( pLangBtn ) {
* drop down behavior of the button.
*/
function disableLanguageDropdown() {
var ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' ),
pLangBtnLabel;
var ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' );
// If module status is defined and not registered we can assume it is in the process of loading
if ( ulsModuleStatus && ulsModuleStatus !== 'registered' ) {
@ -47,15 +46,6 @@ function disableLanguageDropdown() {
if ( mw.config.get( 'wgULSisCompactLinksEnabled' ) ) {
disableDropdownBehavior( document.getElementById( 'p-lang-btn' ) );
}
} else {
pLangBtnLabel = document.getElementById( 'p-lang-btn-label' );
if ( !pLangBtnLabel ) {
return;
}
// Remove .mw-interlanguage-selector to show the dropdown arrow since evidently
// ULS is not used.
pLangBtnLabel.classList.remove( 'mw-interlanguage-selector' );
}
}

View file

@ -65,29 +65,11 @@
}
}
// Disable border-radius when dropdown menu open
.client-nojs {
#p-lang-btn:hover .vector-menu-heading,
.vector-menu-checkbox:checked + .vector-menu-heading {
border-radius: 0;
}
}
// mw-body-header class can be removed when language button is the default.
// e.g. upon removal of SkinVector::isLanguagesInHeader
.client-js #p-lang-btn {
// The `.mw-interlanguage-selector` is toggled off through js if the
// `ext.uls.interface` module is not being loaded.
.mw-interlanguage-selector {
// Remove the ULS language icon provided by ext.uls.compactlinks.less as we
// are already providing no-js users an icon.
background-image: none;
}
// When the ext.uls.interface module is loaded, we hide the fallback menu and
// checkbox.
// When the ext.uls.interface module is loaded, we hide the fallback menu and checkbox.
&.vector-menu-hide-dropdown {
.vector-menu-checkbox,
.vector-menu-content {
display: none;
}

View file

@ -225,7 +225,6 @@
"ResourceModuleSkinStyles": {
"vector": {
"+ext.echo.styles.alert": "skinStyles/ext.echo.styles.alert.less",
"+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less",
"+ext.uls.pt": "skinStyles/ext.uls.pt.less",
"jquery.tipsy": "skinStyles/jquery.tipsy.less",
"jquery.ui": [

View file

@ -1,6 +0,0 @@
.mw-body-header .mw-interlanguage-selector,
.mw-body-header .mw-interlanguage-selector:active {
margin: 0;
// mw-ui-button quiet is bold on active.
font-weight: bold;
}