From: Tpt <thomaspt@hotmail.fr>
Date: Sun, 4 Nov 2012 15:10:55 +0000 (+0100)
Subject: (bug 18338) WAI-ARIA landmark roles in most used skins
X-Git-Tag: 1.31.0-rc.0~21664^2~1
X-Git-Url: https://git.cyclocoop.org/%27.WWW_URL.%27admin/?a=commitdiff_plain;h=14488fc4a762b8fef377bdcdf153c2fbfb128725;p=lhc%2Fweb%2Fwiklou.git

(bug 18338) WAI-ARIA landmark roles in most used skins

Add of most commons langmark roles (main, banner,
navigation, contentinfo and search) to vector, monobook,
cologneBlue and modern skins.
ARIA specification: http://www.w3.org/TR/wai-aria/

WAI-ARIA (Web Accessibility Initiative - Accessible Rich
Internet Applications) is a specification published by
the W3C that specifies, between other things,
a set of values for the "role" attribute in order to
increase the accessibility of web pages.
ARIA is now suported by most of the reading systems.


Change-Id: I470acb8bda50e4f43ad53624dd268fc40cc2fcfd
---

diff --git a/skins/CologneBlue.php b/skins/CologneBlue.php
index 84042c3dc9..c140e33fc8 100644
--- a/skins/CologneBlue.php
+++ b/skins/CologneBlue.php
@@ -279,17 +279,17 @@ class CologneBlueTemplate extends BaseTemplate {
 ?>
 <div id="content">
 	<div id="topbar">
-		<p id="sitetitle">
+		<p id="sitetitle" role="banner">
 			<a href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] ) ?>">
 				<?php echo wfMessage( 'sitetitle' )->escaped() ?>
 			</a>
 		</p>
 		<p id="sitesub"><?php echo wfMessage( 'sitesubtitle' )->escaped() ?></p>
-		<div id="toplinks">
+		<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">
+		<div id="linkcollection" role="navigation">
 			<div id="langlinks"><?php echo str_replace( '<br />', '', $this->otherLanguages() ) ?></div>
 			<?php echo $this->getSkin()->getCategories() ?>
 			<div id="titlelinks"><?php echo $this->pageTitleLinks() ?></div>
@@ -298,7 +298,7 @@ class CologneBlueTemplate extends BaseTemplate {
 			<?php } ?>
 		</div>
 	</div>
-	<div id="article">
+	<div id="article" role="main">
 		<?php if ( $this->getSkin()->getSiteNotice() ) { ?>
 		<div id="siteNotice"><?php echo $this->getSkin()->getSiteNotice() ?></div>
 		<?php } ?>
@@ -328,7 +328,7 @@ class CologneBlueTemplate extends BaseTemplate {
 		ob_start();
 ?>
 	</div>
-	<div id='footer'>
+	<div id="footer" role="contentinfo">
 <?php
 		// Page-related links
 		echo $this->bottomLinks();
@@ -517,7 +517,8 @@ class CologneBlueTemplate extends BaseTemplate {
 			}
 
 			if ( $listHTML ) {
-				$s .= "<div class=\"portlet\" id=\"$portletId\">\n$headingHTML\n$listHTML\n</div>\n";
+				$role = ( $heading == 'qbfind' ) ? 'search' : 'navigation';
+				$s .= "<div class=\"portlet\" id=\"$portletId\" role=\"$role\">\n$headingHTML\n$listHTML\n</div>\n";
 			}
 		}
 
