Description
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:
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?