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.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
|
||||
"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-variant-switcher-label": "Change language variant",
|
||||
"vector-action-addsection": "Add topic",
|
||||
"vector-action-delete": "Delete",
|
||||
"vector-action-move": "Move",
|
||||
|
|
|
@ -23,7 +23,9 @@
|
|||
"vector.css": "{{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-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-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-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}}",
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
private function getULSLabel() {
|
||||
$label = $this->msg( 'vector-language-button-label' )
|
||||
private function getULSLabel( string $message ) {
|
||||
$label = $this->msg( $message )
|
||||
->numParams( count( $this->getLanguagesCached() ) )
|
||||
->escaped();
|
||||
return $label;
|
||||
|
@ -553,7 +554,7 @@ class SkinVector extends SkinMustache {
|
|||
'id' => 'p-lang-btn-sticky-header',
|
||||
'class' => 'mw-interlanguage-selector',
|
||||
'is-quiet' => true,
|
||||
'label' => $this->getULSLabel(),
|
||||
'label' => $this->getULSLabel( 'vector-language-button-label' ),
|
||||
'html-vector-button-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
||||
];
|
||||
}
|
||||
|
@ -566,7 +567,8 @@ class SkinVector extends SkinMustache {
|
|||
private function getULSPortletData() {
|
||||
$languageButtonData = [
|
||||
'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.
|
||||
'checkbox-class' => ' mw-interlanguage-selector ',
|
||||
'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
||||
|
@ -681,6 +683,8 @@ class SkinVector extends SkinMustache {
|
|||
$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
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
data-event-name="ui.dropdown-{{id}}"
|
||||
class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" />
|
||||
{{/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}}}
|
||||
<span>{{label}}</span>
|
||||
{{#is-dropdown}}
|
||||
|
|
Loading…
Reference in New Issue