Toggling modal without JS - using targets

[fnetX]

Hi,

I found that I didn't want to require JS to interact with modals in Pico CSS (also see #458), and I used a simple workaround to interact with a modal. I use anchors and CSS targets only.

The modal is created like this:

<dialog id="confirm-deletion">
	<article>
		<header>
			<a href="#close" aria-label="Close" class="close">close</a>
		</header>
		content
		<footer>
                        <a href="#close" role="button">{{.tr: "button.cancel"}}</a>
                        <!-- and other interactions of course -->
		</footer>
	</article>
</dialog>

Opening the modal is as easy as:

<a href="#confirm-deletion" role="button">Delete</a>

Finally it requires some CSS to only show the modal if it is the target of the page.

dialog:target {
	display: flex;
}

I confirmed that this seems to be basically screenreader and keyboard-navigation-accessible: The closed modal is not initially in the taborder in the browsers I tested. Using the link to visit the modal correctly sets the focus to be inside the modal, even if the modal is later in the resulting HTML source code (because they are related to forms and you cannot nest forms).

What do you think? Would this be something to mention in the official Pico docs or even interesting to support by default?

[asbjornu]

I've done this myself and it seems to be working fine. The only thing I wish for was that the opening of the modal had a transition. I suppose that can be replicated by copying some of the dialog[open] styles to dialog:target. I haven't tried that myself, though.