You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
<dialogid="confirm-deletion"><article><header><ahref="#close" aria-label="Close" class="close">close</a></header>
content
<footer><ahref="#close" role="button">{{.tr: "button.cancel"}}</a><!-- and other interactions of course --></footer></article></dialog>
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?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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:
Opening the modal is as easy as:
Finally it requires some CSS to only show the modal if it is the target of the page.
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?
Beta Was this translation helpful? Give feedback.
All reactions