(bug 457) use semantic headings for the navigation menu

This changes the current scheme of using (varies per skin) <h4>, <h5>
and/or <h6> tags (with nothing apart from the main <h1> above them in
the hierarchy) to <h2> above the entire navigation and <h3>s as portlet
headings.

The <h2> is hidden for normal browsers, but accessible for screen-readers
or text browsers. Its content comes from a new message called
"navigation-heading".

The changes were applied to Vector, Monobook, Modern and CologneBlue. The
change to Monobook also resulted in the heading appearing in Chick and
MySkin (I intentionally didn't implement hiding it in these skins, as they
are intended respectively as a super-lightweight one and a skim "template")
and in Simple (where I did hide it, but didn't bother with further CSS fixups).

Related changes and technical notes:
* Monobook had various styles for apparently all heading levels inside of a
  .portlet, but only <h5>s (now <h3>s) could ever be generated.
  The styles were also ancient, straight from 2004 (I git-blamed),
  so I removed them, as they were almost certainly completely unused.
* Modern lacked font-size for .portlet h5 (now h3). It worked mostly okay
  before (font-size of h5 is similar to size of regular text), but after
  headings were changed to <h3>s, they became too large. I used
  font-size:0.83em (copied from Opera's user-agent stylesheet), but this
  might result in slight font-size changes on various browsers.
* Vector's variant menu is deeply broken. I changed the bonkers structure
  to two <h3>s, one with id=mw-vector-current-variant. This is still
  broken, but I don't really know how to do it properly.
* In Vector's CSS, the height for div.vectorMenu h3 a (previously h5 a)
  had to be changed. I used 1.9em, the same as used for div.vectorTabs li a,
  but this probably shouldn't be measured in ems anyway.
* CologneBlue and Vector lacked wrappers over the entire navigation;
  I added <div id="mw-navigation"> to both of them. In CologneBlue this
  also required moving <div id="toplinks"> to the bottom of the generated
  HTML, which is a good idea anyway.

Change-Id: I9a2ebd503ec9dd901802a9b3b1f5137a85990373

diff --git a/languages/messages/MessagesEn.php b/languages/messages/MessagesEn.php
index 5e33d62..1b26f51 100644 (file)
--- a/languages/messages/MessagesEn.php
+++ b/languages/messages/MessagesEn.php
@@ -569,6 +569,7 @@ $preloadedMessages = array(
        'searcharticle',
        'searchbutton',
        'sidebar',
+       'navigation-heading',
        'site-atom-feed',
        'sitenotice',
        'specialpages',
@@ -808,6 +809,7 @@ XHTML id names.
 'namespaces'                     => 'Namespaces',
 'variants'                       => 'Variants',
 
+'navigation-heading'=> 'Navigation menu',
 'errorpagetitle'    => 'Error',
 'returnto'          => 'Return to $1.',
 'tagline'           => 'From {{SITENAME}}',

diff --git a/languages/messages/MessagesQqq.php b/languages/messages/MessagesQqq.php
index 709f1dd..5ed6984 100644 (file)
--- a/languages/messages/MessagesQqq.php
+++ b/languages/messages/MessagesQqq.php
@@ -401,6 +401,8 @@ This can also appear in the credits page if the credits feature is enabled,for e
 'namespaces' => '{{Identical|Namespace}}',
 'variants' => 'Used by the Vector skin.',
 
+'navigation-heading' => 'Heading shown above the navigation menu (sidebar) for screen-readers (or in non-standard skins).',
+
 'errorpagetitle' => 'Message shown in browser title bar when encountering error operation.
 
 {{Identical|Error}}',

diff --git a/maintenance/language/messages.inc b/maintenance/language/messages.inc
index d7a396f..48b3fa9 100644 (file)
--- a/maintenance/language/messages.inc
+++ b/maintenance/language/messages.inc
@@ -203,6 +203,7 @@ $wgMessageStructure = array(
                'variants',
        ),
        'miscellaneous2' => array(
+               'navigation-heading',
                'errorpagetitle',
                'returnto',
                'tagline',

diff --git a/skins/CologneBlue.php b/skins/CologneBlue.php
index 4d18eb5..0423f8e 100644 (file)
--- a/skins/CologneBlue.php
+++ b/skins/CologneBlue.php
@@ -285,10 +285,6 @@ class CologneBlueTemplate extends BaseTemplate {
                        </a>
                </p>
                <p id="sitesub"><?php echo wfMessage( 'sitesubtitle' )->escaped() ?></p>
-               <div id="toplinks" role="navigation">
-                       <p id="syslinks"><?php echo $this->sysLinks() ?></p>
-                       <p id="variantlinks"><?php echo $this->variantLinks() ?></p>
-               </div>
                <div id="linkcollection" role="navigation">
                        <div id="langlinks"><?php echo str_replace( '<br />', '', $this->otherLanguages() ) ?></div>
                        <?php echo $this->getSkin()->getCategories() ?>
@@ -355,7 +351,14 @@ class CologneBlueTemplate extends BaseTemplate {
 ?>
        </div>
 </div>
-<?php echo $this->quickBar() ?>
+<div id="mw-navigation">
+       <h2><?php echo wfMessage( 'navigation-heading' )->escaped() ?></h2>
+       <div id="toplinks" role="navigation">
+               <p id="syslinks"><?php echo $this->sysLinks() ?></p>
+               <p id="variantlinks"><?php echo $this->variantLinks() ?></p>
+       </div>
+       <?php echo $this->quickBar() ?>
+</div>
 <?php
                $s = ob_get_contents();
                ob_end_clean();
@@ -508,7 +511,7 @@ class CologneBlueTemplate extends BaseTemplate {
                foreach ( $bar as $heading => $data ) {
                        $portletId = Sanitizer::escapeId( "p-$heading" );
                        $headingMsg = wfMessage( $idToMessage[$heading] ? $idToMessage[$heading] : $heading );
-                       $headingHTML = "<h6>" . ( $headingMsg->exists() ? $headingMsg->escaped() : htmlspecialchars( $heading ) ) . "</h6>";
+                       $headingHTML = "<h3>" . ( $headingMsg->exists() ? $headingMsg->escaped() : htmlspecialchars( $heading ) ) . "</h3>";
                        $listHTML = "";
 
                        if ( is_array( $data ) ) {

diff --git a/skins/Modern.php b/skins/Modern.php
index ce850a0..900bdd8 100644 (file)
--- a/skins/Modern.php
+++ b/skins/Modern.php
@@ -106,6 +106,7 @@ class ModernTemplate extends MonoBookTemplate {
        </div><!-- mw_contentwrapper -->
 
        <div id="mw_portlets"<?php $this->html("userlangattributes") ?>>
+       <h2><?php $this->msg( 'navigation-heading' ) ?></h2>
 
        <!-- portlets -->
        <?php $this->renderPortals( $this->data['sidebar'] ); ?>
@@ -119,7 +120,7 @@ class ModernTemplate extends MonoBookTemplate {
 
        <!-- personal portlet -->
        <div class="portlet" id="p-personal" role="navigation">
-               <h5><?php $this->msg('personaltools') ?></h5>
+               <h3><?php $this->msg('personaltools') ?></h3>
                <div class="pBody">
                        <ul>
 <?php          foreach($this->getPersonalTools() as $key => $item) { ?>

diff --git a/skins/MonoBook.php b/skins/MonoBook.php
index 955f05b..1b262a6 100644 (file)
--- a/skins/MonoBook.php
+++ b/skins/MonoBook.php
@@ -107,9 +107,10 @@ class MonoBookTemplate extends BaseTemplate {
        </div>
 </div></div>
 <div id="column-one"<?php $this->html('userlangattributes')  ?>>
+       <h2><?php $this->msg( 'navigation-heading' ) ?></h2>
 <?php $this->cactions(); ?>
        <div class="portlet" id="p-personal" role="navigation">
-               <h5><?php $this->msg('personaltools') ?></h5>
+               <h3><?php $this->msg('personaltools') ?></h3>
                <div class="pBody">
                        <ul<?php $this->html('userlangattributes') ?>>
 <?php          foreach($this->getPersonalTools() as $key => $item) { ?>
@@ -204,7 +205,7 @@ echo $footerEnd;
                global $wgUseTwoButtonsSearchForm;
 ?>
        <div id="p-search" class="portlet" role="search">
-               <h5><label for="searchInput"><?php $this->msg('search') ?></label></h5>
+               <h3><label for="searchInput"><?php $this->msg('search') ?></label></h3>
                <div id="searchBody" class="pBody">
                        <form action="<?php $this->text('wgScript') ?>" id="searchform">
                                <input type='hidden' name="title" value="<?php $this->text('searchtitle') ?>"/>
@@ -231,7 +232,7 @@ echo $footerEnd;
        function cactions() {
 ?>
        <div id="p-cactions" class="portlet" role="navigation">
-               <h5><?php $this->msg('views') ?></h5>
+               <h3><?php $this->msg('views') ?></h3>
                <div class="pBody">
                        <ul><?php
                                foreach($this->data['content_actions'] as $key => $tab) {
@@ -248,7 +249,7 @@ echo $footerEnd;
        function toolbox() {
 ?>
        <div class="portlet" id="p-tb" role="navigation">
-               <h5><?php $this->msg('toolbox') ?></h5>
+               <h3><?php $this->msg('toolbox') ?></h3>
                <div class="pBody">
                        <ul>
 <?php
@@ -271,7 +272,7 @@ echo $footerEnd;
                if( $this->data['language_urls'] ) {
 ?>
        <div id="p-lang" class="portlet" role="navigation">
-               <h5<?php $this->html('userlangattributes') ?>><?php $this->msg('otherlanguages') ?></h5>
+               <h3<?php $this->html('userlangattributes') ?>><?php $this->msg('otherlanguages') ?></h3>
                <div class="pBody">
                        <ul>
 <?php          foreach($this->data['language_urls'] as $key => $langlink) { ?>
@@ -299,7 +300,7 @@ echo $footerEnd;
                echo '  ' . Html::openElement( 'div', $portletAttribs );
 ?>
 
-               <h5><?php $msg = wfMessage( $bar ); echo htmlspecialchars( $msg->exists() ? $msg->text() : $bar ); ?></h5>
+               <h3><?php $msg = wfMessage( $bar ); echo htmlspecialchars( $msg->exists() ? $msg->text() : $bar ); ?></h3>
                <div class='pBody'>
 <?php   if ( is_array( $cont ) ) { ?>
                        <ul>

diff --git a/skins/Vector.php b/skins/Vector.php
index 097bdde..92eb3ad 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -227,25 +227,28 @@ class VectorTemplate extends BaseTemplate {
                        <!-- /bodyContent -->
                </div>
                <!-- /content -->
-               <!-- header -->
-               <div id="mw-head" class="noprint">
-                       <?php $this->renderNavigation( 'PERSONAL' ); ?>
-                       <div id="left-navigation">
-                               <?php $this->renderNavigation( array( 'NAMESPACES', 'VARIANTS' ) ); ?>
-                       </div>
-                       <div id="right-navigation">
-                               <?php $this->renderNavigation( array( 'VIEWS', 'ACTIONS', 'SEARCH' ) ); ?>
+               <div id="mw-navigation">
+                       <h2><?php $this->msg( 'navigation-heading' ) ?></h2>
+                       <!-- header -->
+                       <div id="mw-head" class="noprint">
+                               <?php $this->renderNavigation( 'PERSONAL' ); ?>
+                               <div id="left-navigation">
+                                       <?php $this->renderNavigation( array( 'NAMESPACES', 'VARIANTS' ) ); ?>
+                               </div>
+                               <div id="right-navigation">
+                                       <?php $this->renderNavigation( array( 'VIEWS', 'ACTIONS', 'SEARCH' ) ); ?>
+                               </div>
                        </div>
-               </div>
-               <!-- /header -->
-               <!-- panel -->
+                       <!-- /header -->
+                       <!-- panel -->
                        <div id="mw-panel" class="noprint">
                                <!-- logo -->
                                        <div id="p-logo" role="banner"><a style="background-image: url(<?php $this->text( 'logopath' ) ?>);" href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] ) ?>" <?php echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) ) ?>></a></div>
                                <!-- /logo -->
                                <?php $this->renderPortals( $this->data['sidebar'] ); ?>
                        </div>
-               <!-- /panel -->
+                       <!-- /panel -->
+               </div>
                <!-- footer -->
                <div id="footer" role="contentinfo"<?php $this->html( 'userlangattributes' ) ?>>
                        <?php foreach( $this->getFooterLinks() as $category => $links ): ?>
@@ -331,7 +334,7 @@ class VectorTemplate extends BaseTemplate {
                }
                ?>
 <div class="portal" role="navigation" id='<?php echo Sanitizer::escapeId( "p-$name" ) ?>'<?php echo Linker::tooltip( 'p-' . $name ) ?>>
-       <h5<?php $this->html( 'userlangattributes' ) ?>><?php $msgObj = wfMessage( $msg ); echo htmlspecialchars( $msgObj->exists() ? $msgObj->text() : $msg ); ?></h5>
+       <h3<?php $this->html( 'userlangattributes' ) ?>><?php $msgObj = wfMessage( $msg ); echo htmlspecialchars( $msgObj->exists() ? $msgObj->text() : $msg ); ?></h3>
        <div class="body">
 <?php
                if ( is_array( $content ) ): ?>
@@ -381,7 +384,7 @@ class VectorTemplate extends BaseTemplate {
                                case 'NAMESPACES':
 ?>
 <div id="p-namespaces" role="navigation" class="vectorTabs<?php if ( count( $this->data['namespace_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
-       <h5><?php $this->msg( 'namespaces' ) ?></h5>
+       <h3><?php $this->msg( 'namespaces' ) ?></h3>
        <ul<?php $this->html( 'userlangattributes' ) ?>>
                <?php foreach ( $this->data['namespace_urls'] as $link ): ?>
                        <li <?php echo $link['attributes'] ?>><span><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php echo htmlspecialchars( $link['text'] ) ?></a></span></li>
@@ -393,14 +396,14 @@ class VectorTemplate extends BaseTemplate {
                                case 'VARIANTS':
 ?>
 <div id="p-variants" role="navigation" class="vectorMenu<?php if ( count( $this->data['variant_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
-       <h4>
+       <h3 id="mw-vector-current-variant">
        <?php foreach ( $this->data['variant_urls'] as $link ): ?>
                <?php if ( stripos( $link['attributes'], 'selected' ) !== false ): ?>
                        <?php echo htmlspecialchars( $link['text'] ) ?>
                <?php endif; ?>
        <?php endforeach; ?>
-       </h4>
-       <h5><span><?php $this->msg( 'variants' ) ?></span><a href="#"></a></h5>
+       </h3>
+       <h3><span><?php $this->msg( 'variants' ) ?></span><a href="#"></a></h3>
        <div class="menu">
                <ul>
                        <?php foreach ( $this->data['variant_urls'] as $link ): ?>
@@ -414,7 +417,7 @@ class VectorTemplate extends BaseTemplate {
                                case 'VIEWS':
 ?>
 <div id="p-views" role="navigation" class="vectorTabs<?php if ( count( $this->data['view_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
-       <h5><?php $this->msg('views') ?></h5>
+       <h3><?php $this->msg('views') ?></h3>
        <ul<?php $this->html('userlangattributes') ?>>
                <?php foreach ( $this->data['view_urls'] as $link ): ?>
                        <li<?php echo $link['attributes'] ?>><span><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php
@@ -431,7 +434,7 @@ class VectorTemplate extends BaseTemplate {
                                case 'ACTIONS':
 ?>
 <div id="p-cactions" role="navigation" class="vectorMenu<?php if ( count( $this->data['action_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
-       <h5><span><?php $this->msg( 'actions' ) ?></span><a href="#"></a></h5>
+       <h3><span><?php $this->msg( 'actions' ) ?></span><a href="#"></a></h3>
        <div class="menu">
                <ul<?php $this->html( 'userlangattributes' ) ?>>
                        <?php foreach ( $this->data['action_urls'] as $link ): ?>
@@ -445,7 +448,7 @@ class VectorTemplate extends BaseTemplate {
                                case 'PERSONAL':
 ?>
 <div id="p-personal" role="navigation" class="<?php if ( count( $this->data['personal_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
-       <h5><?php $this->msg( 'personaltools' ) ?></h5>
+       <h3><?php $this->msg( 'personaltools' ) ?></h3>
        <ul<?php $this->html( 'userlangattributes' ) ?>>
 <?php
                                        $personalTools = $this->getPersonalTools();
@@ -474,7 +477,7 @@ class VectorTemplate extends BaseTemplate {
                                case 'SEARCH':
 ?>
 <div id="p-search" role="search">
-       <h5<?php $this->html( 'userlangattributes' ) ?>><label for="searchInput"><?php $this->msg( 'search' ) ?></label></h5>
+       <h3<?php $this->html( 'userlangattributes' ) ?>><label for="searchInput"><?php $this->msg( 'search' ) ?></label></h3>
        <form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
                <?php if ( $wgVectorUseSimpleSearch && $this->getSkin()->getUser()->getOption( 'vector-simplesearch' ) ): ?>
                <div id="simpleSearch">

diff --git a/skins/cologneblue/screen.css b/skins/cologneblue/screen.css
index 0d9615f..349638a 100644 (file)
--- a/skins/cologneblue/screen.css
+++ b/skins/cologneblue/screen.css
@@ -97,7 +97,13 @@ textarea {
        color: #446688;
 }
 
-#quickbar h6 {
+/* Hide, but keep accessible for screen-readers */
+#mw-navigation h2 {
+       position: absolute;
+       top: -9999px;
+}
+
+#quickbar h3 {
        font-family: Verdana, Arial, sans-serif;
        font-size: 10pt;
        font-weight: bold;

diff --git a/skins/modern/main.css b/skins/modern/main.css
index 80cdcda..eff62ab 100644 (file)
--- a/skins/modern/main.css
+++ b/skins/modern/main.css
@@ -58,7 +58,7 @@ body {
        font-variant: small-caps;
 }
 
-#p-personal h5 {
+#p-personal h3 {
        display: none;
 }
 
@@ -125,6 +125,12 @@ body {
        background-color: #f0f0f0;
 }
 
+/* Hide, but keep accessible for screen-readers */
+#mw_portlets h2 {
+       position: absolute;
+       top: -9999px;
+}
+
 #mw_main {
        padding: 0 0 0 0;
        margin: 0 0 0 0;
@@ -170,11 +176,12 @@ textarea {
        margin-top: .4em;
 }
 
-.portlet h5 {
+.portlet h3 {
        padding: 0.1em 0 0.3em 1em;
        margin: 0 0 0 0;
        background-color: #dddddd;
        font-weight: bold;
+       font-size: 0.83em;
        border-bottom: solid 1px #3c78b5;
        height: 1.1em;
 }
@@ -243,7 +250,7 @@ ul {
        color: white;
 }
 
-#p-cactions h5 {
+#p-cactions h3 {
        display: none;
 }
 

diff --git a/skins/monobook/main.css b/skins/monobook/main.css
index 5866d97..fbb9c1c 100644 (file)
--- a/skins/monobook/main.css
+++ b/skins/monobook/main.css
@@ -24,6 +24,11 @@ div#content {
 div#column-one {
        padding-top: 160px;
 }
+/* Hide, but keep accessible for screen-readers */
+#column-one h2 {
+       position: absolute;
+       top: -9999px;
+}
 div#content {
        background: white;
        color: black;
@@ -224,12 +229,7 @@ table.rimage {
        width: 11.6em;
        overflow: hidden;
 }
-.portlet h4 {
-       font-size: 95%;
-       font-weight: normal;
-       white-space: nowrap;
-}
-.portlet h5 {
+.portlet h3 {
        background: transparent;
        padding: 0 1em 0 .5em;
        display: inline;
@@ -239,18 +239,6 @@ table.rimage {
        font-weight: normal;
        white-space: nowrap;
 }
-.portlet h6 {
-       background: #ffae2e;
-       border: 1px solid #2f6fab;
-       border-style: solid solid none solid;
-       padding: 0 1em 0 1em;
-       text-transform: lowercase;
-       display: block;
-       font-size: 1em;
-       height: 1.2em;
-       font-weight: normal;
-       white-space: nowrap;
-}
 .pBody {
        font-size: 95%;
        background-color: white;
@@ -259,13 +247,6 @@ table.rimage {
        border: 1px solid #aaa;
        padding: 0 .8em .3em .5em;
 }
-.portlet h1,
-.portlet h2,
-.portlet h3,
-.portlet h4 {
-       margin: 0;
-       padding: 0;
-}
 .portlet ul {
        line-height: 1.5em;
        list-style-type: square;
@@ -291,7 +272,7 @@ table.rimage {
        width: 12em;
        overflow: visible;
 }
-#p-logo h5 {
+#p-logo h3 {
        display: none;
 }
 #p-logo a,
@@ -352,7 +333,7 @@ input.searchButton {
        overflow: visible;
        line-height: 1.2em;
 }
-#p-personal h5 {
+#p-personal h3 {
        display: none;
 }
 #p-personal .portlet,
@@ -474,7 +455,7 @@ li#pt-login {
        text-decoration: none;
        background-color: white;
 }
-#p-cactions h5 {
+#p-cactions h3 {
        display: none;
 }
 #p-cactions li.istalk {
@@ -515,8 +496,7 @@ li#ca-print {
 }
 
 /* Override text-transform on languages where capitalization is significant */
-.capitalize-all-nouns .portlet h5,
-.capitalize-all-nouns .portlet h6,
+.capitalize-all-nouns .portlet h3,
 .capitalize-all-nouns #p-personal ul,
 .capitalize-all-nouns #p-cactions ul li a {
        text-transform: none;

diff --git a/skins/simple/main.css b/skins/simple/main.css
index 7b4f2ae..edb1d7d 100644 (file)
--- a/skins/simple/main.css
+++ b/skins/simple/main.css
@@ -84,6 +84,12 @@ a:hover {
        left: 0;
 }
 
+/* Hide, but keep accessible for screen-readers */
+#column-one h2 {
+       position: absolute;
+       top: -9999px;
+}
+
 body {
        margin: 0;
        padding: 0;

diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index de5c247..308e6ee 100644 (file)
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -37,6 +37,11 @@ div#content {
        color: black;
        direction: ltr;
 }
+/* Hide, but keep accessible for screen-readers */
+#mw-navigation h2 {
+       position: absolute;
+       top: -9999px;
+}
 /* Head */
 #mw-page-base {
        height: 5em;
@@ -61,7 +66,7 @@ div#mw-head {
        right: 0;
        width: 100%;
 }
-div#mw-head h5 {
+div#mw-head h3 {
        margin: 0;
        padding: 0;
 }
@@ -77,7 +82,7 @@ div.emptyPortlet {
        /* Display on top of page tabs - bug 37158 */
        z-index: 1;
 }
-#p-personal h5 {
+#p-personal h3 {
        display: none;
 }
 #p-personal ul {
@@ -108,8 +113,8 @@ div.emptyPortlet {
        margin-top: 2.5em;
 }
 /* Navigation Labels */
-div.vectorTabs h5,
-div.vectorMenu h5 span {
+div.vectorTabs h3,
+div.vectorMenu h3 span {
        display: none;
 }
 /* Namespaces and Views */
@@ -228,22 +233,22 @@ body.rtl div.vectorMenu {
 }
 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 /* @noflip */
-div#mw-head div.vectorMenu h5 {
+div#mw-head div.vectorMenu h3 {
        float: left;
        /* @embed */
        background-image: url(images/tab-break.png);
        background-repeat: no-repeat;
 }
 /* This will be flipped - unlike the one above it */
-div#mw-head div.vectorMenu h5 {
+div#mw-head div.vectorMenu h3 {
        background-position: bottom left;
        margin-left: -1px;
 }
 /* IGNORED BY IE6 */
-div#mw-head div.vectorMenu > h5 {
+div#mw-head div.vectorMenu > h3 {
        background-image: none;
 }
-div#mw-head div.vectorMenu h4 {
+div.vectorMenu#p-variants #mw-vector-current-variant {
        display: inline-block;
        float: left;
        font-size: 0.8em;
@@ -254,21 +259,21 @@ div#mw-head div.vectorMenu h4 {
 }
 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 /* @noflip */
-div.vectorMenu h5 a {
+div.vectorMenu h3 a {
        display: inline-block;
        width: 24px;
-       height: 2.5em;
+       height: 1.9em;
        text-decoration: none;
        /* @embed */
        background-image: url(images/tab-break.png);
        background-repeat: no-repeat;
 }
 /* This will be flipped - unlike the one above it */
-div.vectorMenu h5 a {
+div.vectorMenu h3 a {
        background-position: bottom right;
 }
 /* IGNORED BY IE6 */
-div.vectorMenu h5 > a {
+div.vectorMenu h3 > a {
        display: block;
 }
 div.vectorMenu div.menu {
@@ -348,7 +353,7 @@ div.vectorMenu li.selected a:visited {
        text-decoration: none;
 }
 /* Search */
-#p-search h5 {
+#p-search h3 {
        display: none;
 }
 /* @noflip */
@@ -465,7 +470,7 @@ div#mw-panel div.portal {
        padding-bottom: 1.5em;
        direction: ltr;
 }
-div#mw-panel div.portal h5 {
+div#mw-panel div.portal h3 {
        font-weight: normal;
        color: #444;
        padding: 0.25em;

diff --git a/skins/vector/vector.js b/skins/vector/vector.js
index 8b719e5..4427d9a 100644 (file)
--- a/skins/vector/vector.js
+++ b/skins/vector/vector.js
@@ -4,7 +4,7 @@
 jQuery( function ( $ ) {
        $( 'div.vectorMenu' ).each( function () {
                var $el = $( this );
-               $el.find( 'h5:first a:first' )
+               $el.find( 'h3:first a:first' )
                        // For accessibility, show the menu when the hidden link in the menu is clicked (bug 24298)
                        .click( function ( e ) {
                                $el.find( '.menu:first' ).toggleClass( 'menuForceShow' );