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
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.
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:
phoebe100
added a commit
to phoebe100/phoenix
that referenced
this issue
May 17, 2024
Nesting a button inside an anchor tag is not valid HTML. This change
introduces a new `link` attribute in the `button` core component that,
when present, will render the button as an anchor tag instead.
Fixes#5770.
References #5814.
Nesting a button inside an anchor tag is not valid HTML. This change
introduces a new `link` attribute in the `button` core component that,
when present, will render the button as an anchor tag instead.
Fixes#5770.
References #5814.
Nesting a button inside an anchor tag is not valid HTML. This change
introduces a new `link` attribute in the `button` core component that,
when present, will render the button as an anchor tag instead.
Fixes#5770.
References #5814.
Nesting a button inside an anchor tag is not valid HTML. This change
introduces a new `link` attribute in the `button` core component that,
when present, will render the button as an anchor tag instead.
Fixes#5770.
References #5814.
Environment
Actual behavior
When running
mix phx.gen.liveormix 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: