HTML and Live CRUD generators output invalid HTML (buttons nested in links)

[angelikatyborska]

Environment

• Elixir version (elixir -v): 1.16.0
• Phoenix version (mix deps): 1.7.11
• Operating system: macOS 14.1

Actual behavior

When running mix phx.gen.live or mix phx.gen.html, the generated "index" and "show" pages contain a <button> element nested inside of an <a> element. This is not valid HTML and causes some problems when navigating with a keyboard. See the gif below - the "button link" can be focused twice: once as a link, and once as a button.

Those are the affected files:

• phx.gen.html/index
• phx.gen.live/index
• phx.gen.html/show
• phx.gen.live/show

Double focus problem gif

Note: the page maybe doesn't look like you expect it to to because I didn't include Tailwind, and instead added Pico CSS. It shouldn't matter for this issue.

HTML validation error

Expected behavior

I would expect the HTML from the generators to be valid. It should produce <a> elements with only text content, and the necessary Tailwind classes should be applied directly on the <a> element.

The problem of "semantic buttons" vs "visual buttons" is a common problem in web apps. Maybe it would make sense to introduce a new core component called link_button, that's semantically a link but visually a button? Or modify the current button component to change its semantics based on passed attributes. If a "href" attribute is given, make it semantically a link. If not, make it semantically a button?