-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HTML and Live CRUD generators output invalid HTML (buttons nested in links) #5770
Comments
SteffenDE
added a commit
that referenced
this issue
Nov 26, 2024
It is not allowed to render a button inside an <a> tag: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element Therefore, we invert the order of the elements and nest a link inside a button and forward any button clicks to the link. Fixes #5770. References #5814.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Environment
Actual behavior
When running
mix phx.gen.live
ormix 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?The text was updated successfully, but these errors were encountered: