diff --git a/assets/js/hooks.js b/assets/js/hooks.js index e9d1b43..cfa51ac 100644 --- a/assets/js/hooks.js +++ b/assets/js/hooks.js @@ -582,6 +582,43 @@ export const mountStaticAidMaps = root => { } export const Hooks = { + AccessibleDisclosure: { + mounted() { + this.summary = this.el.querySelector(":scope > summary") + + this.syncExpanded = () => { + this.summary?.setAttribute("aria-expanded", String(this.el.open)) + } + + this.onKeydown = event => { + if (event.key !== "Escape" || !this.el.open) return + + event.preventDefault() + event.stopPropagation() + this.el.open = false + this.syncExpanded() + this.summary?.focus() + } + + this.onPointerDown = event => { + if (this.el.open && !this.el.contains(event.target)) { + this.el.open = false + this.syncExpanded() + } + } + + this.el.addEventListener("toggle", this.syncExpanded) + this.el.addEventListener("keydown", this.onKeydown) + document.addEventListener("pointerdown", this.onPointerDown) + this.syncExpanded() + }, + destroyed() { + this.el.removeEventListener("toggle", this.syncExpanded) + this.el.removeEventListener("keydown", this.onKeydown) + document.removeEventListener("pointerdown", this.onPointerDown) + } + }, + NotificationTimeZone: { mounted() { const timeZoneInput = this.el.querySelector("[data-time-zone]") diff --git a/lib/who_need_help_web/components/layouts.ex b/lib/who_need_help_web/components/layouts.ex index 1272152..3ac96fc 100644 --- a/lib/who_need_help_web/components/layouts.ex +++ b/lib/who_need_help_web/components/layouts.ex @@ -98,10 +98,15 @@ defmodule WhoNeedHelpWeb.Layouts do -