Use `button` instead of `a` for closing modals about pico HOT 8 CLOSED

@Atmos4,
Thank you. I appreciate your research. I agree. You made a good point.

But we must avoid breaking changes because we are no longer in beta or release-candidate.
So the current <a rel=prev></a> should still be functional.

I would prefer formmethod="dialog" (vs rel="prev").
I didn't know about HTMLDialogElement, so that's even better.

Sure, it would be great if you could open a PR.
Also, as following PRs, we would need to update the website and the examples.
It can come later.

Note, you also need to reset box-shadow

(EDITED)

from pico.

Semantically valid is more important than the bundle size.

:is(button, a):has([rel=prev])

Agreed

(EDITED)

from pico.

dialog is not a valid formmethod.

@lucaslarroche it is! Check out the MDN article and this codepen. The original codepen I posted above was also containing this solution.

from pico.

@lucaslarroche it is! Check out the MDN article and this codepen.

Great. I missed it when researching yesterday.

The original codepen I posted above was also containing this solution.

Yes. That's why I suggested at some point to target button[formmethod] to avoid using rel.

from pico.

@lucaslarroche
I will work on a PR as soon I have some free time!

Out of curiosity, how much does bundle size matter to this project? If it is important, then I might just go with the first solution I described. It should be doable with :is(button, a):has([rel=prev]).

I edited the codepen to reflect what I described above, and simplify the CSS to work with .close class instead.

from pico.

PR is ready, see #448

from pico.

@Atmos4, I edited my comments about targeting <button formmethod="dialog" />
I was confused with your example using it, but dialog is not a valid formmethod.

So you were right, .close, :is(a, button)[rel=prev] and :is(a, button)[rel=prev] are good!

from pico.

@lucaslarroche The problem with using button[formmethod] as the way to style the icon is that there are other valid use cases for button[formmethod] without the icon, for example:

<dialog>
  <article>
    <!-- Modal content -->
    <footer>
      <form>
        <button formmethod=dialog>Cancel</button> <!-- this button should look normal! -->
      </form>
    </footer>
  </article>
</dialog>

By the way, is there a reason to have some part of the icon specific code coupled to the header? It could be interesting to allow usage of that icon anywhere inside the article, for example like this:

<dialog id=modal1>
  <article>
     <button rel=prev onclick="modal1.close()"></button> <!-- currently doesn't float:right -->
    <!-- Modal content -->
  </article>
</dialog>

I can create an issue/PR to decouple the code if you are interested. Maybe there are valid reasons to have it otherwise though!

from pico.