#540282 by TheRec, mgifford, and Everett Zufelt: Accessibility improvements for the toolbar.

modules/toolbar/toolbar.css

@@ -41,6 +41,7 @@ div#toolbar {
 
 div#toolbar .collapsed {
   display: none;
+  visibility: hidden;
 }
 
 div#toolbar div.shadow {
@@ -84,7 +85,7 @@ div#toolbar div.toolbar-menu #toolbar-menu {
   left: 10px;
 }
 
-div#toolbar div.toolbar-menu span.toggle {
+div#toolbar div.toolbar-menu a.toggle {
   position: absolute;
   right: 10px;
   cursor: pointer;
@@ -95,7 +96,7 @@ div#toolbar div.toolbar-menu span.toggle {
   height: 25px;
 }
 
-div#toolbar div.toolbar-menu span.toggle-active {
+div#toolbar div.toolbar-menu a.toggle-active {
   background-position:  -25px -20px;
 }
 

modules/toolbar/toolbar.js

@@ -7,11 +7,11 @@
 Drupal.behaviors.admin = {
   attach: function(context) {
 
-    // Set the intial state of the toolbar.
+    // Set the initial state of the toolbar.
     $('#toolbar', context).once('toolbar', Drupal.admin.toolbar.init);
 
     // Toggling toolbar drawer.
-    $('#toolbar span.toggle', context).once('toolbar-toggle').click(function() {
+    $('#toolbar a.toggle', context).once('toolbar-toggle').click(function() {
       Drupal.admin.toolbar.toggle();
       return false;
     });
@@ -44,8 +44,12 @@ Drupal.admin.toolbar.init = function() {
  * Collapse the admin toolbar.
  */
 Drupal.admin.toolbar.collapse = function() {
+  var toggle_text = Drupal.t('Open the drawer');
   $('#toolbar div.toolbar-drawer').addClass('collapsed');
-  $('#toolbar span.toggle').removeClass('toggle-active');
+  $('#toolbar a.toggle')
+    .removeClass('toggle-active')
+    .attr('title',  toggle_text)
+    .html(toggle_text);
   $('body').removeClass('toolbar-drawer');
   $.cookie(
     'Drupal.admin.toolbar.collapsed', 
@@ -58,8 +62,12 @@ Drupal.admin.toolbar.collapse = function() {
  * Expand the admin toolbar.
  */
 Drupal.admin.toolbar.expand = function() {
+  var toggle_text = Drupal.t('Close the drawer');
   $('#toolbar div.toolbar-drawer').removeClass('collapsed');
-  $('#toolbar span.toggle').addClass('toggle-active');
+  $('#toolbar a.toggle')
+    .addClass('toggle-active')
+    .attr('title',  toggle_text)
+    .html(toggle_text);
   $('body').addClass('toolbar-drawer');
   $.cookie(
     'Drupal.admin.toolbar.collapsed', 
@@ -72,7 +80,7 @@ Drupal.admin.toolbar.expand = function() {
  * Toggle the admin toolbar.
  */
 Drupal.admin.toolbar.toggle = function() {
-  if ($('#toolbar .toolbar-drawer').is('.collapsed')) {
+  if ($('#toolbar div.toolbar-drawer').hasClass('collapsed')) {
     Drupal.admin.toolbar.expand();
   }
   else {

modules/toolbar/toolbar.module

@@ -27,9 +27,75 @@ function toolbar_theme($existing, $type, $theme, $path) {
     'template' => 'toolbar',
     'path' => drupal_get_path('module', 'toolbar'),
   );
+  $items['toolbar_toggle'] = array(
+    'variables' => array(
+      'collapsed' => NULL,
+      'attributes' => array(),
+    ),
+  );
   return $items;
 }
 
+/**
+ * Implement hook_menu().
+ */
+function toolbar_menu() {
+  $items['toolbar/toggle'] = array(
+    'title' => 'Toggle drawer visibility',
+    'type' => MENU_CALLBACK,
+    'page callback' => 'toolbar_toggle_page',
+    'access arguments' => array('access toolbar'),
+  );
+  return $items;
+}
+
+/**
+ * Menu callback; toggles the visibility of the toolbar drawer.
+ */
+function toolbar_toggle_page() {
+  global $base_path;
+  // Toggle the value in the cookie.
+  setcookie('Drupal.admin.toolbar.collapsed', !_toolbar_is_collapsed(), NULL, $base_path);
+  // Redirect the user from where he used the toggle element.
+  drupal_goto();
+}
+
+/**
+ * Formats an element used to toggle the toolbar drawer's visibility.
+ * 
+ * @param $variables
+ *   An associative array containing:
+ *   - collapsed: A boolean value representing the toolbar drawer's visibility.
+ *   - attributes: An associative array of HTML attributes.
+ * @return
+ *   An HTML string representing the element for toggling.
+ *
+ * @ingroup themable
+ */
+function theme_toolbar_toggle($variables) {
+  if ($variables['collapsed']) {
+    $toggle_text = t('Open the drawer');
+    return '<a href="' . url('toolbar/toggle', array('query' => drupal_get_destination())) . '" title="' . $toggle_text . '"' .  drupal_attributes($variables['attributes']) . '>' . $toggle_text . '</a>';
+  }
+  else {
+    $toggle_text = t('Close the drawer');
+    $variables['attributes']['class'][] = 'toggle-active';
+    return '<a href="' . url('toolbar/toggle', array('query' => drupal_get_destination())) . '" title="' . $toggle_text . '"' .  drupal_attributes($variables['attributes']) . '>' . $toggle_text . '</a>';
+  }
+}
+
+/**
+ * Determines the current state of the toolbar drawer's visibility.
+ * 
+ * @return
+ *   TRUE when drawer is collapsed, FALSE when it is expanded.
+ */
+function _toolbar_is_collapsed() {
+  // PHP converts dots into underscores in cookie names to avoid problems with
+  // its parser, so we use a converted cookie name.
+  return isset($_COOKIE['Drupal_admin_toolbar_collapsed']) ? $_COOKIE['Drupal_admin_toolbar_collapsed'] : 0;
+}
+
 /**
  * Implement hook_page_build().
  *
@@ -61,7 +127,10 @@ function toolbar_pre_render($toolbar) {
  */
 function toolbar_preprocess_html(&$vars) {
   if (user_access('access toolbar')) {
-    $vars['classes_array'][] = 'toolbar toolbar-drawer';
+    $vars['classes_array'][] = 'toolbar';
+    if (!_toolbar_is_collapsed()) {
+      $vars['classes_array'][] = 'toolbar-drawer';
+    }
   }
 }
 
@@ -90,11 +159,13 @@ function toolbar_build() {
   );
 
   // Retrieve the admin menu from the database.
+  $main_menu = menu_load('management');
   $links = toolbar_menu_navigation_links(toolbar_get_menu_tree());
   $build['toolbar_menu'] = array(
     '#theme' => 'links',
     '#links' => $links,
     '#attributes' => array('id' => 'toolbar-menu'),
+    '#heading' => array('text' => $main_menu['title'], 'level' => 'h2', 'class' => 'element-invisible'),
   );
 
   // Add logout & user account links or login link
@@ -124,6 +195,24 @@ function toolbar_build() {
     '#links' => $links,
     '#attributes' => array('id' => 'toolbar-user'),
   );
+
+  // Add an anchor to be able to toggle the visibility of the drawer.
+  $build['toolbar_toggle'] = array(
+    '#theme' => 'toolbar_toggle',
+    '#collapsed' => _toolbar_is_collapsed(),
+    '#attributes' => array('class' => array('toggle')),
+  );
+
+  // Prepare the drawer links CSS classes.
+  $toolbar_drawer_classes = array(
+    'toolbar-drawer',
+    'clearfix',
+  );
+  if(_toolbar_is_collapsed()) {
+    $toolbar_drawer_classes[] = 'collapsed';
+  }
+  $build['toolbar_drawer_classes'] = implode(' ', $toolbar_drawer_classes);
+
   return $build;
 }
 

modules/toolbar/toolbar.tpl.php

@@ -24,14 +24,14 @@
 ?>
 <div id="toolbar" class="<?php print $classes; ?> clearfix">
   <div class="toolbar-menu clearfix">
-    <?php if ($toolbar['toolbar_drawer']):?>
-      <span class="toggle toggle-active"><?php print t('Open'); ?></span>
-    <?php endif; ?>
-    <?php print render($toolbar['toolbar_menu']); ?>
     <?php print render($toolbar['toolbar_user']); ?>
+    <?php print render($toolbar['toolbar_menu']); ?>
+    <?php if ($toolbar['toolbar_drawer']):?>
+      <?php print render($toolbar['toolbar_toggle']); ?>
+    <?php endif; ?>
   </div>
 
-  <div class="toolbar-drawer clearfix">
+  <div class="<?php echo $toolbar['toolbar_drawer_classes']; ?>">
     <?php print render($toolbar['toolbar_drawer']); ?>
   </div>