Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use "inert" for Modal and Drawer to keep focus contained #1655

Closed
Hugos68 opened this issue Jun 9, 2023 · 9 comments
Closed

Use "inert" for Modal and Drawer to keep focus contained #1655

Hugos68 opened this issue Jun 9, 2023 · 9 comments
Labels
feature request Request a feature or introduce and update to the project.
Milestone
v2.0

Comments

@Hugos68
Copy link
Contributor

Hugos68 commented Jun 9, 2023 •
edited
Loading

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

By using inert you can make a DOM element and it's descendants un-interactive-able which can come in handy when implementing overlays like Modals and Drawers. By putting inert on the %sveltekibody% surrounding div and placing the Modal and Drawer element besides that div we can disable interactions for the entire app on demand whilst having a overlay active on top.
Here is a small demo.
As shown in the project we can utilize the portal action to rerender any element in a different place.
Because I am working on my own headless component library I went ahead and implemented it aswell, it can be found here if you want to see it in action.
This is what the structure of the <body> will look like when implemented:

Modal/Drawer Hidden:

<body data-sveltekit-preload-data="hover">
    <div>%sveltekit.body%</div>
</body>

Modal/Drawer Visible:

<body data-sveltekit-preload-data="hover">
    <div inert="">%sveltekit.body%</div>
    <!-- Modal/Drawer -->
    <div>...</div> 
</body>

This would also indirectly fix: #1613

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

This feature was discussed prior to me making this issue, the full conversation can be read about here: https://discord.com/channels/1003691521280856084/1003699523522142399/1116800227148566558
@Hugos68 Hugos68 added the feature request Request a feature or introduce and update to the project. label Jun 9, 2023
@endigo9740 endigo9740 mentioned this issue Jun 21, 2023
Closed
6 tasks
@endigo9740
Copy link
Contributor

Adding a reference to the prior PR which this will replace:
#1614

@Hugos68
Copy link
Contributor Author

Hugos68 commented Jun 24, 2023

What's the plan for this PR, I understood once this gets the green light I could implement this?

@endigo9740
Copy link
Contributor

endigo9740 commented Jun 24, 2023 •
edited
Loading

@Hugos68 we'll circle back. Right now my priorities are elsewhere. But we don't keep tickets that we don't plan to move forward on.

Last we left off I believe the plan was to create a standalone proof of concept of the portal feature. Then determine if that's something we want to implement as a dedicated feature in Skeleton - as it might have multiple applications. Once that's in place, we can look to update our modal system to use this + the inert body style.

I'd welcome help with either part of those.

@Hugos68
Copy link
Contributor Author

Hugos68 commented Jun 25, 2023

Sounds good, not sure if you noticed but there is a proof of concept repo that showcases the portal + inert feature's to create a accessible modal. Once you have time to look over that I'd love to hear feedback 👍

@endigo9740
Copy link
Contributor

Great, send me a link here please

@Hugos68
Copy link
Contributor Author

Hugos68 commented Jun 25, 2023 •
edited
Loading

This is a standalone minimal repo: https://github.com/Hugos68/modal-drawer-inert-sample-project

@Hugos68
Copy link
Contributor Author

Hugos68 commented Dec 18, 2023

@endigo9740 What should we do with this? I am scanning through the issues FYI.

@endigo9740
Copy link
Contributor

@Hugos68 this will be bumped to v3 milestone later this week ;)

@endigo9740 endigo9740 changed the title Use "inert" for Modal and Drawer to dissallow focus on anything behind the backdrop Use "inert" for Modal and Drawer to keep focus contained Dec 19, 2023
@endigo9740 endigo9740 added this to the v3.0 (Next) milestone Dec 19, 2023
@endigo9740 endigo9740 mentioned this issue Dec 26, 2023
Open
9 tasks
@endigo9740
Copy link
Contributor

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:

@endigo9740 endigo9740 modified the milestones: v3.0 (Next), v2.0 Jan 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request Request a feature or introduce and update to the project.
Projects
None yet
Milestone
v2.0
Development

No branches or pull requests
2 participants
@endigo9740 @Hugos68