Accessibility: Add aria-labelledby to the navigation landmarks

This helps distinguish the various 'navigation' landmarks from eachother
when they are listed by the software

Change-Id: Ib948f60ab97cd2a60d6d607c9a7a2f7061282fe4

diff --git a/skins/Vector.php b/skins/Vector.php
index aba4791..97b28ed 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -294,8 +294,8 @@ class VectorTemplate extends BaseTemplate {
                }
                $msgObj = wfMessage( $msg );
                ?>
-<div class="portal" role="navigation" id='<?php echo Sanitizer::escapeId( "p-$name" ) ?>'<?php echo Linker::tooltip( 'p-' . $name ) ?>>
-       <h3<?php $this->html( 'userlangattributes' ) ?>><?php echo htmlspecialchars( $msgObj->exists() ? $msgObj->text() : $msg ); ?></h3>
+<div class="portal" role="navigation" id='<?php echo Sanitizer::escapeId( "p-$name" ) ?>'<?php echo Linker::tooltip( 'p-' . $name ) ?> aria-labelledby='<?php echo Sanitizer::escapeId( "p-$name-label" ) ?>'>
+       <h3<?php $this->html( 'userlangattributes' ) ?> id='<?php echo Sanitizer::escapeId( "p-$name-label" ) ?>'><?php echo htmlspecialchars( $msgObj->exists() ? $msgObj->text() : $msg ); ?></h3>
        <div class="body">
 <?php
                if ( is_array( $content ) ) { ?>
@@ -343,8 +343,8 @@ class VectorTemplate extends BaseTemplate {
                        switch ( $element ) {
                                case 'NAMESPACES':
 ?>
-<div id="p-namespaces" role="navigation" class="vectorTabs<?php if ( count( $this->data['namespace_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
-       <h3><?php $this->msg( 'namespaces' ) ?></h3>
+<div id="p-namespaces" role="navigation" class="vectorTabs<?php if ( count( $this->data['namespace_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>" aria-labelledby="p-namespaces-label">
+       <h3 id="p-namespaces-label"><?php $this->msg( 'namespaces' ) ?></h3>
        <ul<?php $this->html( 'userlangattributes' ) ?>>
                <?php foreach ( $this->data['namespace_urls'] as $link ) { ?>
                        <li <?php echo $link['attributes'] ?>><span><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php echo htmlspecialchars( $link['text'] ) ?></a></span></li>
@@ -355,7 +355,7 @@ class VectorTemplate extends BaseTemplate {
                                break;
                                case 'VARIANTS':
 ?>
-<div id="p-variants" role="navigation" 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'; } ?>" aria-labelledby="p-variants-label">
        <h3 id="mw-vector-current-variant">
        <?php foreach ( $this->data['variant_urls'] as $link ) { ?>
                <?php if ( stripos( $link['attributes'], 'selected' ) !== false ) { ?>
@@ -363,7 +363,7 @@ class VectorTemplate extends BaseTemplate {
                <?php } ?>
        <?php } ?>
        </h3>
-       <h3><span><?php $this->msg( 'variants' ) ?></span><a href="#"></a></h3>
+       <h3 id="p-variants-label"><span><?php $this->msg( 'variants' ) ?></span><a href="#"></a></h3>
        <div class="menu">
                <ul>
                        <?php foreach ( $this->data['variant_urls'] as $link ) { ?>
@@ -376,8 +376,8 @@ class VectorTemplate extends BaseTemplate {
                                break;
                                case 'VIEWS':
 ?>
-<div id="p-views" role="navigation" class="vectorTabs<?php if ( count( $this->data['view_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
-       <h3><?php $this->msg( 'views' ) ?></h3>
+<div id="p-views" role="navigation" class="vectorTabs<?php if ( count( $this->data['view_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>" aria-labelledby="p-views-label">
+       <h3 id="p-views-label"><?php $this->msg( 'views' ) ?></h3>
        <ul<?php $this->html( 'userlangattributes' ) ?>>
                <?php foreach ( $this->data['view_urls'] as $link ) { ?>
                        <li<?php echo $link['attributes'] ?>><span><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php
@@ -393,8 +393,8 @@ class VectorTemplate extends BaseTemplate {
                                break;
                                case 'ACTIONS':
 ?>
-<div id="p-cactions" role="navigation" class="vectorMenu<?php if ( count( $this->data['action_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
-       <h3><span><?php $this->msg( 'actions' ) ?></span><a href="#"></a></h3>
+<div id="p-cactions" role="navigation" class="vectorMenu<?php if ( count( $this->data['action_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>" aria-labelledby="p-cactions-label">
+       <h3 id="p-cactions-label"><span><?php $this->msg( 'actions' ) ?></span><a href="#"></a></h3>
        <div class="menu">
                <ul<?php $this->html( 'userlangattributes' ) ?>>
                        <?php foreach ( $this->data['action_urls'] as $link ) { ?>
@@ -407,8 +407,8 @@ class VectorTemplate extends BaseTemplate {
                                break;
                                case 'PERSONAL':
 ?>
-<div id="p-personal" role="navigation" class="<?php if ( count( $this->data['personal_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>">
-       <h3><?php $this->msg( 'personaltools' ) ?></h3>
+<div id="p-personal" role="navigation" class="<?php if ( count( $this->data['personal_urls'] ) == 0 ) { echo ' emptyPortlet'; } ?>" aria-labelledby="p-personal-label">
+       <h3 id="p-personal-label"><?php $this->msg( 'personaltools' ) ?></h3>
        <ul<?php $this->html( 'userlangattributes' ) ?>>
 <?php
                                        $personalTools = $this->getPersonalTools();