PSA: There is currently no way for web components to be accessible if you use the isolation feature (called “shadow dom”). Isolate the label from the input field, for example, & you break all the assistive technology - which requires they be tied together with ids.
-
Show this thread
-
Replying to @sarahmei @freezydorito
Does this include extensions of input elements, like: <label>Color: <input is=fancy-color> </label> If so that is extremely surprising!
1 reply 0 retweets 1 like -
Replying to @rakshesha @sarahmei
i read this as it breaks screen readers if you do things like <input is="fancy-color" data-label="Title"/> and then your element adds the label in the shadow dom?
1 reply 0 retweets 0 likes -
Replying to @freezydorito @sarahmei
Ah, okay! I'd also like clarification on that. (Tho that case is maybe odd bc it's not clear what a label INSIDE an input should mean). I'd expect this to fail: <label>Color: <fancy-color></fancy-color> </label> Even if there's an input inside fancy-color's shadow root.
1 reply 0 retweets 1 like -
Thinking about this more, I would expect your example to work, because isn't that how things like <input type=date> work to begin with? And I'd expect both <input is=fancy-color> and just <fancy-color data-label=Color/> to work, again by analogy to the browser's own controls.
1 reply 0 retweets 0 likes -
(I'm presuming in your example that there's another <input> inside <fancy-color>'s root for the label to bind to.)
1 reply 0 retweets 1 like -
Replying to @rakshesha @sarahmei
will be honest, i'm v against web components as a workable api bc of gotchas like this (or more importantly, what happens without js) so i don't really know :/
2 replies 0 retweets 2 likes
In terms of surface API for a single element, intrinsic a11y role/state setting coming ASAP:https://groups.google.com/a/chromium.org/forum/m/#!msg/blink-dev/BcWAX13du9w/wlp9E1YGEAAJ …
-
-
Replying to @slightlylate @freezydorito and
In the case where you use `is`, JS disabled is the same as default input element semantics. Same for slotted content.
0 replies 0 retweets 0 likesThanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.