Restore navigation landmarks in page toolbar
Adds landmarks to the article toolbar - Namespace navigation - View navigation - More options navigation Removes the "tools" landmark and associated aria-label (and translation message). Makes the #left-navigation and #right-navigation flexbox to ensure the new <nav> elements, along with gadgets, align on one line. Moves the styles for these elements from screen.less to ArticleToolbar.less. Bug: T317440 Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
This commit is contained in:
Jan Drewniak
parent
03e793aeec
commit
98068d9598
|
|
@ -49,7 +49,6 @@
|
|||
"vector-main-menu-tooltip": "Main menu",
|
||||
"vector-toc-menu-tooltip": "Table of Contents",
|
||||
"vector-toc-collapsible-button-label": "Toggle the table of contents",
|
||||
"vector-article-tools-nav-label": "Tools",
|
||||
"vector-site-nav-label": "Site",
|
||||
"vector-2022-prefs-talkpage": "[[mw:Talk:Reading/Web/Desktop_Improvements|Discussion]]",
|
||||
"tooltip-vector-anon-user-menu-title": "More options"
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@
|
|||
"vector-main-menu-tooltip": "Used as title attribute for main menu icon on hover.",
|
||||
"vector-toc-menu-tooltip": "Used as title attribute for table of contents icon on hover.",
|
||||
"vector-toc-collapsible-button-label": "Used as the label for the table of contents collapsible toggle button",
|
||||
"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",
|
||||
"vector-2022-prefs-talkpage": "Link to the desktop improvements project talk page which is shown before the preview link in skin preferences. See T307113 for more information.",
|
||||
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users."
|
||||
|
|
|
|||
|
|
@ -1,15 +1,25 @@
|
|||
<nav class="vector-article-toolbar" aria-label="{{msg-vector-article-tools-nav-label}}"
|
||||
role="navigation">
|
||||
<div class="vector-article-toolbar">
|
||||
<div class="mw-article-toolbar-container">
|
||||
{{#data-portlets}}
|
||||
<div id="left-navigation">
|
||||
{{#data-associated-pages}}{{>Menu}}{{/data-associated-pages}}
|
||||
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||
<nav aria-label="{{msg-namespaces}}">
|
||||
{{#data-associated-pages}}{{>Menu}}{{/data-associated-pages}}
|
||||
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||
</nav>
|
||||
</div>
|
||||
<div id="right-navigation" class="vector-collapsible">
|
||||
{{#data-views}}{{>Menu}}{{/data-views}}
|
||||
{{#data-actions}}{{>Menu}}{{/data-actions}}
|
||||
{{#data-views}}
|
||||
<nav aria-label="{{msg-views}}">
|
||||
{{>Menu}}
|
||||
</nav>
|
||||
{{/data-views}}
|
||||
|
||||
{{#data-actions}}
|
||||
<nav aria-label="{{msg-tooltip-p-cactions}}">
|
||||
{{>Menu}}
|
||||
</nav>
|
||||
{{/data-actions}}
|
||||
</div>
|
||||
{{/data-portlets}}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,13 @@
|
|||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
||||
|
||||
.mw-article-toolbar-container {
|
||||
// clearfix for #left-navigation and #right-navigation
|
||||
display: flow-root;
|
||||
display: flex;
|
||||
font-size: @font-size-tabs;
|
||||
// Use box-shadow instead of border to allow border collapsing between titlebar and toolbar
|
||||
box-shadow: 0 1px @border-color-portal-heading;
|
||||
// Add bottom margin to account for box-shadow
|
||||
margin-bottom: 1px;
|
||||
|
||||
/* Targets #left-navigation and #right-navigation */
|
||||
& > div {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
||||
.mw-portlet-views {
|
||||
display: none;
|
||||
|
||||
|
|
@ -40,3 +35,24 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ID Selectors outside of .mw-article-toolbar-container to avoid over-specificity.
|
||||
#left-navigation {
|
||||
// flex ensures all child elements align on one line.
|
||||
display: flex;
|
||||
margin-left: -@padding-horizontal-tabs;
|
||||
// pushes #right-navigation to the end of the line.
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#right-navigation {
|
||||
// flex ensures all child elements align on one line.
|
||||
display: flex;
|
||||
margin-right: -@padding-horizontal-tabs;
|
||||
// Any dropdowns inside the right navigation in modern Vector (e.g. "more" menu).
|
||||
// should be right-aligned to prevent horizontal scrolling.
|
||||
.vector-menu-content {
|
||||
left: auto;
|
||||
right: -@border-width-base;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,22 +107,6 @@ body {
|
|||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
#left-navigation {
|
||||
float: left;
|
||||
margin-left: -@padding-horizontal-tabs;
|
||||
}
|
||||
|
||||
#right-navigation {
|
||||
float: right;
|
||||
margin-right: -@padding-horizontal-tabs;
|
||||
// Any dropdowns inside the right navigation in modern Vector (e.g. "more" menu).
|
||||
// should be right-aligned to prevent horizontal scrolling.
|
||||
.vector-menu-content {
|
||||
left: auto;
|
||||
right: -@border-width-base;
|
||||
}
|
||||
}
|
||||
|
||||
.parsoid-body {
|
||||
padding: @padding-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@
|
|||
"vector-toc-toggle-position-title",
|
||||
"vector-toc-menu-tooltip",
|
||||
"vector-toc-collapsible-button-label",
|
||||
"vector-article-tools-nav-label",
|
||||
"vector-site-nav-label",
|
||||
"search",
|
||||
"searchbutton",
|
||||
|
|
@ -86,7 +85,10 @@
|
|||
"sitesubtitle",
|
||||
"sitetitle",
|
||||
"tagline",
|
||||
"personaltools"
|
||||
"personaltools",
|
||||
"namespaces",
|
||||
"views",
|
||||
"tooltip-p-cactions"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue