(bug 457) use semantic headings for the navigation menu
authorMatmaRex <matma.rex@gmail.com>
Sat, 27 Oct 2012 18:34:15 +0000 (20:34 +0200)
committerGerrit Code Review <gerrit@wikimedia.org>
Sat, 17 Nov 2012 12:19:24 +0000 (12:19 +0000)
commit879a80c34da3eb7d705999a1df6b62261afda097
tree984ac47d712d4025e51a45eb0454f4f6c3a73266
parent44e68ac4f708a9f393a9d2e228acbd35c1cf2f07
(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
13 files changed:
languages/messages/MessagesEn.php
languages/messages/MessagesQqq.php
maintenance/language/messages.inc
skins/CologneBlue.php
skins/Modern.php
skins/MonoBook.php
skins/Vector.php
skins/cologneblue/screen.css
skins/modern/main.css
skins/monobook/main.css
skins/simple/main.css
skins/vector/screen.css
skins/vector/vector.js