Commit ed310e10 authored by webchick's avatar webchick

Issue #2052473 by ricky.middaugh, lokapujya, Jalandhar, mgifford, jessebeach,...

Issue #2052473 by ricky.middaugh, lokapujya, Jalandhar, mgifford, jessebeach, BarisW, falcon03: Add aria-label or aria-describedby attributes to all <nav> elements.
parent d8505d2e
......@@ -2135,6 +2135,7 @@ function template_preprocess_page(&$variables) {
'#heading' => array(
'text' => t('Main menu'),
'class' => array('visually-hidden'),
'attributes' => array('id' => 'links__system_main_menu'),
),
'#set_active_class' => TRUE,
);
......@@ -2146,6 +2147,7 @@ function template_preprocess_page(&$variables) {
'#heading' => array(
'text' => t('Secondary menu'),
'class' => array('visually-hidden'),
'attributes' => array('id' => 'links__system_secondary_menu'),
),
'#set_active_class' => TRUE,
);
......
......@@ -382,6 +382,13 @@ function template_preprocess_block(&$variables) {
if ($id = $variables['elements']['#block']->id()) {
$variables['attributes']['id'] = drupal_html_id('block-' . $id);
}
// Proactively add aria-describedby if possible to improve accessibility.
if (isset($variables['elements']['#block']->subject) && isset($variables['attributes']['role'])) {
$variables['title_attributes']['id'] = drupal_html_id($variables['elements']['#block']->subject);
$variables['attributes']['aria-describedby'] = $variables['title_attributes']['id'];
}
}
/**
......
......@@ -361,15 +361,6 @@ function book_form_node_delete_confirm_alter(&$form, $form_state) {
}
}
/**
* Implements hook_preprocess_HOOK() for block templates.
*/
function book_preprocess_block(&$variables) {
if ($variables['configuration']['provider'] == 'book') {
$variables['attributes']['role'] = 'navigation';
}
}
/**
* Prepares variables for book listing block templates.
*
......@@ -389,7 +380,11 @@ function template_preprocess_book_all_books_block(&$variables) {
$elements = $variables['book_menus'];
$variables['book_menus'] = array();
foreach (Element::children($elements) as $index) {
$variables['book_menus'][$index] = $elements[$index];
$variables['book_menus'][] = array(
'id' => $index,
'menu' => $elements[$index],
'title' => $elements[$index]['#book_title'],
);
}
}
......
......@@ -136,6 +136,9 @@ public function build() {
$pseudo_tree[0]['link'] = $book;
$book_menus[$book_id] = $this->bookManager->bookTreeOutput($pseudo_tree);
}
$book_menus[$book_id] += array(
'#book_title' => $book['title'],
);
}
if ($book_menus) {
return array(
......
......@@ -8,7 +8,8 @@
*
* Available variables:
* - book_menus: Book outlines.
* - book_id: The parent book ID.
* - id: The parent book ID.
* - title: The parent book title.
* - menu: The top-level book links.
*
* @see template_preprocess_book_all_books_block()
......@@ -16,8 +17,8 @@
* @ingroup themeable
*/
#}
{% for book_id, menu in book_menus %}
<nav id="book-block-menu-{{ book_id }}" class="book-block-menu">
{{ menu }}
{% for book in book_menus %}
<nav id="book-block-menu-{{ book.id }}" class="book-block-menu" role="navigation" aria-label="{% trans %}Book outline for {{ book.title }}{% endtrans %}">
{{ book.menu }}
</nav>
{% endfor %}
......@@ -24,7 +24,6 @@
* - book_url: The book/node URL of the current outline being viewed. Provided
* as an option. Not used by default.
* - book_title: The book/node title of the current outline being viewed.
* Provided as an option. Not used by default.
*
* @see template_preprocess_book_navigation()
*
......@@ -32,10 +31,10 @@
*/
#}
{% if tree or has_links %}
<nav id="book-navigation-{{ book_id }}" class="book-navigation">
<nav id="book-navigation-{{ book_id }}" class="book-navigation" role="navigation" aria-labelledby="book-label-{{ book_id }}">
{{ tree }}
{% if has_links %}
<h2 class="visually-hidden">{{ 'Book Navigation'|t }}</h2>
<h2 class="visually-hidden" id="book-label-{{ book_id }}">{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
<ul class="book-pager">
{% if prev_url %}
<li class="previous">
......
......@@ -10,8 +10,8 @@
*/
#}
{% if breadcrumb %}
<nav class="breadcrumb" role="navigation">
<h2 class="visually-hidden">{{ 'You are here'|t }}</h2>
<nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
<h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
<ol>
{% for item in breadcrumb %}
<li>{{ item }}</li>
......
......@@ -96,7 +96,7 @@
</header>
{% if main_menu or secondary_menu %}
<nav role="navigation">
<nav role="navigation" aria-labelledby="links__system_main_menu">
{{ main_menu }}
{{ secondary_menu }}
</nav>
......
......@@ -80,6 +80,7 @@ function toolbar_element_info() {
'id' => 'toolbar-administration',
'class' => array('toolbar'),
'role' => 'navigation',
'aria-label' => t('Site administration'),
),
// Metadata for the administration bar.
'#bar' => array(
......
......@@ -79,9 +79,9 @@
#}
<div id="page-wrapper"><div id="page">
<header id="header" class="{{ secondary_menu ? 'with-secondary-menu' : 'without-secondary-menu' }}" role="banner"><div class="section clearfix">
<header id="header" class="{{ secondary_menu ? 'with-secondary-menu' : 'without-secondary-menu' }}" role="banner" aria-label="{{ 'Site header'|t}}"><div class="section clearfix">
{% if secondary_menu %}
<nav id="secondary-menu" class="navigation" role="navigation">
<nav id="secondary-menu" class="navigation" role="navigation" aria-labelledby="links__system_secondary_menu">
{{ secondary_menu }}
</nav> <!-- /#secondary-menu -->
{% endif %}
......@@ -120,7 +120,7 @@
{{ page.header }}
{% if main_menu %}
<nav id ="main-menu" class="navigation" role="navigation">
<nav id ="main-menu" class="navigation" role="navigation" aria-labelledby="links__system_main_menu">
<div id="nav"></div>
<div id="no-nav"></div>
<a class="main-menu-reveal" href="#nav">{{ 'Menu'|t }}</a>
......@@ -156,7 +156,7 @@
{% endif %}
{{ title_suffix }}
{% if tabs %}
<nav class="tabs" role="navigation">
<nav class="tabs" role="navigation" aria-label="{{ 'Tabs'|t }}">
{{ tabs }}
</nav>
{% endif %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment