Modal/ Flyout - Add returnFocusTo argument for consumer-side focus management on close

[didoo]

📌 Summary

While working on the HdsPlus::ChallengeModal one argument that is missing from our Hds::Modal, looking at the implementation of similar components in our consumers' codebases, is the returnFocusTo (see here).

As you can see from the attached video, the focus could be "lost" once the <dialog> element is closed (it's returned to the body) if the original element that opened the modal is deleted from the DOM (eg. think of a modal opened via a dropdown interactive item).

The intent of this PR is to introduce, in our Modal and Flyout components, a similar functionality to allow consumers to control where the focus is returned, if the element that initiated the event is not in the DOM anymore once closed.

🛠️ Detailed description

In this PR I have:

• added returnToFocus argument and logic to Modal and Flyout components
• added demos to Modal and Flyout showcase pages where the modal is opened via Dropdown
  • added ember-set-helper as dev-dependency for the showcase
• added more focus-management integration tests for Modal and Flyout components

Notice: I'll add the documentation update in a separate PR, if we agree this is the way forward.

👀 Previews:

• Modal: https://hds-showcase-git-modal-flyout-return-focus-to-hashicorp.vercel.app/components/modal
• Flyout: https://hds-showcase-git-modal-flyout-return-focus-to-hashicorp.vercel.app/components/flyout

🎬 Video

You can see how the focus is returned to the body once the Modal is closed (look at the document.activeElement live variable in the devtools on the right)

focus.mov

---

👀 Component checklist

• Percy was checked for any visual regression
• A changeset was added

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Oct 11, 2024 2:48pm
hds-website	✅ Ready (Inspect)	Visit Preview	Oct 11, 2024 2:48pm

[didoo]

I am using getElementById which means that if consumers want to use the returnFocusTo argument, they have to assign an id to the element they want to return the focus to.

The reasoning for not being less "strict" and use something like querySelector is that one would be tempted to use a CSS class name (which may not be unique in the page) or a data attribute (but if you can assign a data attribute, you can also assign an id)

Can you think of cases where they would not be able to assign an ID to the target element, or the ID is dynamically generated?

[MelSumner]

I also prefer the approach of using an id here. We can have folks try it out, I'm sure they'll tell us if they can't, but I don't know of any immediate reason why they wouldn't be able to do that.

[didoo]

We can have folks try it out, I'm sure they'll tell us if they can't

That's what they are using in Cloud UI, so I think it should work OK: https://github.com/hashicorp/cloud-ui/blob/main/addons/core/package/src/components/modal-dialog.ts#L236-L241

[MelSumner]

This is a great addition and will be very helpful for our consumers. 👍

[didoo]

This is a great addition and will be very helpful for our consumers. 👍

@MelSumner thanks! can you check in the showcase pages that it meets the accessibility requirements and expectations? thanks 🙏

[MelSumner]

Visit Preview

Ahh yes, I should have said; I did visit the showcase page and the focus with the return is doing what it should be doing. 👍

[KristinLBradley]

Looks good. Seems like a worthwhile and useful update to me.

[didoo]

@alex-ju I'll wait for you OK/green light before merging (don't know if/when we want to release these changes. Or even better, please merge it yourself if/when it's OK for you.

[alex-ju]

@alex-ju I'll wait for you OK/green light before merging (don't know if/when we want to release these changes. Or even better, please merge it yourself if/when it's OK for you.

we already have a feature in the pipeline, so we can get this one in anytime