Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Refactor vaadin-button styles towards reusability, maybe -> vaadin-lumo-styles? #142

Closed
lkraav opened this issue Jan 18, 2020 · 1 comment
Closed

Refactor vaadin-button styles towards reusability, maybe -> vaadin-lumo-styles? #142

lkraav opened this issue Jan 18, 2020 · 1 comment
Labels
needs design Design is needed

Comments

@lkraav
Copy link

lkraav commented Jan 18, 2020

Background: #79 and https://github.com/vaadin/vaadin-lumo-styles/issues/5

Problem

Many website designs suggest button style navigation elements for UX reasons. vaadin-button seems like the handy choice, but it's not valid HTML5 to nest <button> element inside <a> - transparent elements can have no interactive descendants: https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5

Vice versa is also blocked, see https://validator.w3.org/#validate_by_input

<!DOCTYPE html>
<html lang>
<head>
  <title>button vs a</title>
</head>
<a href="/"><button>Hello world</button></a>
<button><a href="/">Hello world</a></button>
</html>

Error: The element button must not appear as a descendant of the a element.
From line 6, column 13; to line 6, column 20
href="/"><button>Hello

Error: The element a must not appear as a descendant of the button element.
From line 7, column 9; to line 7, column 20
>↩<button><a href="/">Hello

It is highly likely not profitable for SEO to do vaadin-button onclick=window.location.href ➕ there's probably other undesired side-effects.

Since we're blocked in both element nesting directions within the currently available toolbelt, I'm feeling like vaadin-button styling should maybe be a re-usable mixin, so that it'd also be possible to style native <a> elements as buttons?

Your thoughts? cc @jouni @web-padawan
@web-padawan web-padawan added the needs design Design is needed label Mar 12, 2020
@web-padawan
Copy link
Member

Sorry about leaving this issue without an answer. Let me close it in favor of vaadin/vaadin-lumo-styles#5 and continue there.

@lkraav lkraav mentioned this issue Oct 15, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs design Design is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lkraav @web-padawan