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 };