[switch]: Should author defined content be allowed on the thumb?

[gfellerph]

This is a sub-ticket of #959 which did not reach a resolution at the discussion on the call of Nov 30, 2023 (https://github.com/openui/open-ui/issues/959#issuecomment-1834438876).

Should authors be able to add text or image content to the thumb element?

[gfellerph]

Here is a demo of what <input type="checkbox" switch> looks like in Safari Technology preview: https://nt1m.github.io/html-switch-demos/

Screenshot taken from https://github.com/whatwg/html/pull/9546#issuecomment-1865595475

[css-meeting-bot]

The Open UI Community Group just discussed [switch]: Should author defined content be allowed on the thumb?, and agreed to the following:

• RESOLVED
• RESOLVED: PROPOSED RESOLUTION: allow img/svg content (excluding <foreignObject>) within the thumb of the switch

The full IRC log of that discussion

<gregwhitworth> scribenick: Travis
<gregwhitworth> q+
<Travis> philipp: Question is simple: should text/image/etc. content be allowed on the DOM of the switch (the little dot that moves around). Next issue, should it be allowed on the track?
<Travis> gregwhitworth: It's shipping in beta in Safari now.
<Travis> .. in pseudo elements, it allows content.
<Travis> .. overloaded topic. Would prefer to answer, should it allow complex content?
<Travis> .. this is why I split up the checkbox proposal (lots of examples of complex content) like SVG.
<Travis> .. I think the pseudo is a great stop-gap.
<Travis> .. There are so many scenarios where folks are going to want to do it. Yes, unicode chars are ok, but folks will want more.
<scotto_> q+
<Travis> .. I doubt this will go into the input type=checkbox (switch attribute)
<gregwhitworth> ack gregwhitworth
<gregwhitworth> ack scotto_
<Travis> scotto_: Interesting that WHATWG has allowed an attribute on the checkbox to change it.
<bkardell_> scotto_: is it because one has children?
<Travis> .. but seems to be pushback on XXX.
<bkardell_> s/XXX/select
<Travis> .. I agree with gregwhitworth that people should be able to put images, etc.
<Travis> .. It could be unfortuante if we allow one thing, then it will allow everything.. which will lead to issues.
<Travis> gregwhitworth: I'm not opposed to limiting to SVG/images...
<Travis> .. would love to hear from philipp on this.
<Travis> .. are there scenarios where...
<Travis> .. there should be no interactive children (agree with this).
<Travis> .. philipp did you see any scenarios where they were complex?
<Travis> .. If we say SVG, then does that lead to complex SVG-with-HTML...
<Travis> philipp: No, most use cases I saw were very simple.
<Travis> .. mostly it was a checkbox on the thumb
<gregwhitworth> q?
<Travis> .. and on the track: text that was "on" or "off"
<Travis> gregwhitworth: what about this scenario? Tooltips that stay snapped to the thumb.
<keithamus> q+
<Travis> .. CSS WG is ensuring that name for progress thing is same as switch thing.
<Travis> .. we should make sure they are aligned.
<Travis> .. would you envision similar children being those tooltips?
<Travis> .. or would they be siblings that could be aligned (and thus contain SVG/etc.)
<Travis> .. ?
<Travis> philipp: don't have a lot of experience with anchor position, but think that would match the moving tooltip nicely.
<Travis> gregwhitworth: from a blueprint perspective... we're going to say WHATWG needs to figure out a new way to allow complex children to exist.
<Travis> keithamus: the other thing I wanted to mention (implementation-wise): it would be great to not worry about anchor positioning for switch (versus others that are unbounded)
<gregwhitworth> q?
<gregwhitworth> ack keithamus
<Travis> .. also, safari tech preview also enabled alts for content.
<Travis> .. resolves some potential a11y concerns about how to resolve complex content that needs description.
<Luke> q+
<Travis> gregwhitworth: if your SVG is a checkbox then transitions into an X...
<Travis> .. I saw that when doing checkbox research (a transformation using complex SVG)
<gregwhitworth> ack Luke
<Travis> Luke: Point 1: current impl allows content, but only on ::before ::after pseudos.
<Travis> .. I also think it would be useful if it could support children.
<Travis> .. Is there a mechanism that could allow that to work now?
<Travis> masonf_: Is it clear it doesn't work?
<Travis> Luke: Well, haven't actually tried. If it works, that could allow some complicated children use cases.
<Travis> .. otherwise, I would prefer to limit it.
<Travis> .. for reasons already said.
<Travis> .. we can always make it more complicated in the future.
<Travis> gregwhitworth: well, disagree. Some incompatibilities can creep in even using that approach.
<Travis> .. I here there is general agreement that there could be complex children for img/svg, but not for other types.
<Travis> philipp: PROPOSED RESOLUTION: allow img/svg content (excluding <foreignContent>)
<gregwhitworth> Travis: isn't there something in the SVG spec that keeps it to just the raw image
<Travis> gregwhitworth: Don't disagree if that exists, but it might limit the scenario of transforming an SVG
<Luke> +1
<Travis> .. also add "within a switch"
<keithamus> +1
<philipp> PROPOSED RESOLUTION: allow img/svg content (excluding <foreignContent>) within the thumb of the switch
<scotto_> +1
<keithamus> +1
<masonf_> +1
<philipp> PROPOSED RESOLUTION: allow img/svg content (excluding <foreignObject>) within the thumb of the switch
<keithamus> +1 still
<philipp> RESOLVED
<philipp> RESOLVED: PROPOSED RESOLUTION: allow img/svg content (excluding <foreignObject>) within the thumb of the switch

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.