Adding non-tab to Tabsheet?

Looks like I can add any valid html as a child to <vaadin-tabs>, but can I do so from java-side on the TabSheet? Any reason I shouldn’t?



Simplest answer: Accessibility.

There is nothing that says this can’t be accessible.
Maybe the aria label for each of the tabs include “step”…?
Maybe screen readers actually read the text when you tab over it anyway?

Pragmatically you’re right: We don’t have accessibility as a requirement, so it will never be checked, and will easily be forgotten, but that is true for anything custom we make.

I don’t have time to go into full details here - just saying: the outer tabs are a tablist.

Let me compare it with something more known: it’s like adding a paragraph into an list (ul-element) which only allows to add li-elements - invalid html.

Might not be a good idea like already discussed but you can in general add anything to anything by using the Element API. In this case, you also need to find a way of accessing the internal Tabs component - I’m just assuming it’s the first child of the tab sheet.

Component tabs = tabSheet.getChildren().findFirst().get();

tabSheet.add("General", new Span("General content"));
tabSheet.add("Validation", new Span("Validation content"));

I see that Tabsheet/Tabs limit add(Component) to only accept Tab, but as demonstrated, <vaadin-tabs> has no problem with it, so unsure if it can be called “invalid html”, but I do accept that it might be unexpected, and that even if it works today it might break tomorrow.

For now this is enough to dissuade me, but it would be interesting to know more about the risks involved, in case I got this as a hard requirement

It happens to work as a side effect of how HTML works and how regular tabs are handled.

If you look at the Java API for the Tabs class, you will notice that there’s a bunch of methods accepting a generic Component but that they have all been deprecated since Vaadin 24.0.