[MediaWiki-commits] [Gerrit] [Do not merge] HTML5: Use element to wrap our headi... - change (mediawiki/core)

[TheDJ (Code Review)]

TheDJ has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/158087

Change subject: [Do not merge] HTML5: Use <header> element to wrap our headings.
......................................................................

[Do not merge] HTML5: Use <header> element to wrap our headings.

I've some gripes about our headings currently wrapping the edit section
element. It's bad for screenreaders, they show up in google etc..

This is an experiment to wrap them in the HTML5 element <header>.
 - fix the attributes (merge) on the heading element
 - Figure out how to do this without killing cache
 - Add <section> around the h2 content blocks.
Not sure if i'll pick this up later, but wanted to have it in Gerrit at
least.

Related are bug 6104, bug 61615 and a few more

Bug: 11555
Change-Id: I5350fecafc6a564842e839cc8b41eaa9b782a463
---
M includes/Linker.php
M skins/common/commonElements.css
2 files changed, 31 insertions(+), 27 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core 
refs/changes/87/158087/1

diff --git a/includes/Linker.php b/includes/Linker.php
index f0b16ab..3f8266d 100644
--- a/includes/Linker.php
+++ b/includes/Linker.php
@@ -1739,10 +1739,10 @@
        public static function makeHeadline( $level, $attribs, $anchor, $html,
                $link, $legacyAnchor = false
        ) {
-               $ret = "<h$level$attribs"
-                       . "<span class=\"mw-headline\" 
id=\"$anchor\">$html</span>"
-                       . $link
-                       . "</h$level>";
+               $ret = "<header class=\"mw-h$level\" id=\"$anchor\"$attribs"
+                       . "<h$level class=\"mw-headline\">$html</h$level>"
+                       . " " . $link
+                       . "</header>";
                if ( $legacyAnchor !== false ) {
                        $ret = "<div id=\"$legacyAnchor\"></div>$ret";
                }
diff --git a/skins/common/commonElements.css b/skins/common/commonElements.css
index 392a2a6..2e11dad 100644
--- a/skins/common/commonElements.css
+++ b/skins/common/commonElements.css
@@ -79,63 +79,67 @@
 }
 
 /* Structural Elements */
+header {
+       border-bottom: 1px solid #aaa;
+       overflow: hidden;
+       color: black;
+       background: none;
+       font-weight: normal;
+       margin: 0;
+       padding-top: .5em;
+       padding-bottom: .17em;
+}
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-       color: black;
-       background: none;
-       font-weight: normal;
-       margin: 0;
-       overflow: hidden;
-       padding-top: .5em;
-       padding-bottom: .17em;
-       border-bottom: 1px solid #aaa;
+       display: inline;
 }
 
-h1 {
+header.mw-h1 {
        font-size: 188%;
 }
 
-h2 {
+header.mw-h2 {
        font-size: 150%;
 }
 
-h3,
-h4,
-h5,
-h6 {
+header.mw-h3,
+header.mw-h4,
+header.mw-h5,
+header.mw-h6 {
        border-bottom: none;
        font-weight: bold;
 }
 
-h3 {
+header.mw-h3 {
        font-size: 132%;
 }
 
-h4 {
+header.mw-h4 {
        font-size: 116%;
 }
 
-h5 {
+header.mw-h5 {
        font-size: 108%;
 }
 
-h6 {
+header.mw-h6 {
        font-size: 100%;
 }
 
 /* Some space under the headers in the content area */
-h1,
-h2 {
+header.mw-h1,
+header.mw-h2 {
        margin-bottom: .6em;
 }
 
-h3,
-h4,
-h5 {
+header.mw-h3,
+header.mw-h4,
+header.mw-h5 {
        margin-bottom: .3em;
 }
 

-- 
To view, visit https://gerrit.wikimedia.org/r/158087
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I5350fecafc6a564842e839cc8b41eaa9b782a463
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <hartman.w...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits