From c6c759c9e790dfccda7262e42a350fc43f476a28 Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet206@gmail.com>
Date: Wed, 17 Apr 2024 15:21:05 +0200
Subject: [PATCH] a11y js
---
assets/js/theme/design-system/notes.js | 28 ++++++++++++++++++++++++++
1 file changed, 28 insertions(+)
diff --git a/assets/js/theme/design-system/notes.js b/assets/js/theme/design-system/notes.js
index 70e6a4e3..a1f44b5c 100644
--- a/assets/js/theme/design-system/notes.js
+++ b/assets/js/theme/design-system/notes.js
@@ -3,6 +3,7 @@ class Note {
this.note = note;
this.active = false;
this.call = this.note.querySelector('.note__call');
+ this.content = this.note.querySelector('.note__content');
this.call.addEventListener('click', this.toggle.bind(this));
}
@@ -18,12 +19,16 @@ class Note {
this.deactivateAllNotes();
this.active = true;
this.note.classList.add('note--active');
+ this.content.removeAttribute('aria-hidden');
this.definePosition();
+ this.a11yDesactivation();
}
deactivate () {
this.active = false;
+ this.content.setAttribute('aria-hidden', 'true');
this.note.classList.remove('note--active');
+ this.removeA11yDesactivation();
}
deactivateAllNotes () {
@@ -32,6 +37,29 @@ class Note {
});
}
+ a11yDesactivation () {
+ this.closeWithKeyboard = (event) => {
+ if (event.keyCode === 27 || event.key === 'Escape' || event.key === 'Tab' || event.keyCode === 9) {
+ this.deactivateAllNotes();
+ this.call.focus();
+ }
+ };
+
+ this.closeWithClick = (event) => {
+ if (!event.target.closest('.note--active')) {
+ this.deactivateAllNotes();
+ }
+ };
+
+ window.addEventListener('keydown', this.closeWithKeyboard);
+ document.addEventListener('click', this.closeWithClick);
+ }
+
+ removeA11yDesactivation() {
+ window.removeEventListener('keydown', this.closeWithKeyboard);
+ document.removeEventListener('click', this.closeWithClick);
+ }
+
definePosition () {
let isOnTheLeftSide = this.note.offsetLeft < window.innerWidth / 2;
if (isOnTheLeftSide) {
--
GitLab