mirror of
https://github.com/moodle/moodle.git
synced 2025-01-19 06:18:28 +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>
108 lines
4.8 KiB
Plaintext
108 lines
4.8 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_children
|
|
|
|
The More menu children
|
|
|
|
Example context (json):
|
|
{
|
|
"divider": "",
|
|
"haschildren": "",
|
|
"moremenuid": "614c104dbacfa",
|
|
"text": "Moodle community",
|
|
"children": "",
|
|
"title": "Moodle community",
|
|
"url": "https://moodle.org"
|
|
}
|
|
}}
|
|
{{#haschildren}}
|
|
<li class="dropdown nav-item" role="none" data-forceintomoremenu="{{#forceintomoremenu}}true{{/forceintomoremenu}}{{^forceintomoremenu}}false{{/forceintomoremenu}}">
|
|
<a class="dropdown-toggle nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}" id="drop-down-{{moremenuid}}" role="menuitem" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false" href="#" aria-controls="drop-down-menu-{{moremenuid}}"
|
|
{{#isactive}}aria-current="true"{{/isactive}}
|
|
{{^isactive}}tabindex="-1"{{/isactive}}
|
|
>
|
|
{{{text}}}
|
|
</a>
|
|
<div class="dropdown-menu" role="menu" id="drop-down-menu-{{moremenuid}}" aria-labelledby="drop-down-{{moremenuid}}">
|
|
{{#children}}
|
|
{{^divider}}
|
|
{{#is_action_link}}
|
|
<a class="dropdown-item" role="menuitem" {{#actionattributes}}{{name}}="{{value}}"{{/actionattributes}} href="{{{url}}}{{{action}}}"
|
|
data-disableactive="true" tabindex="-1"
|
|
>
|
|
{{{text}}}
|
|
</a>
|
|
{{#action_link_actions}}
|
|
{{> core/actions }}
|
|
{{/action_link_actions}}
|
|
{{/is_action_link}}
|
|
{{^is_action_link}}
|
|
<a class="dropdown-item" role="menuitem" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}} tabindex="-1">{{{text}}}</a>
|
|
{{/is_action_link}}
|
|
{{/divider}}
|
|
{{#divider}}
|
|
<div class="dropdown-divider"></div>
|
|
{{/divider}}
|
|
{{/children}}
|
|
</div>
|
|
</li>
|
|
{{/haschildren}}
|
|
{{^haschildren}}
|
|
<li class="nav-item" role="none" data-forceintomoremenu="{{#forceintomoremenu}}true{{/forceintomoremenu}}{{^forceintomoremenu}}false{{/forceintomoremenu}}">
|
|
{{#istablist}}
|
|
{{#is_action_link}}
|
|
<a role="tab" class="nav-link {{#classes}}{{.}} {{/classes}}" href="{{tab}}" data-toggle="tab" data-text="{{{text}}}" data-disableactive="true" tabindex="-1">
|
|
{{{text}}}
|
|
</a>
|
|
{{#action_link_actions}}
|
|
{{> core/actions }}
|
|
{{/action_link_actions}}
|
|
{{/is_action_link}}
|
|
{{^is_action_link}}
|
|
<a role="tab" class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}"
|
|
href="{{tab}}" data-toggle="tab" data-text="{{{text}}}"
|
|
{{#isactive}}aria-selected="true"{{/isactive}}
|
|
{{^isactive}}tabindex="-1"{{/isactive}}
|
|
>
|
|
{{{text}}}
|
|
</a>
|
|
{{/is_action_link}}
|
|
{{/istablist}}
|
|
{{^istablist}}
|
|
{{#is_action_link}}
|
|
<a role="menuitem" class="nav-link {{#classes}}{{.}} {{/classes}}" {{#actionattributes}}{{name}}="{{value}}"{{/actionattributes}} href="{{{url}}}{{{action}}}" data-disableactive="true" tabindex="-1">
|
|
{{{text}}}
|
|
</a>
|
|
{{#action_link_actions}}
|
|
{{> core/actions }}
|
|
{{/action_link_actions}}
|
|
{{/is_action_link}}
|
|
{{^is_action_link}}
|
|
<a role="menuitem" class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}"
|
|
href="{{{url}}}{{{action}}}"
|
|
{{#isactive}}aria-current="true"{{/isactive}}
|
|
{{^isactive}}tabindex="-1"{{/isactive}}
|
|
>
|
|
{{{text}}}
|
|
</a>
|
|
{{/is_action_link}}
|
|
{{/istablist}}
|
|
</li>
|
|
{{/haschildren}}
|