jenkins-bot has submitted this change and it was merged.
Change subject: Use HTML5 sectioning elements and ARIA roles
......................................................................
Use HTML5 sectioning elements and ARIA roles
Make use of HTML5 elements `<header>` and
`<main>` including the corresponding ARIA roles in Blueprint.
Add ARIA `role="menuitem"`.
Add HTML5 Shiv `html5shiv.js` and
`html5shiv.min.js` for IE<9 @media screen support.
Ignore `vendor` directory with `html5shiv.js` in jscs and jshint.
Bug: T107213
Change-Id: Ice6b718df5eb4bd28020f2db407d406050e6249f
---
M .gitignore
M .jscsrc
M .jshintignore
M i18n/sv.json
A resources/vendor/html5shiv.js
A resources/vendor/html5shiv.min.js
M src/SkinBlueprint.php
M templates/Skin.mustache
8 files changed, 355 insertions(+), 18 deletions(-)
Approvals:
Spage: Looks good to me, approved
jenkins-bot: Verified
diff --git a/.gitignore b/.gitignore
index c311080..ec70018 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
*~
node_modules
-vendor
+/vendor
composer.lock
diff --git a/.jscsrc b/.jscsrc
index 4e39c89..dfe31a2 100644
--- a/.jscsrc
+++ b/.jscsrc
@@ -2,6 +2,7 @@
"preset": "wikimedia",
"excludeFiles": [
"lib/bootstrap/**",
- "node_modules/**"
+ "node_modules/**",
+ "resources/vendor/**"
]
}
diff --git a/.jshintignore b/.jshintignore
index a956760..0afb836 100644
--- a/.jshintignore
+++ b/.jshintignore
@@ -1,2 +1,3 @@
-node_modules
lib/bootstrap
+node_modules
+resources/vendor/**
diff --git a/i18n/sv.json b/i18n/sv.json
index fe3b343..ab439c5 100644
--- a/i18n/sv.json
+++ b/i18n/sv.json
@@ -4,7 +4,6 @@
"WikiPhoenix"
]
},
- "skinname-blueprint": "Blueprint",
"blueprint-skin-desc": "Blueprint kombinerar sidåtgärder, sidnavigering
och den aktuella sidans innehållsförteckning till ett navigeringsfält som
endast visas på begäran",
"blueprint-left-nav": "* [[Main Page|Huvudsida]]"
}
diff --git a/resources/vendor/html5shiv.js b/resources/vendor/html5shiv.js
new file mode 100644
index 0000000..45ea723
--- /dev/null
+++ b/resources/vendor/html5shiv.js
@@ -0,0 +1,326 @@
+/**
+* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2
Licensed
+*/
+;(function(window, document) {
+/*jshint evil:true */
+ /** version */
+ var version = '3.7.3';
+
+ /** Preset options */
+ var options = window.html5 || {};
+
+ /** Used to skip problem elements */
+ var reSkip =
/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
+
+ /** Not all elements can be cloned in IE **/
+ var saveClones =
/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
+
+ /** Detect whether the browser supports default html5 styles */
+ var supportsHtml5Styles;
+
+ /** Name of the expando, to work with multiple documents or to re-shiv one
document */
+ var expando = '_html5shiv';
+
+ /** The id for the the documents expando */
+ var expanID = 0;
+
+ /** Cached data for each document */
+ var expandoData = {};
+
+ /** Detect whether the browser supports unknown elements */
+ var supportsUnknownElements;
+
+ (function() {
+ try {
+ var a = document.createElement('a');
+ a.innerHTML = '<xyz></xyz>';
+ //if the hidden property is implemented we can assume, that the
browser supports basic HTML5 Styles
+ supportsHtml5Styles = ('hidden' in a);
+
+ supportsUnknownElements = a.childNodes.length == 1 || (function() {
+ // assign a false positive if unable to shiv
+ (document.createElement)('a');
+ var frag = document.createDocumentFragment();
+ return (
+ typeof frag.cloneNode == 'undefined' ||
+ typeof frag.createDocumentFragment == 'undefined' ||
+ typeof frag.createElement == 'undefined'
+ );
+ }());
+ } catch(e) {
+ // assign a false positive if detection fails => unable to shiv
+ supportsHtml5Styles = true;
+ supportsUnknownElements = true;
+ }
+
+ }());
+
+
/*--------------------------------------------------------------------------*/
+
+ /**
+ * Creates a style sheet with the given CSS text and adds it to the document.
+ * @private
+ * @param {Document} ownerDocument The document.
+ * @param {String} cssText The CSS text.
+ * @returns {StyleSheet} The style element.
+ */
+ function addStyleSheet(ownerDocument, cssText) {
+ var p = ownerDocument.createElement('p'),
+ parent = ownerDocument.getElementsByTagName('head')[0] ||
ownerDocument.documentElement;
+
+ p.innerHTML = 'x<style>' + cssText + '</style>';
+ return parent.insertBefore(p.lastChild, parent.firstChild);
+ }
+
+ /**
+ * Returns the value of `html5.elements` as an array.
+ * @private
+ * @returns {Array} An array of shived element node names.
+ */
+ function getElements() {
+ var elements = html5.elements;
+ return typeof elements == 'string' ? elements.split(' ') : elements;
+ }
+
+ /**
+ * Extends the built-in list of html5 elements
+ * @memberOf html5
+ * @param {String|Array} newElements whitespace separated list or array of
new element names to shiv
+ * @param {Document} ownerDocument The context document.
+ */
+ function addElements(newElements, ownerDocument) {
+ var elements = html5.elements;
+ if(typeof elements != 'string'){
+ elements = elements.join(' ');
+ }
+ if(typeof newElements != 'string'){
+ newElements = newElements.join(' ');
+ }
+ html5.elements = elements +' '+ newElements;
+ shivDocument(ownerDocument);
+ }
+
+ /**
+ * Returns the data associated to the given document
+ * @private
+ * @param {Document} ownerDocument The document.
+ * @returns {Object} An object of data.
+ */
+ function getExpandoData(ownerDocument) {
+ var data = expandoData[ownerDocument[expando]];
+ if (!data) {
+ data = {};
+ expanID++;
+ ownerDocument[expando] = expanID;
+ expandoData[expanID] = data;
+ }
+ return data;
+ }
+
+ /**
+ * returns a shived element for the given nodeName and document
+ * @memberOf html5
+ * @param {String} nodeName name of the element
+ * @param {Document|DocumentFragment} ownerDocument The context document.
+ * @returns {Object} The shived element.
+ */
+ function createElement(nodeName, ownerDocument, data){
+ if (!ownerDocument) {
+ ownerDocument = document;
+ }
+ if(supportsUnknownElements){
+ return ownerDocument.createElement(nodeName);
+ }
+ if (!data) {
+ data = getExpandoData(ownerDocument);
+ }
+ var node;
+
+ if (data.cache[nodeName]) {
+ node = data.cache[nodeName].cloneNode();
+ } else if (saveClones.test(nodeName)) {
+ node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
+ } else {
+ node = data.createElem(nodeName);
+ }
+
+ // Avoid adding some elements to fragments in IE < 9 because
+ // * Attributes like `name` or `type` cannot be set/changed once an element
+ // is inserted into a document/fragment
+ // * Link elements with `src` attributes that are inaccessible, as with
+ // a 403 response, will cause the tab/window to crash
+ // * Script elements appended to fragments will execute when their `src`
+ // or `text` property is set
+ return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ?
data.frag.appendChild(node) : node;
+ }
+
+ /**
+ * returns a shived DocumentFragment for the given document
+ * @memberOf html5
+ * @param {Document} ownerDocument The context document.
+ * @returns {Object} The shived DocumentFragment.
+ */
+ function createDocumentFragment(ownerDocument, data){
+ if (!ownerDocument) {
+ ownerDocument = document;
+ }
+ if(supportsUnknownElements){
+ return ownerDocument.createDocumentFragment();
+ }
+ data = data || getExpandoData(ownerDocument);
+ var clone = data.frag.cloneNode(),
+ i = 0,
+ elems = getElements(),
+ l = elems.length;
+ for(;i<l;i++){
+ clone.createElement(elems[i]);
+ }
+ return clone;
+ }
+
+ /**
+ * Shivs the `createElement` and `createDocumentFragment` methods of the
document.
+ * @private
+ * @param {Document|DocumentFragment} ownerDocument The document.
+ * @param {Object} data of the document.
+ */
+ function shivMethods(ownerDocument, data) {
+ if (!data.cache) {
+ data.cache = {};
+ data.createElem = ownerDocument.createElement;
+ data.createFrag = ownerDocument.createDocumentFragment;
+ data.frag = data.createFrag();
+ }
+
+
+ ownerDocument.createElement = function(nodeName) {
+ //abort shiv
+ if (!html5.shivMethods) {
+ return data.createElem(nodeName);
+ }
+ return createElement(nodeName, ownerDocument, data);
+ };
+
+ ownerDocument.createDocumentFragment = Function('h,f', 'return
function(){' +
+ 'var n=f.cloneNode(),c=n.createElement;' +
+ 'h.shivMethods&&(' +
+ // unroll the `createElement` calls
+ getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
+ data.createElem(nodeName);
+ data.frag.createElement(nodeName);
+ return 'c("' + nodeName + '")';
+ }) +
+ ');return n}'
+ )(html5, data.frag);
+ }
+
+
/*--------------------------------------------------------------------------*/
+
+ /**
+ * Shivs the given document.
+ * @memberOf html5
+ * @param {Document} ownerDocument The document to shiv.
+ * @returns {Document} The shived document.
+ */
+ function shivDocument(ownerDocument) {
+ if (!ownerDocument) {
+ ownerDocument = document;
+ }
+ var data = getExpandoData(ownerDocument);
+
+ if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
+ data.hasCSS = !!addStyleSheet(ownerDocument,
+ // corrects block display not defined in IE6/7/8/9
+
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}'
+
+ // adds styling not present in IE6/7/8/9
+ 'mark{background:#FF0;color:#000}' +
+ // hides non-rendered elements
+ 'template{display:none}'
+ );
+ }
+ if (!supportsUnknownElements) {
+ shivMethods(ownerDocument, data);
+ }
+ return ownerDocument;
+ }
+
+
/*--------------------------------------------------------------------------*/
+
+ /**
+ * The `html5` object is exposed so that more elements can be shived and
+ * existing shiving can be detected on iframes.
+ * @type Object
+ * @example
+ *
+ * // options can be changed before the script is included
+ * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods':
false };
+ */
+ var html5 = {
+
+ /**
+ * An array or space separated string of node names of the elements to
shiv.
+ * @memberOf html5
+ * @type Array|String
+ */
+ 'elements': options.elements || 'abbr article aside audio bdi canvas data
datalist details dialog figcaption figure footer header hgroup main mark meter
nav output picture progress section summary template time video',
+
+ /**
+ * current version of html5shiv
+ */
+ 'version': version,
+
+ /**
+ * A flag to indicate that the HTML5 style sheet should be inserted.
+ * @memberOf html5
+ * @type Boolean
+ */
+ 'shivCSS': (options.shivCSS !== false),
+
+ /**
+ * Is equal to true if a browser supports creating unknown/HTML5 elements
+ * @memberOf html5
+ * @type boolean
+ */
+ 'supportsUnknownElements': supportsUnknownElements,
+
+ /**
+ * A flag to indicate that the document's `createElement` and
`createDocumentFragment`
+ * methods should be overwritten.
+ * @memberOf html5
+ * @type Boolean
+ */
+ 'shivMethods': (options.shivMethods !== false),
+
+ /**
+ * A string to describe the type of `html5` object ("default" or "default
print").
+ * @memberOf html5
+ * @type String
+ */
+ 'type': 'default',
+
+ // shivs the document according to the specified `html5` object options
+ 'shivDocument': shivDocument,
+
+ //creates a shived element
+ createElement: createElement,
+
+ //creates a shived documentFragment
+ createDocumentFragment: createDocumentFragment,
+
+ //extends list of elements
+ addElements: addElements
+ };
+
+
/*--------------------------------------------------------------------------*/
+
+ // expose html5
+ window.html5 = html5;
+
+ // shiv the document
+ shivDocument(document);
+
+ if(typeof module == 'object' && module.exports){
+ module.exports = html5;
+ }
+
+}(typeof window !== "undefined" ? window : this, document));
diff --git a/resources/vendor/html5shiv.min.js
b/resources/vendor/html5shiv.min.js
new file mode 100644
index 0000000..355afd1
--- /dev/null
+++ b/resources/vendor/html5shiv.min.js
@@ -0,0 +1,4 @@
+/**
+* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2
Licensed
+*/
+!function(a,b){function c(a,b){var
c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return
c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function
d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function
e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof
a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return
b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return
c.createElement(a);d||(d=f(c));var e;return
e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function
h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var
e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return
e}function
i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return
t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return
function(){var
n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return
b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return
n}")(t,b.frag)}function j(a){a||(a=b);var
d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var
k,l,m="3.7.3",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var
a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in
a,l=1==a.childNodes.length||function(){b.createElement("a");var
a=b.createDocumentFragment();return"undefined"==typeof
a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof
a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr
article aside audio bdi canvas data datalist details dialog figcaption figure
footer header hgroup main mark meter nav output picture progress section
summary template time
video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof
module&&module.exports&&(module.exports=t)}("undefined"!=typeof
window?window:this,document);
\ No newline at end of file
diff --git a/src/SkinBlueprint.php b/src/SkinBlueprint.php
index 128e54b..510eae4 100644
--- a/src/SkinBlueprint.php
+++ b/src/SkinBlueprint.php
@@ -7,6 +7,17 @@
public function initPage( OutputPage $out ) {
parent::initPage( $out );
+
+ // Append JS shiv for supporting HTML5 elements in IE<9 @media
screen
+ $min = $this->getRequest()->getFuzzyBool( 'debug' ) ? '' :
'.min';
+ $out->addHeadItem( 'html5shiv',
+ '<!--[if lt IE 9]><script src="' .
+ htmlspecialchars(
+ $this->getConfig()->get( 'LocalStylePath' ) .
+
"/{$this->stylename}/resources/vendor/html5shiv{$min}.js"
+ ) .
+ '"></script><![endif]-->'
+ );
$out->addModules( array( 'skin.blueprint.js' ) );
}
diff --git a/templates/Skin.mustache b/templates/Skin.mustache
index eb8eba2..3f7b1b2 100644
--- a/templates/Skin.mustache
+++ b/templates/Skin.mustache
@@ -1,18 +1,12 @@
{{{headelement}}}
-
-<div id="sidebar" class="sidebar">
- {{>sidebar}}
-</div>
-
- <nav class="navbar navbar-fixed-top">
+ <header class="navbar navbar-fixed-top" role="banner">
<div class="navbar-header">
- <ul class="nav navbar-nav navbar-head" >
+ <ul class="nav navbar-nav navbar-head">
<li><a href="javascript:void(0)"
id="toc-toggle"></a></li>
<li><a class="navbar-brand" href="/">{{
sitename }}</a></li>
<li id="extra-space"></li>
</ul>
</div>
-
<div class="collapse navbar-collapse" id="navbar-collapse">
<div id="navbar-right">
<form class="navbar-form navbar-left"
action="{{{scriptpath}}}" role="search">
@@ -20,7 +14,6 @@
<label for="searchInput"
class="search-input-label">Search</label>
<input type="hidden" name="title"
value="Special:Search">
</form>
-
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="account-menu
dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
@@ -28,16 +21,19 @@
</a>
<ul class="dropdown-menu"
role="menu">
{{#each personal_urls}}
- <li><a
href="{{href}}" class="{{stringOrArray class}}">{{text}}</a></li>
+ <li
role="menuitem"><a href="{{href}}" class="{{stringOrArray
class}}">{{text}}</a></li>
{{/each}}
</ul>
</li>
</ul>
</div>
</div>
+ </header>
+ // Foo
+ <nav class="sidebar" id="sidebar" role="navigation">
+ {{>sidebar}}
</nav>
-
- <div class="container" id="content">
+ <main class="container" id="content" role="main">
<h1 class="firstHeading" id="firstHeading">
{{{title}}}
</h1>
@@ -56,8 +52,7 @@
<div class="mw-body-content" id="bodyContent">
{{{bodytext}}}
</div>
- </div>
-
+ </main>
{{{debughtml}}}
{{{bottomscripts}}}
{{{reporttime}}}
--
To view, visit https://gerrit.wikimedia.org/r/227582
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ice6b718df5eb4bd28020f2db407d406050e6249f
Gerrit-PatchSet: 14
Gerrit-Project: mediawiki/skins/Blueprint
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Danny B. <[email protected]>
Gerrit-Reviewer: Hoo man <[email protected]>
Gerrit-Reviewer: Pastakhov <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Spage <[email protected]>
Gerrit-Reviewer: TheDJ <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
