feat(unity-react-core): modal auto focus and disabled tab to content …

[spaceperson]

…outside the modal

Description

Checklist

• Tests pass for relevant code changes

Important Reminders

Links

• JIRA ticket
• Unity reference site
• UDS Guidelines

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1768/index.html

[scott-williams-az]

Content should be a prop

[scott-williams-az]

Should this always be true?

[scott-williams-az]

Oh the name confused me. is this variable for automatically opening the modal on page load? Can we pick a different variable name? variable name should describe if true the modal will be open when it loads

[spaceperson]

It's an html value for automatically updating the focus to activate the button when the modal opens. I left it as an option, but it didn't work when I tried it. I assumed it was because another element was taking priority. I didn't see the harm in leaving it as an option, but we could remove it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus
JSX uses camel case instead of the lowercase autofocus value.

[scott-williams-az]

@davidornelas11 are we mixing our react components with js inside bootstrap-theme (it technically loses react "coolness" but makes the functionality consistant)

If we use react functionality,

• make sure the bootstrap JS script does not conflict.
• useRef will be a better solution to target the element.

[scott-williams-az]

Should the modal close if a user clicks the backdrop? I thought this was a standard behavior?

[spaceperson]

I thought that feature missing was odd as well but wasn't sure if there was a reason we didn't have that feature. I'll implement that with the next update.

[scott-williams-az]

clean up code we aren't keeping

[scott-williams-az]

remove this event when the modal is not open

[scott-williams-az]

lets let the native tab event do its thing. you can create a focus trap

import { EventHandler } from "./bootstrap-helper";

function initModals() {
  const modal = document.getElementById("uds-modal");
  const openModalButton = document.getElementById("openModalButton");
  const closeModalButton = document.getElementById("closeModalButton");
  const firstFocusable = modal.querySelector(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );

  let previousFocus = null;
  function focusTrap(e) {
    // If relatedTarget is outside, move focus back inside
    if (!modal.contains(e.relatedTarget)) {
      firstFocusable?.focus();
    }
  }

  function openModal() {
    // When opening: save current focus and move into modal
    previousFocus = document.activeElement;
    modal.classList.add("open");
    // attach event listeners to trap focus and close modal
    modal.addEventListener("focusout", focusTrap);
    modal.addEventListener("click", closeModal, true);
    document.addEventListener("keydown", closeModal);
    // Focus the first interactive element inside (or body if none)
    firstFocusable?.focus();
  }

  function closeModal({ type, target, key } = {}) {
    if (
      // escape key pressed
      (type === "keydown" && key === "Escape") ||
      // click outside modal
      (type === "click" && target === modal) ||
      // click on close button
      (type === "click" && target === closeModalButton)
    ) {
      modal.classList.remove("open");
      modal.removeEventListener("focusout", focusTrap);
      modal.removeEventListener("click", closeModal, true);
      document.removeEventListener("keydown", closeModal);
      // When closing: restore original focus
      previousFocus?.focus();
    }
  }
  openModalButton.addEventListener("click", openModal);
}

EventHandler.on(window, "load.uds.modals", initModals);

export { initModals };