jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove nav element from Vector menus and only render label elements in Vector menus when needed. Add new nav landmarks corresponding to user links, main site nav, and article editing tools. Split out legacy Menu template. 

Bug: T291304
Bug: T301051
Change-Id: I35c20103e4b45139ef1d3f73c23f6a744aa87a3c
This commit is contained in:
bwang 2022-04-18 15:10:12 -05:00 committed by Bernard Wang
parent cdc2df8e66
commit d54029a523
12 changed files with 70 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
i18n/en.json
View File

@ -42,7 +42,8 @@
"vector-anon-user-menu-pages": "Pages for logged out editors",
"vector-anon-user-menu-pages-learn": "learn more",
"vector-anon-user-menu-pages-label": "Learn more about editing",
"vector-personal-more-label": "User links",
"vector-main-menu-tooltip": "Main menu",
"vector-article-tools-nav-label": "Article tools",
"vector-site-nav-label": "Site",
"tooltip-vector-anon-user-menu-title": "More options"
}

3
i18n/qqq.json
View File

@ -57,7 +57,8 @@
"vector-anon-user-menu-pages": "Label describing the anon editor links in the anon user menu",
"vector-anon-user-menu-pages-learn": "Lowercase text of link that goes to Help:Introduction and helps the user learn more about editing",
"vector-anon-user-menu-pages-label": "Accessible version of 'vector-anon-user-menu-pages' link text, prompts user to learn more about editing",
"vector-personal-more-label": "Label describing the user links next to the user links dropdown menu.",
"vector-main-menu-tooltip": "Used as title attribute for main menu icon on hover.",
"vector-article-tools-nav-label": "Accessible label for the article tools nav landmark",
"vector-site-nav-label": "Accessible label for site (main menu) nav landmark",
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users."
}

11
includes/SkinVector.php
View File

