diff --git a/assets/js/theme/design-system/notes.js b/assets/js/theme/design-system/notes.js index 70e6a4e3ba5e0c3d20324f19cdad9a83fa006c1e..a1f44b5c5751b179e47b5a8ab4b3cc8ae9a930c5 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) {