diff --git a/assets/js/theme/design-system/Popup.js b/assets/js/theme/design-system/Popup.js index 6e65e14327bc4e2676ede3a8c015b7a27df0afb6..b37217f0628f42a70386e887766db1727b6abddb 100644 --- a/assets/js/theme/design-system/Popup.js +++ b/assets/js/theme/design-system/Popup.js @@ -1,3 +1,4 @@ +import { inertBodyChildren } from '../utils/a11y'; import { focusTrap } from '../utils/focus-trap'; var CLASSES = { @@ -76,14 +77,7 @@ window.osuny.Popup.prototype = { }, updateDocumentAccessibility: function () { - var bodyChildren = document.body.children, - action = this.state.opened ? 'setAttribute' : 'removeAttribute'; - - Array.prototype.forEach.call(bodyChildren, function (element) { - if (this.element !== element) { - element[action]('inert', ''); - } - }.bind(this)); + inertBodyChildren(this.element, this.state.opened); }, isOpen: function () { diff --git a/assets/js/theme/design-system/mainMenu.js b/assets/js/theme/design-system/mainMenu.js index 0d01dbe6dc7a13d69e792b3790c8ffb6eda541cb..9db85c44f72bc6b22a97656a3e7894ab179593e6 100644 --- a/assets/js/theme/design-system/mainMenu.js +++ b/assets/js/theme/design-system/mainMenu.js @@ -1,6 +1,6 @@ import { focusTrap } from '../utils/focus-trap'; import { isMobile } from '../utils/breakpoints'; -import { a11yClick } from '../utils/a11y'; +import { a11yClick, inertBodyChildren } from '../utils/a11y'; const CLASSES = { mainMenuOpened: 'is-opened', @@ -115,6 +115,10 @@ class MainMenu { // Update global overlay this.updateOverlay(); + + if (this.state.isMobile) { + inertBodyChildren(this.element, open); + } } toggleDropdown (clickedButton) { diff --git a/assets/js/theme/design-system/search.js b/assets/js/theme/design-system/search.js index cc3b8d9b21c6cfd91a7328dcd5fc44696e3a7465..07d410f18fbf0615749b172d30629d4564001d42 100644 --- a/assets/js/theme/design-system/search.js +++ b/assets/js/theme/design-system/search.js @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { a11yClick } from '../utils/a11y'; +import { a11yClick, inertBodyChildren } from '../utils/a11y'; import { isMobile } from '../utils/breakpoints'; import { focusTrap } from '../utils/focus-trap'; @@ -151,28 +151,10 @@ class Search { if (open) { this.input = this.element.querySelector('input'); this.input.focus(); - - this.inertElements = []; - const allElements = document.querySelectorAll('body *'); - - allElements.forEach(el => { - if (el === this.element || this.element.contains(el) || el.contains(this.element)) { - return; - } - - el.setAttribute('inert', ''); - this.inertElements.push(el); - }); } else { document.body.style.overflow = 'unset'; - - if (this.inertElements) { - this.inertElements.forEach(el => { - el.removeAttribute('inert'); - }); - this.inertElements = null; - } } + inertBodyChildren(this.element, open); } } diff --git a/assets/js/theme/utils/a11y.js b/assets/js/theme/utils/a11y.js index 6c4fd7b303ea161b73419fd8d9433ee3ccc31e72..e151045b20600acf846d5a37ae7ed97a5fe0cb52 100644 --- a/assets/js/theme/utils/a11y.js +++ b/assets/js/theme/utils/a11y.js @@ -4,7 +4,8 @@ var actionKeys = [ ], a11yClick, setButtonEnability, - setAriaVisibility; + setAriaVisibility, + inertBodyChildren; a11yClick = function (element, action) { element.addEventListener('click', action); @@ -33,8 +34,20 @@ setAriaVisibility = function (element, enable, isChild) { } }; +inertBodyChildren = function (element, inert) { + var bodyChildren = document.body.children, + action = inert ? 'setAttribute' : 'removeAttribute'; + + Array.prototype.forEach.call(bodyChildren, function (child) { + if (element !== child && !child.contains(element)) { + child[action]('inert', ''); + } + }.bind(this)); +}; + export { a11yClick, setButtonEnability, - setAriaVisibility + setAriaVisibility, + inertBodyChildren }; diff --git a/assets/js/theme/utils/utils.js b/assets/js/theme/utils/utils.js index c8757679bf1d74d93f788e155170d8dcd2ad88a7..81199f53680d6ec5a6ea8955e70d2a53f1ed773d 100644 --- a/assets/js/theme/utils/utils.js +++ b/assets/js/theme/utils/utils.js @@ -42,4 +42,4 @@ window.osuny.utils.getTime = function () { window.osuny.utils.isDefine = function (variable) { return typeof variable !== 'undefined'; -}; \ No newline at end of file +};