From 8fd8452a866742b263bb6c0b4985f2f5a8fc1ec5 Mon Sep 17 00:00:00 2001
From: Alexis BENOIT <alex@noesya.coop>
Date: Tue, 26 Nov 2024 15:39:00 +0100
Subject: [PATCH] =?UTF-8?q?[a11y]=20Ajout=20de=20l'attribut=20`inert`=20su?=
=?UTF-8?q?r=20les=20=C3=A9l=C3=A9ments=20inactifs=20(#774)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/js/theme/design-system/Popup.js | 10 ++--------
assets/js/theme/design-system/mainMenu.js | 6 +++++-
assets/js/theme/design-system/search.js | 22 ++--------------------
assets/js/theme/utils/a11y.js | 17 +++++++++++++++--
assets/js/theme/utils/utils.js | 2 +-
5 files changed, 25 insertions(+), 32 deletions(-)
diff --git a/assets/js/theme/design-system/Popup.js b/assets/js/theme/design-system/Popup.js
index 6e65e143..b37217f0 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 0d01dbe6..9db85c44 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 cc3b8d9b..07d410f1 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 6c4fd7b3..e151045b 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 c8757679..81199f53 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
+};
--
GitLab