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) { ...@@ -2135,6 +2135,7 @@ function template_preprocess_page(&$variables) {
'#heading' => array( '#heading' => array(
'text' => t('Main menu'), 'text' => t('Main menu'),
'class' => array('visually-hidden'), 'class' => array('visually-hidden'),
'attributes' => array('id' => 'links__system_main_menu'),
), ),
'#set_active_class' => TRUE, '#set_active_class' => TRUE,
); );
...@@ -2146,6 +2147,7 @@ function template_preprocess_page(&$variables) { ...@@ -2146,6 +2147,7 @@ function template_preprocess_page(&$variables) {
'#heading' => array( '#heading' => array(
'text' => t('Secondary menu'), 'text' => t('Secondary menu'),
'class' => array('visually-hidden'), 'class' => array('visually-hidden'),
'attributes' => array('id' => 'links__system_secondary_menu'),
), ),
'#set_active_class' => TRUE, '#set_active_class' => TRUE,
); );
......
...@@ -382,6 +382,13 @@ function template_preprocess_block(&$variables) { ...@@ -382,6 +382,13 @@ function template_preprocess_block(&$variables) {
if ($id = $variables['elements']['#block']->id()) { if ($id = $variables['elements']['#block']->id()) {
$variables['attributes']['id'] = drupal_html_id('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) { ...@@ -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. * Prepares variables for book listing block templates.
* *
...@@ -389,7 +380,11 @@ function template_preprocess_book_all_books_block(&$variables) { ...@@ -389,7 +380,11 @@ function template_preprocess_book_all_books_block(&$variables) {
$elements = $variables['book_menus']; $elements = $variables['book_menus'];
$variables['book_menus'] = array(); $variables['book_menus'] = array();
foreach (Element::children($elements) as $index) { 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() { ...@@ -136,6 +136,9 @@ public function build() {
$pseudo_tree[0]['link'] = $book; $pseudo_tree[0]['link'] = $book;
$book_menus[$book_id] = $this->bookManager->bookTreeOutput($pseudo_tree); $book_menus[$book_id] = $this->bookManager->bookTreeOutput($pseudo_tree);
} }
$book_menus[$book_id] += array(
'#book_title' => $book['title'],
);
} }
if ($book_menus) { if ($book_menus) {
return array( return array(
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
* *
* Available variables: * Available variables:
* - book_menus: Book outlines. * - 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. * - menu: The top-level book links.
* *
* @see template_preprocess_book_all_books_block() * @see template_preprocess_book_all_books_block()
...@@ -16,8 +17,8 @@ ...@@ -16,8 +17,8 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
{% for book_id, menu in book_menus %} {% for book in book_menus %}
<nav id="book-block-menu-{{ book_id }}" class="book-block-menu"> <nav id="book-block-menu-{{ book.id }}" class="book-block-menu" role="navigation" aria-label="{% trans %}Book outline for {{ book.title }}{% endtrans %}">
{{ menu }} {{ book.menu }}
</nav> </nav>
{% endfor %} {% endfor %}
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
* - book_url: The book/node URL of the current outline being viewed. Provided * - book_url: The book/node URL of the current outline being viewed. Provided
* as an option. Not used by default. * as an option. Not used by default.
* - book_title: The book/node title of the current outline being viewed. * - 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() * @see template_preprocess_book_navigation()
* *
...@@ -32,10 +31,10 @@ ...@@ -32,10 +31,10 @@
*/ */
#} #}
{% if tree or has_links %} {% 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 }} {{ tree }}
{% if has_links %} {% 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"> <ul class="book-pager">
{% if prev_url %} {% if prev_url %}
<li class="previous"> <li class="previous">
......
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
*/ */
#} #}
{% if breadcrumb %} {% if breadcrumb %}
<nav class="breadcrumb" role="navigation"> <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
<h2 class="visually-hidden">{{ 'You are here'|t }}</h2> <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
<ol> <ol>
{% for item in breadcrumb %} {% for item in breadcrumb %}
<li>{{ item }}</li> <li>{{ item }}</li>
......
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
</header> </header>
{% if main_menu or secondary_menu %} {% if main_menu or secondary_menu %}
<nav role="navigation"> <nav role="navigation" aria-labelledby="links__system_main_menu">
{{ main_menu }} {{ main_menu }}
{{ secondary_menu }} {{ secondary_menu }}
</nav> </nav>
......
...@@ -80,6 +80,7 @@ function toolbar_element_info() { ...@@ -80,6 +80,7 @@ function toolbar_element_info() {
'id' => 'toolbar-administration', 'id' => 'toolbar-administration',
'class' => array('toolbar'), 'class' => array('toolbar'),
'role' => 'navigation', 'role' => 'navigation',
'aria-label' => t('Site administration'),
), ),
// Metadata for the administration bar. // Metadata for the administration bar.
'#bar' => array( '#bar' => array(
......
...@@ -79,9 +79,9 @@ ...@@ -79,9 +79,9 @@
#} #}
<div id="page-wrapper"><div id="page"> <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 %} {% 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 }} {{ secondary_menu }}
</nav> <!-- /#secondary-menu --> </nav> <!-- /#secondary-menu -->
{% endif %} {% endif %}
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
{{ page.header }} {{ page.header }}
{% if main_menu %} {% 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="nav"></div>
<div id="no-nav"></div> <div id="no-nav"></div>
<a class="main-menu-reveal" href="#nav">{{ 'Menu'|t }}</a> <a class="main-menu-reveal" href="#nav">{{ 'Menu'|t }}</a>
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
{% endif %} {% endif %}
{{ title_suffix }} {{ title_suffix }}
{% if tabs %} {% if tabs %}
<nav class="tabs" role="navigation"> <nav class="tabs" role="navigation" aria-label="{{ 'Tabs'|t }}">
{{ tabs }} {{ tabs }}
</nav> </nav>
{% endif %} {% 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