MDL-72032 core: Fix aria roles moremenu

- Part of: MDL-69588
This commit is contained in:
Bas Brands 2021-07-08 15:38:45 +02:00 committed by Mathew May
parent dfefc86393
commit eed2498215
7 changed files with 15 additions and 16 deletions

View File

@ -91,7 +91,7 @@ if ($hassiteconfig) {
if ($showsettingslinks) {
$node = $PAGE->settingsnav->find('root', navigation_node::TYPE_SITE_ADMIN);
if ($node) {
$secondarynavigation = $OUTPUT->more_menu($PAGE->secondarynav, 'nav-tabs');
$secondarynavigation = $OUTPUT->more_menu($PAGE->secondarynav, 'nav-tabs', true);
echo $OUTPUT->render_from_template('core/settings_link_page',
['node' => $node, 'secondarynavigation' => $secondarynavigation]);
}

View File

@ -1,2 +1,2 @@
define ("core/moremenu",["exports","jquery"],function(a,b){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=function(a){return a&&a.__esModule?a:{default:a}}(b);var c={regions:{moredropdown:"[data-region=\"moredropdown\"]",morebutton:"[data-region=\"morebutton\"]"},classes:{dropdownitem:"dropdown-item",dropdownmoremenu:"dropdownmoremenu",dropdowntoggle:"dropdown-toggle",hidden:"d-none",active:"active",nav:"nav",navlink:"nav-link",observed:"observed"},attributes:{menu:"[role=\"menu\"]"}},d=function(a){var b=a.parentNode.offsetHeight+1,g=a.querySelector(c.regions.moredropdown),h=a.querySelector(c.regions.morebutton);if(a.offsetHeight>b){h.classList.remove(c.classes.hidden);var i=Array.from(a.children).reverse();i.forEach(function(d){if(!d.classList.contains(c.classes.dropdownmoremenu)){if(a.offsetHeight>b){var f=a.removeChild(d);e(a,f,!0)}}})}else{if("children"in g){var j=Array.from(g.children);j.forEach(function(c){if(a.offsetHeight<b&&"true"!==c.dataset.forceintomoremenu){var d=g.removeChild(c);f(a,d)}});if(0===j.length){h.classList.add(c.classes.hidden)}}if(a.offsetHeight>b){d(a)}}a.parentNode.classList.add(c.classes.observed)},e=function(a,b){var d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:!1,e=a.querySelector(c.regions.moredropdown),f=a.querySelector("."+c.classes.dropdowntoggle),g=b.querySelector("."+c.classes.navlink);if(g&&!g.hasAttribute("role")){g.setAttribute("role","menuitem")}if(g.classList.contains(c.classes.active)){f.classList.add(c.classes.active)}g.classList.remove(c.classes.navlink);g.classList.add(c.classes.dropdownitem);if(d){e.prepend(b)}else{e.append(b)}},f=function(a,b){var d=a.querySelector(c.regions.morebutton),e=a.querySelector("."+c.classes.dropdowntoggle),f=b.querySelector("."+c.classes.dropdownitem);if(f){var g=f.getAttribute("role");if("menuitem"===g){f.removeAttribute("role")}}if(f.classList.contains(c.classes.active)){e.classList.remove(c.classes.active)}f.classList.remove(c.classes.dropdownitem);f.classList.add(c.classes.navlink);a.insertBefore(b,d)},g=function(a){if("children"in a){var f=a.querySelector(c.regions.morebutton),g=Array.from(a.children);g.forEach(function(b){if(!b.classList.contains(c.classes.dropdownmoremenu)&&"true"===b.dataset.forceintomoremenu){e(a,b,!1);if(f.classList.contains(c.classes.hidden)){f.classList.remove(c.classes.hidden)}}})}d(a);window.addEventListener("resize",function(){d(a)});var h=function(a){var b=a.target.parentNode.querySelector(c.attributes.menu);if(b){b.classList.toggle("show")}a.stopPropagation()};(0,b.default)("."+c.classes.dropdownmoremenu).on("show.bs.dropdown",function(){var b=a.querySelector(c.regions.moredropdown);b.querySelectorAll(".dropdown").forEach(function(a){a.removeEventListener("click",h,!0);a.addEventListener("click",h,!0)})})};a.default=g;return a.default});
define ("core/moremenu",["exports","jquery"],function(a,b){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=function(a){return a&&a.__esModule?a:{default:a}}(b);var c={regions:{moredropdown:"[data-region=\"moredropdown\"]",morebutton:"[data-region=\"morebutton\"]"},classes:{dropdownitem:"dropdown-item",dropdownmoremenu:"dropdownmoremenu",dropdowntoggle:"dropdown-toggle",hidden:"d-none",active:"active",nav:"nav",navlink:"nav-link",observed:"observed"},attributes:{menu:"[role=\"menu\"]"}},d=function(a){var b=a.parentNode.offsetHeight+1,g=a.querySelector(c.regions.moredropdown),h=a.querySelector(c.regions.morebutton);if(a.offsetHeight>b){h.classList.remove(c.classes.hidden);var i=Array.from(a.children).reverse();i.forEach(function(d){if(!d.classList.contains(c.classes.dropdownmoremenu)){if(a.offsetHeight>b){var f=a.removeChild(d);e(a,f,!0)}}})}else{if("children"in g){var j=Array.from(g.children);j.forEach(function(c){if(a.offsetHeight<b&&"true"!==c.dataset.forceintomoremenu){var d=g.removeChild(c);f(a,d)}});if(0===j.length){h.classList.add(c.classes.hidden)}}if(a.offsetHeight>b){d(a)}}a.parentNode.classList.add(c.classes.observed)},e=function(a,b){var d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:!1,e=a.querySelector(c.regions.moredropdown),f=a.querySelector("."+c.classes.dropdowntoggle),g=b.querySelector("."+c.classes.navlink);b.setAttribute("prev-role",b.getAttribute("role"));b.setAttribute("role","menuitem");if(g.classList.contains(c.classes.active)){f.classList.add(c.classes.active)}g.classList.remove(c.classes.navlink);g.classList.add(c.classes.dropdownitem);if(d){e.prepend(b)}else{e.append(b)}},f=function(a,b){var d=a.querySelector(c.regions.morebutton),e=a.querySelector("."+c.classes.dropdowntoggle),f=b.querySelector("."+c.classes.dropdownitem);b.setAttribute("role",b.getAttribute("prev-role"));if(f){var g=f.getAttribute("role");if("menuitem"===g){f.removeAttribute("role")}}if(f.classList.contains(c.classes.active)){e.classList.remove(c.classes.active)}f.classList.remove(c.classes.dropdownitem);f.classList.add(c.classes.navlink);a.insertBefore(b,d)},g=function(a){if("children"in a){var f=a.querySelector(c.regions.morebutton),g=Array.from(a.children);g.forEach(function(b){if(!b.classList.contains(c.classes.dropdownmoremenu)&&"true"===b.dataset.forceintomoremenu){e(a,b,!1);if(f.classList.contains(c.classes.hidden)){f.classList.remove(c.classes.hidden)}}})}d(a);window.addEventListener("resize",function(){d(a)});var h=function(a){var b=a.target.parentNode.querySelector(c.attributes.menu);if(b){b.classList.toggle("show")}a.stopPropagation()};(0,b.default)("."+c.classes.dropdownmoremenu).on("show.bs.dropdown",function(){var b=a.querySelector(c.regions.moredropdown);b.querySelectorAll(".dropdown").forEach(function(a){a.removeEventListener("click",h,!0);a.addEventListener("click",h,!0)})})};a.default=g;return a.default});
//# sourceMappingURL=moremenu.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -119,11 +119,8 @@ const moveIntoMoreDropdown = (menu, navNode, prepend = false) => {
const dropdownToggle = menu.querySelector('.' + Selectors.classes.dropdowntoggle);
const navLink = navNode.querySelector('.' + Selectors.classes.navlink);
if (navLink && !navLink.hasAttribute('role')) {
// Adding the menuitem role so the dropdown includes the
// accessibility improvements from theme/boost/amd/src/aria.js
navLink.setAttribute('role', 'menuitem');
}
navNode.setAttribute('prev-role', navNode.getAttribute('role'));
navNode.setAttribute('role', 'menuitem');
// If there are navLinks that contain an active link in the moreDropdown
// make the dropdownToggle in the moreButton active.
@ -155,6 +152,7 @@ const moveOutOfMoreDropdown = (menu, navNode) => {
const dropdownToggle = menu.querySelector('.' + Selectors.classes.dropdowntoggle);
const navLink = navNode.querySelector('.' + Selectors.classes.dropdownitem);
navNode.setAttribute('role', navNode.getAttribute('prev-role'));
if (navLink) {
const currentAttribute = navLink.getAttribute('role');
if (currentAttribute === 'menuitem') {

View File

@ -3813,9 +3813,10 @@ EOD;
*
* @param array $content
* @param string $navbarstyle navbar-nav or nav-tabs
* @param boolean $hastabs
* @return string
*/
public function more_menu($content, $navbarstyle) {
public function more_menu($content, $navbarstyle, $hastabs = false) {
$tabs = ($navbarstyle == 'nav-tabs');
if (is_object($content)) {
if (!isset($content->children) || count($content->children) == 0) {
@ -3824,13 +3825,13 @@ EOD;
return $this->render_from_template('core/moremenu', (object) [
'nodecollection' => $content,
'navbarstyle' => $navbarstyle,
'tabs' => $tabs
'tabs' => $hastabs
]);
} else {
return $this->render_from_template('core/moremenu', (object) [
'nodearray' => $content,
'navbarstyle' => $navbarstyle,
'tabs' => $tabs
'tabs' => $hastabs
]);
}
}

View File

@ -45,7 +45,7 @@
}
}}
<nav class="moremenu">
<ul id="moremenu-{{ uniqid }}" {{#tabs}}role="tablist"{{/tabs}} {{^tabs}}role="menu"{{/tabs}}class="nav more-nav {{navbarstyle}}">
<ul id="moremenu-{{ uniqid }}" {{#tabs}}role="tablist" {{/tabs}}{{^tabs}}role="menu" {{/tabs}}class="nav more-nav {{navbarstyle}}">
{{#nodecollection}}
{{#children}}
{{> core/moremenu_children}}
@ -54,7 +54,7 @@
{{#nodearray}}
{{> core/moremenu_children}}
{{/nodearray}}
<li class="nav-item dropdown dropdownmoremenu d-none" data-region="morebutton" role="menuitem">
<li class="nav-item dropdown dropdownmoremenu d-none" data-region="morebutton">
<a class="dropdown-toggle nav-link" href="#" id="moremenu-dropdown{{ uniqid }}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#str}}moremenu, core{{/str}}
</a>

View File

@ -48,13 +48,13 @@
</li>
{{/haschildren}}
{{^haschildren}}
<li class="nav-item" role="menuitem" data-forceintomoremenu="{{#forceintomoremenu}}true{{/forceintomoremenu}}{{^forceintomoremenu}}false{{/forceintomoremenu}}">
<li class="nav-item" role="{{#tab}}tab{{/tab}}{{^tab}}menuitem{{/tab}}" data-forceintomoremenu="{{#forceintomoremenu}}true{{/forceintomoremenu}}{{^forceintomoremenu}}false{{/forceintomoremenu}}">
{{#tab}}
<a class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}" href="{{tab}}" role="tab" data-toggle="tab" aria-selected="false" tabindex="-1">{{{text}}}
<a class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}" href="{{tab}}" data-toggle="tab" aria-selected="false" tabindex="-1">{{{text}}}
</a>
{{/tab}}
{{^tab}}
<a class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}" href="{{{url}}}{{{action}}}" role="menuitem" {{#isactive}}aria-current="true"{{/isactive}}>
<a class="nav-link {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}" href="{{{url}}}{{{action}}}" {{#isactive}}aria-current="true"{{/isactive}}>
{{{text}}}
</a>
{{/tab}}