Modal should return the focus to the triggering element after close

[hugotox]

Describe the feature in detail (code, mocks, or screenshots encouraged)

This is an accessibility requirement: when the modal is closed, the focus should return to the previously focused element, usually the element that triggered opening the modal.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

WAI Example https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/

MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal

[endigo9740]

Agreed, though we'll have to make considerations for how this plays out when multiple modals are queued from multiple sources. Not every modal has a trigger element on the page. For example, some modals may be generated programmatically, such as an error modal when a server call fails.

[aaroncrockett]

I'd gladly take a look at this.

[aaroncrockett]

In order to ensure the modal was triggered by an element in the DOM to return focus to, how do you feel about passing in the trigger element as setting?

In regards to what @endigo9740 brought, if a modal is triggered programmatically would we want to return focus to the last focus element, period? Would that be unexpected?

Here is what I worked out as a setting, which I can put into a PR if that seems the correct direction.

types.ts

export interface ModalSettings {
	/** Provide recommended trigger element, if one exists, to return focus when modal closes */
	triggerElement?: HTMLElement;

	function modalDemo(event: MouseEvent): void {
		const modal: ModalSettings = {
			type: 'alert',
			title: 'Hello Skeleton',
			body: 'This modal example includes a title, body, and image.',
			image: 'https://i.imgur.com/TykCy5e.gif',
			triggerElement: event.target as HTMLElement | undefined
		};
		modalStore.trigger(modal);
	}

		close: () =>
			update((mStore) => {
				if (mStore.length > 0) {
					const modal = mStore.shift();
					/**  Return focus to the element that triggered the modal. */
					if (modal?.triggerElement && document.body.contains(modal.triggerElement)) {
						modal.triggerElement.focus();
					}
				}
				return mStore;
			}),

[endigo9740]

@aaroncrockett Yeah I think that'll be the only sane way to go about it. My only suggestion is to use trigger for the key name - the type is already define to support the type (HTML element) and JSDocs can clarify this as well.

Per the type - I'm going to ping @AdrianGonz97 and @ryceg to share their opinions. I'm not sure if we'll want to cast using as HTML and I don't believe undefined should be needed there. But they can confirm for sure.

[aaroncrockett]

@endigo9740 Checking in with an update -- I will be able to look at this again this week probably -- before Friday and I will also look more into the types.

[doic]

I'm curious about the status of this feature

[endigo9740]

In an effort to prepare for Skeleton v3, we're consolidate some related issues down to a single ticket. This will ensure that we can see the full context of requests when the time comes to refactor and update this feature going forward. If you wish to add additional feedback or suggestions, please so here:

• NEXT: Overlay System (modals/drawers/toasts) #2357