MDL-73355 navigation: Do not always mark selected dropdown item active

Avoids always marking a selected dropdown item as active. When the
dropdown item has attribute data-disableactive="true" the active
classes will not be applied to this element. This is sometimes requred,
especially in the primary/secondary navigation more dropdown menu when
the dropdown item is an action link which opens a new page. Setting
this item as active will falsely indicate that the user is currently on
this page.
This commit is contained in:
Mihail Geshoski 2022-02-21 01:23:38 +08:00
parent 9cf11cdc67
commit cb802c269d
3 changed files with 6 additions and 2 deletions

View File

@ -1,2 +1,2 @@
define ("core/menu_navigation",["exports","core/key_codes"],function(a,b){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var c={menuitem:"[role=\"menuitem\"]",menu:"[role=\"menu\"]"},d=null,e=function(a,b){if(null!==a){return a}else{return b}},f=function(a){var b;if(a.classList.contains("dropdown-item")){b=a.closest(".dropdown-menu");b.previousElementSibling.classList.add("active")}else{b=a.parentElement.parentElement.querySelector(".dropdown-menu")}Array.prototype.forEach.call(b.children,function(a){var b=a.querySelector(c.menuitem);if(null!==b){b.classList.remove("active");b.setAttribute("aria-current","false")}a.setAttribute("aria-current","false")});a.setAttribute("aria-current","true")},g=function(a){var c=a.srcElement,e=a.currentTarget.firstElementChild,g=l(a.currentTarget);if(c.classList.contains("dropdown-item")){if(a.keyCode===b.arrowRight||a.keyCode===b.arrowLeft){a.preventDefault();if(null!==d){d.parentElement.click()}}if(a.keyCode===b.space||a.keyCode===b.enter){a.preventDefault();f(c);if(!c.parentElement.classList.contains("dropdown")){c.click()}}}else{if(a.keyCode===b.arrowRight){a.preventDefault();i(c,e)}if(a.keyCode===b.arrowLeft){a.preventDefault();j(c,g)}if(a.keyCode===b.arrowUp||a.keyCode===b.arrowDown){d=c;a.preventDefault()}if(a.keyCode===b.home){a.preventDefault();c.setAttribute("aria-current","false");k(e)}if(a.keyCode===b.end){a.preventDefault();c.currentNode.setAttribute("aria-current","false");k(g)}if(a.keyCode===b.space||a.keyCode===b.enter){a.preventDefault();if(!c.parentElement.classList.contains("dropdown")){c.click()}}}},h=function(a){var b=a.srcElement;f(b)};a.default=function(a){a.removeEventListener("keydown",g);a.removeEventListener("click",h);a.addEventListener("keydown",g);a.addEventListener("click",h)};var i=function(a,b){var d=a.parentElement.nextElementSibling,f=e(d,b),g=f.querySelector(c.menuitem);a.setAttribute("aria-current","false");g.setAttribute("aria-current","true");g.focus()},j=function(a,b){var d=a.parentElement.previousElementSibling,f=e(d,b),g=f.querySelector(c.menuitem);a.setAttribute("aria-current","false");g.setAttribute("aria-current","true");g.focus()},k=function(a){a.querySelector(c.menuitem).focus();a.querySelector(c.menuitem).setAttribute("aria-current","true")},l=function(a){var b=a.lastElementChild;if(!b.classList.contains("d-none")){return a.lastElementChild}else{var c=Array.prototype.map.call(a.children,function(a){return a}).reverse(),d=c.filter(function(a){if(!a.classList.contains("d-none")){return a}});if(0!==d.length){return d[0]}else{return a.firstElementChild}}};return a.default});
define ("core/menu_navigation",["exports","core/key_codes"],function(a,b){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var c={menuitem:"[role=\"menuitem\"]",menu:"[role=\"menu\"]"},d=null,e=function(a,b){if(null!==a){return a}else{return b}},f=function(a){var b;if(a.dataset.disableactive){return}if(a.classList.contains("dropdown-item")){b=a.closest(".dropdown-menu");b.previousElementSibling.classList.add("active")}else{b=a.parentElement.parentElement.querySelector(".dropdown-menu")}Array.prototype.forEach.call(b.children,function(a){var b=a.querySelector(c.menuitem);if(null!==b){b.classList.remove("active");b.setAttribute("aria-current","false")}a.setAttribute("aria-current","false")});a.setAttribute("aria-current","true")},g=function(a){var c=a.srcElement,e=a.currentTarget.firstElementChild,g=l(a.currentTarget);if(c.classList.contains("dropdown-item")){if(a.keyCode===b.arrowRight||a.keyCode===b.arrowLeft){a.preventDefault();if(null!==d){d.parentElement.click()}}if(a.keyCode===b.space||a.keyCode===b.enter){a.preventDefault();f(c);if(!c.parentElement.classList.contains("dropdown")){c.click()}}}else{if(a.keyCode===b.arrowRight){a.preventDefault();i(c,e)}if(a.keyCode===b.arrowLeft){a.preventDefault();j(c,g)}if(a.keyCode===b.arrowUp||a.keyCode===b.arrowDown){d=c;a.preventDefault()}if(a.keyCode===b.home){a.preventDefault();c.setAttribute("aria-current","false");k(e)}if(a.keyCode===b.end){a.preventDefault();c.currentNode.setAttribute("aria-current","false");k(g)}if(a.keyCode===b.space||a.keyCode===b.enter){a.preventDefault();if(!c.parentElement.classList.contains("dropdown")){c.click()}}}},h=function(a){var b=a.srcElement;f(b)};a.default=function(a){a.removeEventListener("keydown",g);a.removeEventListener("click",h);a.addEventListener("keydown",g);a.addEventListener("click",h)};var i=function(a,b){var d=a.parentElement.nextElementSibling,f=e(d,b),g=f.querySelector(c.menuitem);a.setAttribute("aria-current","false");g.setAttribute("aria-current","true");g.focus()},j=function(a,b){var d=a.parentElement.previousElementSibling,f=e(d,b),g=f.querySelector(c.menuitem);a.setAttribute("aria-current","false");g.setAttribute("aria-current","true");g.focus()},k=function(a){a.querySelector(c.menuitem).focus();a.querySelector(c.menuitem).setAttribute("aria-current","true")},l=function(a){var b=a.lastElementChild;if(!b.classList.contains("d-none")){return a.lastElementChild}else{var c=Array.prototype.map.call(a.children,function(a){return a}).reverse(),d=c.filter(function(a){if(!a.classList.contains("d-none")){return a}});if(0!==d.length){return d[0]}else{return a.firstElementChild}}};return a.default});
//# sourceMappingURL=menu_navigation.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -54,6 +54,10 @@ const clickErrorHandler = (item, fallback) => {
const menuItemHelper = src => {
let parent;
// Do not apply any actions if the selected dropdown item is explicitly instructing to not display an active state.
if (src.dataset.disableactive) {
return;
}
// Handling for dropdown escapes.
// A bulk of the handling is already done by aria.js just add polish.
if (src.classList.contains('dropdown-item')) {