Merge branch 'MDL-62144-master' of git://github.com/damyon/moodle

David Monllao · David Monllao · commit 7e5f0fa66a40 · 2018-10-22T16:33:17.000+02:00
diff --git a/lang/en/moodle.php b/lang/en/moodle.php
@@ -26,6 +26,7 @@
 $string['action'] = 'Action';
 $string['actionchoice'] = 'What do you want to do with the file \'{$a}\'?';
 $string['actions'] = 'Actions';
+$string['actionsmenu'] = 'Actions menu';
 $string['active'] = 'Active';
 $string['activeusers'] = 'Active users';
 $string['activities'] = 'Activities';
diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php
@@ -4133,6 +4133,12 @@ class action_menu implements renderable, templatable {
      */
     public $actiontext = null;
 
+    /**
+     * The string to use for the accessible label for the menu.
+     * @var array
+     */
+    public $actionlabel = null;
+
     /**
      * An icon to use for the toggling the secondary menu (dropdown).
      * @var actionicon
@@ -4190,6 +4196,16 @@ public function __construct(array $actions = array()) {
         }
     }
 
+    /**
+     * Sets the label for the menu trigger.
+     *
+     * @param string $label The text
+     * @return null
+     */
+    public function set_action_label($label) {
+        $this->actionlabel = $label;
+    }
+
     /**
      * Sets the menu trigger text.
      *
@@ -4293,7 +4309,7 @@ public function get_primary_actions(core_renderer $output = null) {
             $pixicon = '<b class="caret"></b>';
             $linkclasses[] = 'textmenu';
         } else {
-            $title = new lang_string('actions', 'moodle');
+            $title = new lang_string('actionsmenu', 'moodle');
             $this->actionicon = new pix_icon(
                 't/edit_menu',
                 '',
@@ -4312,10 +4328,17 @@ public function get_primary_actions(core_renderer $output = null) {
         if ($this->actiontext) {
             $string = $this->actiontext;
         }
+        $label = '';
+        if ($this->actionlabel) {
+            $label = $this->actionlabel;
+        } else {
+            $label = $title;
+        }
         $actions = $this->primaryactions;
         $attributes = array(
             'class' => implode(' ', $linkclasses),
             'title' => $title,
+            'aria-label' => $label,
             'id' => 'action-menu-toggle-'.$this->instance,
             'role' => 'menuitem'
         );
@@ -4481,9 +4504,17 @@ public function export_for_template(renderer_base $output) {
         if (!empty($this->menutrigger)) {
             $primary->menutrigger = $this->menutrigger;
             $primary->triggerextraclasses = $this->triggerextraclasses;
+            if ($this->actionlabel) {
+                $primary->title = $this->actionlabel;
+            } else if ($this->actiontext) {
+                $primary->title = $this->actiontext;
+            } else {
+                $primary->title = strip_tags($this->menutrigger);
+            }
         } else {
-            $primary->title = get_string('actions');
-            $actionicon = new pix_icon('t/edit_menu', '', 'moodle', ['class' => 'iconsmall actionmenu', 'title' => '']);
+            $primary->title = get_string('actionsmenu');
+            $iconattributes = ['class' => 'iconsmall actionmenu', 'title' => $primary->title];
+            $actionicon = new pix_icon('t/edit_menu', '', 'moodle', $iconattributes);
         }
 
         if ($actionicon instanceof pix_icon) {
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
@@ -3405,6 +3405,7 @@ public function user_menu($user = null, $withlinks = null) {
         $am->set_menu_trigger(
             $returnstr
         );
+        $am->set_action_label(get_string('usermenu'));
         $am->set_alignment(action_menu::TR, action_menu::BR);
         $am->set_nowrap_on_items();
         if ($withlinks) {
diff --git a/lib/templates/action_menu_link.mustache b/lib/templates/action_menu_link.mustache
@@ -32,5 +32,5 @@
     <a href="{{url}}" class="{{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}} {{/attributes}}{{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{#showtext}}<span class="menu-action-text" id="actionmenuaction-{{instance}}">{{{text}}}</span>{{/showtext}}</a>
 {{/disabled}}
 {{#disabled}}
-    <span class="currentlink" role="menuitem">{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{{text}}}</span>
+    <span class="currentlink" role="button">{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{{text}}}</span>
 {{/disabled}}
diff --git a/lib/templates/action_menu_trigger.mustache b/lib/templates/action_menu_trigger.mustache
@@ -27,4 +27,4 @@
         "triggerextraclasses": ""
     }
 }}
-<a href="#" class="{{triggerextraclasses}} toggle-display {{#menutrigger}}textmenu{{/menutrigger}}" id="action-menu-toggle-{{instance}}" title="{{title}}" role="menuitem">{{{actiontext}}}{{{menutrigger}}}{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{#rawicon}}{{{.}}}{{/rawicon}}{{#menutrigger}}<b class="caret"></b>{{/menutrigger}}</a>
+<a tabindex="0" class="{{triggerextraclasses}} toggle-display {{#menutrigger}}textmenu{{/menutrigger}}" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" role="menuitem" aria-controls="action-menu-{{instance}}-menu">{{{actiontext}}}{{{menutrigger}}}{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{#rawicon}}{{{.}}}{{/rawicon}}{{#menutrigger}}<b class="caret"></b>{{/menutrigger}}</a>
diff --git a/lib/tests/user_menu_test.php b/lib/tests/user_menu_test.php
@@ -86,6 +86,8 @@ public function test_custom_user_menu($data, $entrycount, $dividercount) {
         $this->setAdminUser();
         $PAGE->set_url('/');
         $CFG->theme = 'clean';
+        $PAGE->reset_theme_and_output();
+        $PAGE->initialise_theme_and_output();
 
         // Set the configuration.
         set_config('customusermenuitems', $data);
@@ -94,7 +96,8 @@ public function test_custom_user_menu($data, $entrycount, $dividercount) {
         $dividercount += 2;
 
         // The basic entry count will additionally include the wrapper menu, Dashboard, Profile, Logout and switch roles link.
-        $entrycount += 4;
+        // On clean theme only, the trigger is also a menuitem.
+        $entrycount += 5;
 
         $output = $OUTPUT->user_menu($USER);
         preg_match_all('/<a [^>]+role="menuitem"[^>]+>/', $output, $results);
diff --git a/theme/boost/amd/build/aria.min.js b/theme/boost/amd/build/aria.min.js
diff --git a/theme/boost/amd/build/loader.min.js b/theme/boost/amd/build/loader.min.js
diff --git a/theme/boost/amd/src/aria.js b/theme/boost/amd/src/aria.js
@@ -0,0 +1,188 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Enhancements to Bootstrap components for accessibility.
+ *
+ * @module     theme_boost/aria
+ * @copyright  2018 Damyon Wiese <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery'], function($) {
+    return {
+        init: function() {
+            // Drop downs from bootstrap don't support keyboard accessibility by default.
+            var focusEnd = false,
+                setFocusEnd = function() {
+                    focusEnd = true;
+                },
+                getFocusEnd = function() {
+                    var result = focusEnd;
+                    focusEnd = false;
+                    return result;
+                };
+
+            // Special handling for "up" keyboard control.
+            $('[data-toggle="dropdown"]').keydown(function(e) {
+                var trigger = e.which || e.keyCode,
+                    expanded;
+
+                // Up key opens the menu at the end.
+                if (trigger == 38) {
+                    // Focus the end of the menu, not the beginning.
+                    setFocusEnd();
+                }
+
+                // Escape key only closes the menu, it doesn't open it.
+                if (trigger == 27) {
+                    expanded = $(e.target).attr('aria-expanded');
+                    e.preventDefault();
+                    if (expanded == "false") {
+                        $(e.target).click();
+                    }
+                }
+
+                // Space key or Enter key opens the menu.
+                if (trigger == 32 || trigger == 13) {
+                    // Cancel random scroll.
+                    e.preventDefault();
+                    // Open the menu instead.
+                    $(e.target).click();
+                }
+            });
+
+            // Special handling for navigation keys when menu is open.
+            var shiftFocus = function(element) {
+                var delayedFocus = function() {
+                    $(this).focus();
+                }.bind(element);
+                setTimeout(delayedFocus, 50);
+            };
+
+            $('.dropdown').on('shown.bs.dropdown', function(e) {
+                // We need to focus on the first menuitem.
+                var menu = $(e.target).find('[role="menu"]'),
+                    menuItems = false,
+                    foundMenuItem = false;
+
+                if (menu) {
+                    menuItems = $(menu).find('[role="menuitem"]');
+                }
+                if (menuItems && menuItems.length > 0) {
+                    if (getFocusEnd()) {
+                        foundMenuItem = menuItems[menuItems.length - 1];
+                    } else {
+                        // The first menu entry, pretty reasonable.
+                        foundMenuItem = menuItems[0];
+                    }
+                }
+                if (foundMenuItem) {
+                    shiftFocus(foundMenuItem);
+                }
+            });
+            // Search for menu items by finding the first item that has
+            // text starting with the typed character (case insensitive).
+            $('.dropdown [role="menu"] [role="menuitem"]').keypress(function(e) {
+                var trigger = String.fromCharCode(e.which || e.keyCode),
+                    menu = $(e.target).closest('[role="menu"]'),
+                    i = 0,
+                    menuItems = false,
+                    item,
+                    itemText;
+
+                if (!menu) {
+                    return;
+                }
+                menuItems = $(menu).find('[role="menuitem"]');
+                if (!menuItems) {
+                    return;
+                }
+
+                trigger = trigger.toLowerCase();
+                for (i = 0; i < menuItems.length; i++) {
+                    item = $(menuItems[i]);
+                    itemText = item.text().trim().toLowerCase();
+                    if (itemText.indexOf(trigger) == 0) {
+                        shiftFocus(item);
+                        break;
+                    }
+                }
+            });
+
+            // Keyboard navigation for arrow keys, home and end keys.
+            $('.dropdown [role="menu"] [role="menuitem"]').keydown(function(e) {
+                var trigger = e.which || e.keyCode,
+                    next = false,
+                    menu = $(e.target).closest('[role="menu"]'),
+                    i = 0,
+                    menuItems = false;
+                if (!menu) {
+                    return;
+                }
+                menuItems = $(menu).find('[role="menuitem"]');
+                if (!menuItems) {
+                    return;
+                }
+                // Down key.
+                if (trigger == 40) {
+                    for (i = 0; i < menuItems.length - 1; i++) {
+                        if (menuItems[i] == e.target) {
+                            next = menuItems[i + 1];
+                            break;
+                        }
+                    }
+                    if (!next) {
+                        // Wrap to first item.
+                        next = menuItems[0];
+                    }
+
+                } else if (trigger == 38) {
+                    // Up key.
+                    for (i = 1; i < menuItems.length; i++) {
+                        if (menuItems[i] == e.target) {
+                            next = menuItems[i - 1];
+                            break;
+                        }
+                    }
+                    if (!next) {
+                        // Wrap to last item.
+                        next = menuItems[menuItems.length - 1];
+                    }
+
+                } else if (trigger == 36) {
+                    // Home key.
+                    next = menuItems[0];
+
+                } else if (trigger == 35) {
+                    // End key.
+                    next = menuItems[menuItems.length - 1];
+                }
+                // Variable next is set if we do want to act on the keypress.
+                if (next) {
+                    e.preventDefault();
+                    shiftFocus(next);
+                }
+                return;
+            });
+            $('.dropdown').on('hidden.bs.dropdown', function(e) {
+                // We need to focus on the menu trigger.
+                var trigger = $(e.target).find('[data-toggle="dropdown"]');
+                if (trigger) {
+                    shiftFocus(trigger);
+                }
+            });
+        }
+    };
+});
diff --git a/theme/boost/amd/src/loader.js b/theme/boost/amd/src/loader.js
@@ -28,7 +28,8 @@ define(['jquery', './tether', 'core/event'], function(jQuery, Tether, Event) {
     window.jQuery = jQuery;
     window.Tether = Tether;
 
-    require(['theme_boost/util',
+    require(['theme_boost/aria',
+            'theme_boost/util',
             'theme_boost/alert',
             'theme_boost/button',
             'theme_boost/carousel',
@@ -39,7 +40,7 @@ define(['jquery', './tether', 'core/event'], function(jQuery, Tether, Event) {
             'theme_boost/tab',
             'theme_boost/tooltip',
             'theme_boost/popover'],
-            function() {
+            function(Aria) {
 
         // We do twice because: https://github.com/twbs/bootstrap/issues/10547
         jQuery('body').popover({
@@ -63,8 +64,11 @@ define(['jquery', './tether', 'core/event'], function(jQuery, Tether, Event) {
                     selector: '[data-toggle="popover"]',
                     trigger: 'focus'
                 });
+
             });
         });
+
+        Aria.init();
     });
 
 
diff --git a/theme/boost/templates/core/action_menu.mustache b/theme/boost/templates/core/action_menu.mustache
@@ -52,4 +52,4 @@
         </div>
 
     {{/primary}}
-</div>
+</div>
diff --git a/theme/boost/templates/core/action_menu_trigger.mustache b/theme/boost/templates/core/action_menu_trigger.mustache
@@ -78,7 +78,7 @@
     }
 }}
 <div class="dropdown">
-    <a href="#" class="{{triggerextraclasses}} dropdown-toggle" id="dropdown-{{instance}}" title="{{title}}" role="menuitem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <a href="#" tabindex="0" class="btn {{triggerextraclasses}} dropdown-toggle" id="dropdown-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
         {{{actiontext}}}
         {{{menutrigger}}}
             {{#icon}}
@@ -92,7 +92,7 @@
         {{/menutrigger}}
     </a>
     {{#secondary}}
-        <div class="dropdown-menu dropdown-menu-right {{classes}}"{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
+        <div class="dropdown-menu dropdown-menu-right {{classes}}"{{#attributes}} {{name}}="{{value}}"{{/attributes}} id="dropdown-menu-{{instance}}">
             {{#items}}
                 {{#actionmenulink}}
                     <a href="{{url}}" class="dropdown-item {{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}} {{/attributes}}{{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>
@@ -107,7 +107,7 @@
                     </a>
                 {{/actionmenulink}}
                 {{#actionmenufiller}}
-                    <div class="dropdown-divider"></div>
+                    <div class="dropdown-divider" role="presentation"><span class="filler">&nbsp;</span></div>
                 {{/actionmenufiller}}
                 {{^actionmenulink}}
                     {{^actionmenufiller}}
diff --git a/theme/boost/templates/core/custom_menu_item.mustache b/theme/boost/templates/core/custom_menu_item.mustache
@@ -10,7 +10,7 @@
                 <a class="dropdown-item" href="{{{url}}}" {{#title}}title="{{{title}}}"{{/title}}>{{{text}}}</a>
             {{/divider}}
             {{#divider}}
-                <div class="dropdown-divider"></div>
+                <div class="dropdown-divider" role="presentation"></div>
             {{/divider}}
         {{/children}}
     </div>

Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,4 @@`
`27`	`27`	`"triggerextraclasses": ""`
`28`	`28`	`}`
`29`	`29`	`}}`
`30`		`-<a href="#" class="{{triggerextraclasses}} toggle-display {{#menutrigger}}textmenu{{/menutrigger}}" id="action-menu-toggle-{{instance}}" title="{{title}}" role="menuitem">{{{actiontext}}}{{{menutrigger}}}{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{#rawicon}}{{{.}}}{{/rawicon}}{{#menutrigger}}<b class="caret"></b>{{/menutrigger}}</a>`
	`30`	`+<a tabindex="0" class="{{triggerextraclasses}} toggle-display {{#menutrigger}}textmenu{{/menutrigger}}" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" role="menuitem" aria-controls="action-menu-{{instance}}-menu">{{{actiontext}}}{{{menutrigger}}}{{#icon}}{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}{{/icon}}{{#rawicon}}{{{.}}}{{/rawicon}}{{#menutrigger}}<b class="caret"></b>{{/menutrigger}}</a>`