Add aria-label to language dropdown menus
- Update portlet data. - Update menu template. - Add translatable strings. Bug: T289523 Change-Id: I9b8f40843609c0192afdabd3117167b933155842
This commit is contained in:
parent
3c894154df
commit
bdc8852a1c
|
@ -11,7 +11,9 @@
|
||||||
"vector.css": "/* All CSS here will be loaded for users of the Vector skin */",
|
"vector.css": "/* All CSS here will be loaded for users of the Vector skin */",
|
||||||
"vector.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
|
"vector.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
|
||||||
"vector-action-toggle-sidebar": "Toggle sidebar",
|
"vector-action-toggle-sidebar": "Toggle sidebar",
|
||||||
|
"vector-language-button-aria-label": "Change article language, available in {{PLURAL:$1|$1 language|$1 languages}}",
|
||||||
"vector-language-button-label": "{{PLURAL:$1|$1 language|$1 languages}}",
|
"vector-language-button-label": "{{PLURAL:$1|$1 language|$1 languages}}",
|
||||||
|
"vector-language-variant-switcher-label": "Change language variant",
|
||||||
"vector-action-addsection": "Add topic",
|
"vector-action-addsection": "Add topic",
|
||||||
"vector-action-delete": "Delete",
|
"vector-action-delete": "Delete",
|
||||||
"vector-action-move": "Move",
|
"vector-action-move": "Move",
|
||||||
|
|
|
@ -23,7 +23,9 @@
|
||||||
"vector.css": "{{optional}}",
|
"vector.css": "{{optional}}",
|
||||||
"vector.js": "{{optional}}",
|
"vector.js": "{{optional}}",
|
||||||
"vector-action-toggle-sidebar": "Accessibility label for the button that toggles the sidebar's visibility, as well as audible presentation for screen readers.",
|
"vector-action-toggle-sidebar": "Accessibility label for the button that toggles the sidebar's visibility, as well as audible presentation for screen readers.",
|
||||||
|
"vector-language-button-aria-label": "Accessibility label for language button dropdown menu in modern Vector.\n* $1 - the count of languages available, supports plural",
|
||||||
"vector-language-button-label": "Label for language button in modern Vector.\n\nArguments:\n* $1 number of languages, supports plural",
|
"vector-language-button-label": "Label for language button in modern Vector.\n\nArguments:\n* $1 number of languages, supports plural",
|
||||||
|
"vector-language-variant-switcher-label": "Label for the language variant switcher.",
|
||||||
"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",
|
"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",
|
||||||
"vector-action-delete": "Used in the Vector skin, as the name of a tab at the top of the page. See for example {{canonicalurl:Translating:MediaWiki|useskin=vector}}\n\n{{Identical|Delete}}",
|
"vector-action-delete": "Used in the Vector skin, as the name of a tab at the top of the page. See for example {{canonicalurl:Translating:MediaWiki|useskin=vector}}\n\n{{Identical|Delete}}",
|
||||||
"vector-action-move": "Used in the Vector skin, on the tabs at the top of the page. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n\n{{Identical|Move}}",
|
"vector-action-move": "Used in the Vector skin, on the tabs at the top of the page. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n\n{{Identical|Move}}",
|
||||||
|
|
|
@ -532,12 +532,13 @@ class SkinVector extends SkinMustache {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns ULS button label
|
* Returns ULS button label within the context of the translated message taking a placeholder.
|
||||||
*
|
*
|
||||||
|
* @param string $message
|
||||||
* @return string
|
* @return string
|
||||||
*/
|
*/
|
||||||
private function getULSLabel() {
|
private function getULSLabel( string $message ) {
|
||||||
$label = $this->msg( 'vector-language-button-label' )
|
$label = $this->msg( $message )
|
||||||
->numParams( count( $this->getLanguagesCached() ) )
|
->numParams( count( $this->getLanguagesCached() ) )
|
||||||
->escaped();
|
->escaped();
|
||||||
return $label;
|
return $label;
|
||||||
|
@ -553,7 +554,7 @@ class SkinVector extends SkinMustache {
|
||||||
'id' => 'p-lang-btn-sticky-header',
|
'id' => 'p-lang-btn-sticky-header',
|
||||||
'class' => 'mw-interlanguage-selector',
|
'class' => 'mw-interlanguage-selector',
|
||||||
'is-quiet' => true,
|
'is-quiet' => true,
|
||||||
'label' => $this->getULSLabel(),
|
'label' => $this->getULSLabel( 'vector-language-button-label' ),
|
||||||
'html-vector-button-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
'html-vector-button-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -566,7 +567,8 @@ class SkinVector extends SkinMustache {
|
||||||
private function getULSPortletData() {
|
private function getULSPortletData() {
|
||||||
$languageButtonData = [
|
$languageButtonData = [
|
||||||
'id' => 'p-lang-btn',
|
'id' => 'p-lang-btn',
|
||||||
'label' => $this->getULSLabel(),
|
'label' => $this->getULSLabel( 'vector-language-button-label' ),
|
||||||
|
'aria-label' => $this->getULSLabel( 'vector-language-button-aria-label' ),
|
||||||
// ext.uls.interface attaches click handler to this selector.
|
// ext.uls.interface attaches click handler to this selector.
|
||||||
'checkbox-class' => ' mw-interlanguage-selector ',
|
'checkbox-class' => ' mw-interlanguage-selector ',
|
||||||
'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
||||||
|
@ -681,6 +683,8 @@ class SkinVector extends SkinMustache {
|
||||||
$portletData['label'] = $item['text'];
|
$portletData['label'] = $item['text'];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// T289523 Add aria-label data to the language variant switcher.
|
||||||
|
$portletData['aria-label'] = $this->msg( 'vector-language-variant-switcher-label' );
|
||||||
}
|
}
|
||||||
|
|
||||||
// T287494 We use tooltip messages to provide title attributes on hover over certain menu icons. For modern
|
// T287494 We use tooltip messages to provide title attributes on hover over certain menu icons. For modern
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
data-event-name="ui.dropdown-{{id}}"
|
data-event-name="ui.dropdown-{{id}}"
|
||||||
class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" />
|
class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" />
|
||||||
{{/is-dropdown}}
|
{{/is-dropdown}}
|
||||||
<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}} {{^is-legacy}}aria-hidden="true"{{/is-legacy}}>
|
<h3 id="{{id}}-label" aria-label="{{aria-label}}" {{#heading-class}}class="{{.}}"{{/heading-class}} {{^is-legacy}}aria-hidden="true"{{/is-legacy}}>
|
||||||
{{{html-vector-heading-icon}}}
|
{{{html-vector-heading-icon}}}
|
||||||
<span>{{label}}</span>
|
<span>{{label}}</span>
|
||||||
{{#is-dropdown}}
|
{{#is-dropdown}}
|
||||||
|
|
Loading…
Reference in New Issue