Merge "Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector"
This commit is contained in:
commit
3c894154df
|
@ -369,6 +369,8 @@ class SkinVector extends SkinMustache {
|
||||||
// Conditionally used values must use null to indicate absence (not false or '').
|
// Conditionally used values must use null to indicate absence (not false or '').
|
||||||
|
|
||||||
$commonSkinData = array_merge( $parentData, [
|
$commonSkinData = array_merge( $parentData, [
|
||||||
|
'is-legacy' => $this->isLegacy(),
|
||||||
|
|
||||||
'is-article' => (bool)$out->isArticle(),
|
'is-article' => (bool)$out->isArticle(),
|
||||||
|
|
||||||
'is-anon' => $this->getUser()->isAnon(),
|
'is-anon' => $this->getUser()->isAnon(),
|
||||||
|
|
|
@ -12,8 +12,9 @@
|
||||||
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}}>{{!
|
<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}} {{^is-legacy}}aria-hidden="true"{{/is-legacy}}>
|
||||||
}}{{{html-vector-heading-icon}}} <span>{{label}}</span>
|
{{{html-vector-heading-icon}}}
|
||||||
|
<span>{{label}}</span>
|
||||||
{{#is-dropdown}}
|
{{#is-dropdown}}
|
||||||
<span class="vector-menu-checkbox-expanded">{{msg-vector-menu-checkbox-expanded}}</span>
|
<span class="vector-menu-checkbox-expanded">{{msg-vector-menu-checkbox-expanded}}</span>
|
||||||
<span class="vector-menu-checkbox-collapsed">{{msg-vector-menu-checkbox-collapsed}}</span>
|
<span class="vector-menu-checkbox-collapsed">{{msg-vector-menu-checkbox-collapsed}}</span>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div id="mw-navigation">
|
<div id="mw-navigation">
|
||||||
<h2>{{msg-navigation-heading}}</h2>
|
|
||||||
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
||||||
<div id="mw-head">
|
<div id="mw-head">
|
||||||
<div class="mw-article-toolbar-container">
|
<div class="mw-article-toolbar-container">
|
||||||
|
|
|
@ -3,9 +3,11 @@
|
||||||
}}
|
}}
|
||||||
<div id="p-search" role="search" class="{{class}}">
|
<div id="p-search" role="search" class="{{class}}">
|
||||||
<div>
|
<div>
|
||||||
<h3 {{{html-user-language-attributes}}}>
|
{{#is-legacy}}
|
||||||
<label for="searchInput">{{msg-search}}</label>
|
<h3 {{{html-user-language-attributes}}}>
|
||||||
</h3>
|
<label for="searchInput">{{msg-search}}</label>
|
||||||
|
</h3>
|
||||||
|
{{/is-legacy}}
|
||||||
<form action="{{form-action}}" id="searchform">
|
<form action="{{form-action}}" id="searchform">
|
||||||
<div id="simpleSearch"{{#input-location}} data-search-loc="{{.}}"{{/input-location}}>
|
<div id="simpleSearch"{{#input-location}} data-search-loc="{{.}}"{{/input-location}}>
|
||||||
{{{html-input}}}
|
{{{html-input}}}
|
||||||
|
|
|
@ -14,8 +14,7 @@
|
||||||
string html-body-content
|
string html-body-content
|
||||||
string html-categories
|
string html-categories
|
||||||
string html-after-content
|
string html-after-content
|
||||||
string msg-navigation-heading heading for entire navigation that is
|
string msg-navigation-heading
|
||||||
usually hidden to screen readers
|
|
||||||
MenuDefinition data-portlets.data-personal
|
MenuDefinition data-portlets.data-personal
|
||||||
MenuDefinition data-portlets.data-namespaces
|
MenuDefinition data-portlets.data-namespaces
|
||||||
MenuDefinition data-portlets.data-variants
|
MenuDefinition data-portlets.data-variants
|
||||||
|
|
|
@ -15,7 +15,6 @@
|
||||||
string html-body-content
|
string html-body-content
|
||||||
string html-categories
|
string html-categories
|
||||||
string html-after-content
|
string html-after-content
|
||||||
string msg-navigation-heading
|
|
||||||
LogoOptions data-logos
|
LogoOptions data-logos
|
||||||
object data-portlets
|
object data-portlets
|
||||||
MenuDefinition data-portlets.data-personal
|
MenuDefinition data-portlets.data-personal
|
||||||
|
|
|
@ -2,11 +2,6 @@
|
||||||
@import 'mediawiki.ui/variables.less';
|
@import 'mediawiki.ui/variables.less';
|
||||||
@import '../../common/variables.less';
|
@import '../../common/variables.less';
|
||||||
|
|
||||||
// Search portlet.
|
|
||||||
#p-search h3 {
|
|
||||||
.mixin-screen-reader-text();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Defined as `div`.
|
// Defined as `div`.
|
||||||
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
// Provide extra element for gadgets due to `form` already carrying an `id`.
|
||||||
#simpleSearch {
|
#simpleSearch {
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import 'mediawiki.mixins.less';
|
||||||
|
|
||||||
|
// Search portlet.
|
||||||
|
#p-search h3 {
|
||||||
|
.mixin-screen-reader-text();
|
||||||
|
}
|
|
@ -81,12 +81,6 @@ body {
|
||||||
height: 5em;
|
height: 5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide, but keep accessible for screen-readers */
|
|
||||||
#mw-navigation h2 {
|
|
||||||
position: absolute;
|
|
||||||
top: -9999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mw-head {
|
#mw-head {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
|
|
||||||
// Legacy specific components
|
// Legacy specific components
|
||||||
@import './components/MenuDropdown.less';
|
@import './components/MenuDropdown.less';
|
||||||
|
@import './components/SearchBox.less';
|
||||||
@import './components/Sidebar.less';
|
@import './components/Sidebar.less';
|
||||||
@import './components/UserLinks.less';
|
@import './components/UserLinks.less';
|
||||||
}
|
}
|
||||||
|
|
|
@ -134,12 +134,6 @@ body {
|
||||||
z-index: @z-index-base;
|
z-index: @z-index-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide, but keep accessible for screen-readers */
|
|
||||||
#mw-navigation h2 {
|
|
||||||
position: absolute;
|
|
||||||
top: -9999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation Containers */
|
/* Navigation Containers */
|
||||||
.mw-article-toolbar-container {
|
.mw-article-toolbar-container {
|
||||||
// Clear the floats on #left-navigation and #right-navigation.
|
// Clear the floats on #left-navigation and #right-navigation.
|
||||||
|
|
Loading…
Reference in New Issue