(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 84042c3..c140e33 100644 (file)
--- 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 4211bb8..1987c1c 100644 (file)
--- 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 0bd7134..6f74273 100644 (file)
--- 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 7fbca41..c30a1cd 100644 (file)
--- 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' ) ): ?>