@ -346,13 +346,11 @@ abstract class SkinVector extends SkinMustache {
'data-user-page' => $menuData[ 'data-user-page' ],
'html-vector-watchlist' => $this->getWatchlistHTML( $menuData[ 'data-vector-user-menu-overflow' ] ?? null ),
] );
$userMoreData = [
$userMoreData = $this->decoratePortletData( 'data-user-more', [
'id' => 'p-personal-more',
'class' => 'mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more',
'class' => 'mw-portlet mw-portlet-personal-more vector-user-menu-more',
'html-items' => $userMoreHtmlItems,
'label' => $this->msg( 'vector-personal-more-label' ),
'is-dropdown' => false,
];
] );
$userMenuData = $menuData[ 'data-user-menu' ];
if ( $isAnon ) {
@ -857,6 +855,7 @@ abstract class SkinVector extends SkinMustache {
case 'data-notifications':
case 'data-personal':
case 'data-user-page':
case 'data-user-more':
$type = self::MENU_TYPE_DEFAULT;
break;
case 'data-languages':
@ -902,6 +901,8 @@ abstract class SkinVector extends SkinMustache {
return $portletData + [
'is-dropdown' => $type === self::MENU_TYPE_DROPDOWN,
// In modern vector only dropdown and portal menus render a label element
'has-label' => $this->isLegacy() || $type === self::MENU_TYPE_DROPDOWN || $type === self::MENU_TYPE_PORTAL,
];
}
}

19
includes/templates/Menu.mustache
View File

@ -1,23 +1,30 @@
{{!
See @typedef MenuDefinition
}}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}}
{{{html-user-language-attributes}}}>
<div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}>
{{#is-dropdown}}
<input type="checkbox"
id="{{id}}-checkbox"
role="button"
aria-haspopup="true"
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}}
<label id="{{id}}-label" aria-label="{{aria-label}}" class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}" {{^is-legacy}} aria-hidden="true"{{/is-legacy}}>
{{#has-label}}
<label
id="{{id}}-label"
{{#aria-label}} aria-label="{{.}}"{{/aria-label}}
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
>
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</label>
{{/has-label}}
<div class="vector-menu-content">
{{{html-before-portal}}}
<ul class="vector-menu-content-list">{{{html-items}}}</ul>
{{{html-after-portal}}}
</div>
</nav>
</div>

4
includes/templates/Navigation.mustache
View File

@ -1,5 +1,5 @@
<div id="mw-navigation">
<div id="mw-head">
<nav id="mw-head" aria-label="{{msg-vector-article-tools-nav-label}}" role="navigation" >
<div class="mw-article-toolbar-container">
{{#data-portlets}}
<div id="left-navigation">
@ -12,6 +12,6 @@
</div>
{{/data-portlets}}
</div>
</div>
</nav>
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
</div>

4
includes/templates/Sidebar.mustache
View File

@ -9,7 +9,7 @@
emphasized-sidebar-action data-emphasized-sidebar-action For displaying an emphasized action in the sidebar.
}}
<div id="mw-panel" class="mw-sidebar">
<nav id="mw-panel" class="mw-sidebar" aria-label="{{msg-vector-site-nav-label}}" role="navigation">
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
{{#data-emphasized-sidebar-action}}{{>SidebarAction}}{{/data-emphasized-sidebar-action}}
{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
@ -18,4 +18,4 @@
{{/is-language-in-content}}
{{! T295555 Add language switch alert message temporarily (to be removed). }}
{{#data-vector-language-switch-alert}}{{>SidebarAction}}{{/data-vector-language-switch-alert}}
</div>
</nav>

4
includes/templates/UserLinks.mustache
View File

@ -1,4 +1,4 @@
<div class="vector-user-links{{#is-wide}} vector-user-links-wide{{/is-wide}}">
<nav class="vector-user-links{{#is-wide}} vector-user-links-wide{{/is-wide}} aria-label="{{msg-personaltools}}" role="navigation" >
{{#data-user-more}}{{>Menu}}{{/data-user-more}}
{{#data-user-menu}}{{>Menu}}{{/data-user-menu}}
</div>
</nav>

29
includes/templates/legacy/Menu.mustache Normal file
View File

@ -0,0 +1,29 @@
{{!
See @typedef MenuDefinition
}}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
{{#is-dropdown}}
<input type="checkbox"
id="{{id}}-checkbox"
role="button"
aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}"
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
aria-labelledby="{{id}}-label"
/>
{{/is-dropdown}}
<label
id="{{id}}-label"
{{#aria-label}} aria-label="{{.}}"{{/aria-label}}
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
>
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</label>
<div class="vector-menu-content">
{{{html-before-portal}}}
<ul class="vector-menu-content-list">{{{html-items}}}</ul>
{{{html-after-portal}}}
</div>
</nav>

6
includes/templates/legacy/Sidebar.mustache
View File

@ -7,7 +7,7 @@
<a class="mw-wiki-logo" href="{{link-mainpage}}"
title="{{msg-tooltip-p-logo}}"></a>
</div>
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
{{#data-portlets-first}}{{>legacy/Menu}}{{/data-portlets-first}}
{{#array-portlets-rest}}{{>legacy/Menu}}{{/array-portlets-rest}}
{{#data-portlets.data-languages}}{{>legacy/Menu}}{{/data-portlets.data-languages}}
</div>

2
includes/templates/legacy/UserLinks.mustache
View File

@ -1 +1 @@
{{#data-personal}}{{>Menu}}{{/data-personal}}
{{#data-personal}}{{>legacy/Menu}}{{/data-personal}}

8
includes/templates/skin-legacy.mustache
View File

@ -54,12 +54,12 @@
{{#data-portlets}}
{{>legacy/UserLinks}}
<div id="left-navigation">
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
{{#data-variants}}{{>Menu}}{{/data-variants}}
{{#data-namespaces}}{{>legacy/Menu}}{{/data-namespaces}}
{{#data-variants}}{{>legacy/Menu}}{{/data-variants}}
</div>
<div id="right-navigation">
{{#data-views}}{{>Menu}}{{/data-views}}
{{#data-actions}}{{>Menu}}{{/data-actions}}
{{#data-views}}{{>legacy/Menu}}{{/data-views}}
{{#data-actions}}{{>legacy/Menu}}{{/data-actions}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
</div>
{{/data-portlets}}

5
skin.json
View File

@ -63,13 +63,16 @@
"vector-jumptocontent",
"vector-toc-beginning",
"vector-toc-heading",
"vector-article-tools-nav-label",
"vector-site-nav-label",
"search",
"searchbutton",
"searcharticle",
"searchsuggest-search",
"sitesubtitle",
"sitetitle",
"tagline"
"tagline",
"personaltools"
]
}
]