diff --git a/skins/Modern.php b/skins/Modern.php
index 4211bb844d..1987c1cf0d 100644
--- a/skins/Modern.php
+++ b/skins/Modern.php
@@ -73,7 +73,7 @@ class ModernTemplate extends MonoBookTemplate {
 <?php $this->cactions(); ?>
 
 	<!-- content -->
-	<div id="mw_content">
+	<div id="mw_content" role="main">
 	<!-- contentholder does nothing by default, but it allows users to style the text inside
 	     the content area without affecting the meaning of 'em' in #mw_content, which is used
 	     for the margins -->
@@ -115,7 +115,7 @@ class ModernTemplate extends MonoBookTemplate {
 	<div class="mw_clear"></div>
 
 	<!-- personal portlet -->
-	<div class="portlet" id="p-personal">
+	<div class="portlet" id="p-personal" role="navigation">
 		<h5><?php $this->msg('personaltools') ?></h5>
 		<div class="pBody">
 			<ul>
@@ -129,7 +129,7 @@ class ModernTemplate extends MonoBookTemplate {
 
 
 	<!-- footer -->
-	<div id="footer"<?php $this->html('userlangattributes') ?>>
+	<div id="footer" role="contentinfo"<?php $this->html('userlangattributes') ?>>
 			<ul id="f-list">
 <?php
 		foreach( $this->getFooterLinks("flat") as $aLink ) {
diff --git a/skins/MonoBook.php b/skins/MonoBook.php
index 0bd7134bc3..6f74273ba9 100644
--- a/skins/MonoBook.php
+++ b/skins/MonoBook.php
@@ -80,7 +80,7 @@ class MonoBookTemplate extends BaseTemplate {
 
 		$this->html( 'headelement' );
 ?><div id="globalWrapper">
-<div id="column-content"><div id="content" class="mw-body-primary">
+<div id="column-content"><div id="content" class="mw-body-primary" role="main">
 	<a id="top"></a>
 	<?php if($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice') ?></div><?php } ?>
 
@@ -105,7 +105,7 @@ class MonoBookTemplate extends BaseTemplate {
 </div></div>
 <div id="column-one"<?php $this->html('userlangattributes')  ?>>
 <?php $this->cactions(); ?>
-	<div class="portlet" id="p-personal">
+	<div class="portlet" id="p-personal" role="navigation">
 		<h5><?php $this->msg('personaltools') ?></h5>
 		<div class="pBody">
 			<ul<?php $this->html('userlangattributes') ?>>
@@ -116,7 +116,7 @@ class MonoBookTemplate extends BaseTemplate {
 			</ul>
 		</div>
 	</div>
-	<div class="portlet" id="p-logo">
+	<div class="portlet" id="p-logo" role="banner">
 <?php
 			echo Html::element( 'a', array(
 				'href' => $this->data['nav_urls']['mainpage']['href'],
@@ -134,7 +134,7 @@ class MonoBookTemplate extends BaseTemplate {
 	$validFooterLinks = $this->getFooterLinks( "flat" ); // Additional footer links
 
 	if ( count( $validFooterIcons ) + count( $validFooterLinks ) > 0 ) { ?>
-<div id="footer"<?php $this->html('userlangattributes') ?>>
+<div id="footer" role="contentinfo"<?php $this->html('userlangattributes') ?>>
 <?php
 		$footerEnd = '</div>';
 	} else {
@@ -200,7 +200,7 @@ echo $footerEnd;
 	function searchBox() {
 		global $wgUseTwoButtonsSearchForm;
 ?>
-	<div id="p-search" class="portlet">
+	<div id="p-search" class="portlet" role="search">
 		<h5><label for="searchInput"><?php $this->msg('search') ?></label></h5>
 		<div id="searchBody" class="pBody">
 			<form action="<?php $this->text('wgScript') ?>" id="searchform">
@@ -227,7 +227,7 @@ echo $footerEnd;
 	 */
 	function cactions() {
 ?>
-	<div id="p-cactions" class="portlet">
+	<div id="p-cactions" class="portlet" role="navigation">
 		<h5><?php $this->msg('views') ?></h5>
 		<div class="pBody">
 			<ul><?php
@@ -244,7 +244,7 @@ echo $footerEnd;
 	/*************************************************************************************************/
 	function toolbox() {
 ?>
-	<div class="portlet" id="p-tb">
+	<div class="portlet" id="p-tb" role="navigation">
 		<h5><?php $this->msg('toolbox') ?></h5>
 		<div class="pBody">
 			<ul>
@@ -267,7 +267,7 @@ echo $footerEnd;
 	function languageBox() {
 		if( $this->data['language_urls'] ) {
 ?>
-	<div id="p-lang" class="portlet">
+	<div id="p-lang" class="portlet" role="navigation">
 		<h5<?php $this->html('userlangattributes') ?>><?php $this->msg('otherlanguages') ?></h5>
 		<div class="pBody">
 			<ul>
@@ -288,7 +288,7 @@ echo $footerEnd;
 	 * @param $cont array|string
 	 */
 	function customBox( $bar, $cont ) {
-		$portletAttribs = array( 'class' => 'generated-sidebar portlet', 'id' => Sanitizer::escapeId( "p-$bar" ) );
+		$portletAttribs = array( 'class' => 'generated-sidebar portlet', 'id' => Sanitizer::escapeId( "p-$bar" ), 'role' => 'navigation' );
 		$tooltip = Linker::titleAttrib( "p-$bar" );
 		if ( $tooltip !== false ) {
 			$portletAttribs['title'] = $tooltip;
diff --git a/skins/Vector.php b/skins/Vector.php
index 7fbca414b3..c30a1cd41a 100644
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -156,7 +156,7 @@ class VectorTemplate extends BaseTemplate {
 		<div id="mw-page-base" class="noprint"></div>
 		<div id="mw-head-base" class="noprint"></div>
 		<!-- content -->
-		<div id="content" class="mw-body">
+		<div id="content" class="mw-body" role="main">
 			<a id="top"></a>
 			<div id="mw-js-message" style="display:none;"<?php $this->html( 'userlangattributes' ) ?>></div>
 			<?php if ( $this->data['sitenotice'] ): ?>
@@ -238,13 +238,13 @@ class VectorTemplate extends BaseTemplate {
 		<!-- panel -->
 			<div id="mw-panel" class="noprint">
 				<!-- logo -->
-					<div id="p-logo"><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>
+					<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 -->
 		<!-- footer -->
-		<div id="footer"<?php $this->html( 'userlangattributes' ) ?>>
+		<div id="footer" role="contentinfo"<?php $this->html( 'userlangattributes' ) ?>>
 			<?php foreach( $this->getFooterLinks() as $category => $links ): ?>
 				<ul id="footer-<?php echo $category ?>">
 					<?php foreach( $links as $link ): ?>
@@ -327,7 +327,7 @@ class VectorTemplate extends BaseTemplate {
 			$msg = $name;
 		}
 		?>
-<div class="portal" id='<?php echo Sanitizer::escapeId( "p-$name" ) ?>'<?php echo Linker::tooltip( 'p-' . $name ) ?>>
+<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>
 	<div class="body">
 <?php
@@ -377,7 +377,7 @@ class VectorTemplate extends BaseTemplate {
 			switch ( $element ) {
 				case 'NAMESPACES':
 ?>
-<div id="p-namespaces" class="vectorTabs<?php if ( count( $this->data['namespace_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
+<div id="p-namespaces" role="navigation" class="vectorTabs<?php if ( count( $this->data['namespace_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
 	<h5><?php $this->msg( 'namespaces' ) ?></h5>
 	<ul<?php $this->html( 'userlangattributes' ) ?>>
 		<?php foreach ( $this->data['namespace_urls'] as $link ): ?>
@@ -389,7 +389,7 @@ class VectorTemplate extends BaseTemplate {
 				break;
 				case 'VARIANTS':
 ?>
-<div id="p-variants" class="vectorMenu<?php if ( count( $this->data['variant_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
+<div id="p-variants" role="navigation" class="vectorMenu<?php if ( count( $this->data['variant_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
 	<h4>
 	<?php foreach ( $this->data['variant_urls'] as $link ): ?>
 		<?php if ( stripos( $link['attributes'], 'selected' ) !== false ): ?>
@@ -410,7 +410,7 @@ class VectorTemplate extends BaseTemplate {
 				break;
 				case 'VIEWS':
 ?>
-<div id="p-views" class="vectorTabs<?php if ( count( $this->data['view_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
+<div id="p-views" role="navigation" class="vectorTabs<?php if ( count( $this->data['view_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
 	<h5><?php $this->msg('views') ?></h5>
 	<ul<?php $this->html('userlangattributes') ?>>
 		<?php foreach ( $this->data['view_urls'] as $link ): ?>
@@ -427,7 +427,7 @@ class VectorTemplate extends BaseTemplate {
 				break;
 				case 'ACTIONS':
 ?>
-<div id="p-cactions" class="vectorMenu<?php if ( count( $this->data['action_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
+<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>
 	<div class="menu">
 		<ul<?php $this->html( 'userlangattributes' ) ?>>
@@ -441,7 +441,7 @@ class VectorTemplate extends BaseTemplate {
 				break;
 				case 'PERSONAL':
 ?>
-<div id="p-personal" class="<?php if ( count( $this->data['personal_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
+<div id="p-personal" role="navigation" class="<?php if ( count( $this->data['personal_urls'] ) == 0 ) echo ' emptyPortlet'; ?>">
 	<h5><?php $this->msg( 'personaltools' ) ?></h5>
 	<ul<?php $this->html( 'userlangattributes' ) ?>>
 <?php			foreach( $this->getPersonalTools() as $key => $item ) { ?>
@@ -454,7 +454,7 @@ class VectorTemplate extends BaseTemplate {
 				break;
 				case 'SEARCH':
 ?>
-<div id="p-search">
+<div id="p-search" role="search">
 	<h5<?php $this->html( 'userlangattributes' ) ?>><label for="searchInput"><?php $this->msg( 'search' ) ?></label></h5>
 	<form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
 		<?php if ( $wgVectorUseSimpleSearch && $this->getSkin()->getUser()->getOption( 'vector-simplesearch' ) ): ?>