Marijke LuttekesEdit 4 days later: Deleted the contents of this toot, but keeping it for replies.
The original example code was inaccessible and has now been removed.
Bas Wijnen@mahryekuh Yes, very cool. I have been making tabbed interfaces without JS for a while, using radiobuttons. But the part I don't like is that (I think) I need to use CSS rules for every tab (input#thistab:not(:checked) ~ div#thispage { display: none; })
Do you know of a way this can be achieved in a way that does not need new CSS rules when new tabs are added? Is that even possible?
@mahryekuh Ok, I have just answered my own question by reading your post; it works using has().
I still seem to need this for the tab style though (to show which tab is currently active, so to which tab the currently visible page belongs). What I would want for that, is a CSS rule that can "follow" the htmlFor member of the Label (which is not a descendant in the DOM tree). I suppose I could use has() there as well, but then I'd need to say "has id equal to this element's for". Is that a thing?
@wijnen I haven't fully read your post as it's too much info for me right now, but…
Tabs need JS anyway, so you can simplify CSS using attribute selectors.
If you use the pattern described below, than you can probably apply your desired styling on `[aria-selected]`, or a sibling/descendent of that element.
@mahryekuh I don't do much with the web; I hadn't looked accessibility before. But of course I want that and it seems that aria-selected can indeed not be generated without JS.
And you are also correct that once that is generated, it is trivial to get style on the tab based on it. 😃
So thanks, this makes it much better!