Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Merge branch 'MDL-62144-master' of git://github.com/damyon/moodle
- Loading branch information
Showing
with
243 additions
and 14 deletions.
- +1 −0 lang/en/moodle.php
- +34 −3 lib/outputcomponents.php
- +1 −0 lib/outputrenderers.php
- +1 −1 lib/templates/action_menu_link.mustache
- +1 −1 lib/templates/action_menu_trigger.mustache
- +4 −1 lib/tests/user_menu_test.php
- +1 −0 theme/boost/amd/build/aria.min.js
- +1 −1 theme/boost/amd/build/loader.min.js
- +188 −0 theme/boost/amd/src/aria.js
- +6 −2 theme/boost/amd/src/loader.js
- +1 −1 theme/boost/templates/core/action_menu.mustache
- +3 −3 theme/boost/templates/core/action_menu_trigger.mustache
- +1 −1 theme/boost/templates/core/custom_menu_item.mustache
There are no files selected for viewing
| @@ -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); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| }); |