mirror of
https://github.com/moodle/moodle.git
synced 2025-01-18 22:08:20 +01:00
1f21daf8b3
* Allow the more menu to be rendered as a tablist when needed. * Let menu_navigation handle keyboard navigation only when menu items are not rendered as dropdowns. Otherwise, leave the keyboard navigation handling via the default handlers (e.g. dropdown.js/aria.js/tab.js). * When the more menu is rendered as a tablist, use aria-selected for the selected tab. When it's rendered as a menu, use aria-current for the selected menu item. (The menuitem role supports aria-current and not aria-selected) * Make sure that the active tab is tabbable by default. * Submenu items should always have tabindex=-1 * Update behat to use css_element instead of xpath. Also, improved it to consider that it is the active element that should be tabbable. Co-authored-by: Shamim Rezaie <shamim@moodle.com>
72 lines
2.6 KiB
Plaintext
72 lines
2.6 KiB
Plaintext
{{!
|
|
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/>.
|
|
}}
|
|
{{!
|
|
@template core/moremenu
|
|
|
|
The More menu.
|
|
|
|
Example context (json):
|
|
{
|
|
"nodecollection": {
|
|
"children": [
|
|
{
|
|
"text": "Home",
|
|
"action": "/index.php?redirect=0",
|
|
"active": "true"
|
|
},
|
|
{
|
|
"text": "Dashboard",
|
|
"action": "/my"
|
|
},
|
|
{
|
|
"text": "Courses",
|
|
"action": "/course"
|
|
},
|
|
{
|
|
"text": "Site Administration",
|
|
"action": "/admin/search.php"
|
|
}
|
|
]
|
|
},
|
|
"moremenuid": "614c104dbacfa"
|
|
}
|
|
}}
|
|
<nav class="moremenu navigation">
|
|
<ul id="moremenu-{{moremenuid}}-{{navbarstyle}}" role="{{#istablist}}tablist{{/istablist}}{{^istablist}}menubar{{/istablist}}" class="nav more-nav {{navbarstyle}}">
|
|
{{#nodecollection}}
|
|
{{#children}}
|
|
{{> core/moremenu_children}}
|
|
{{/children}}
|
|
{{/nodecollection}}
|
|
{{#nodearray}}
|
|
{{> core/moremenu_children}}
|
|
{{/nodearray}}
|
|
<li role="none" class="nav-item dropdown dropdownmoremenu d-none" data-region="morebutton">
|
|
<a class="dropdown-toggle nav-link {{#isactive}}active{{/isactive}}" href="#" id="moremenu-dropdown-{{moremenuid}}" role="{{#istablist}}tab{{/istablist}}{{^istablist}}menuitem{{/istablist}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="-1">
|
|
{{#str}}moremenu, core{{/str}}
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-left" data-region="moredropdown" aria-labelledby="moremenu-dropdown-{{moremenuid}}" role="menu">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
{{#js}}
|
|
require(['core/moremenu'], function(moremenu) {
|
|
moremenu(document.querySelector('#moremenu-{{moremenuid}}-{{navbarstyle}}'));
|
|
});
|
|
{{/js}}
|