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.

core/includes/theme.inc

@@ -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,
     );

core/modules/block/block.module

@@ -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'];
+  }
+
 }
 
 /**

core/modules/book/book.module

@@ -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'],
+    );
   }
 }
 

core/modules/book/src/Plugin/Block/BookNavigationBlock.php

@@ -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(

core/modules/book/templates/book-all-books-block.html.twig

@@ -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 %}

core/modules/book/templates/book-navigation.html.twig

@@ -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">

core/modules/system/templates/breadcrumb.html.twig

@@ -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>

core/modules/system/templates/page.html.twig

@@ -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>

core/modules/toolbar/toolbar.module

@@ -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(

core/themes/bartik/templates/page.html.twig

@@ -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 %}