diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js index aa9c9cdc6..a68813bc3 100644 --- a/bookwyrm/static/js/bookwyrm.js +++ b/bookwyrm/static/js/bookwyrm.js @@ -41,6 +41,7 @@ let BookWyrm = new (class { document .querySelectorAll("[data-duplicate]") .forEach((node) => node.addEventListener("click", this.duplicateInput.bind(this))); + document .querySelectorAll("details.dropdown") .forEach((node) => @@ -405,7 +406,7 @@ let BookWyrm = new (class { } /** - * Handle the modal component. + * Handle the modal component with a button trigger. * * @param {Event} event - Event fired by an element * with the `data-modal-open` attribute @@ -416,6 +417,7 @@ let BookWyrm = new (class { * for information about using the modal. */ handleModalButton(event) { + const { handleFocusTrap } = this const modalButton = event.currentTarget; const targetModalId = modalButton.dataset.modalOpen; const htmlElement = document.querySelector("html"); @@ -457,38 +459,6 @@ let BookWyrm = new (class { modalButton.focus(); } - function handleFocusTrap(event) { - if (event.key !== "Tab") { - return; - } - - const focusableEls = event.currentTarget.querySelectorAll( - [ - "a[href]:not([disabled])", - "button:not([disabled])", - "textarea:not([disabled])", - 'input:not([type="hidden"]):not([disabled])', - "select:not([disabled])", - "details:not([disabled])", - '[tabindex]:not([tabindex="-1"]):not([disabled])', - ].join(",") - ); - const firstFocusableEl = focusableEls[0]; - const lastFocusableEl = focusableEls[focusableEls.length - 1]; - - if (event.shiftKey) { - /* Shift + tab */ if (document.activeElement === firstFocusableEl) { - lastFocusableEl.focus(); - event.preventDefault(); - } - } /* Tab */ else { - if (document.activeElement === lastFocusableEl) { - firstFocusableEl.focus(); - event.preventDefault(); - } - } - } - // Open modal handleModalOpen(modal); }