5 ms·
The goto tactic for this specific `<label>` problem is: <label> Foo <input> </label>
by ddtaylor 2y ago
The goto tactic for this specific `<label>` problem is:
<label>
Foo
<input>
</label>
- brailsafe 2y agoBack in the day I used to think this was taboo for some reason, but maybe it was only for XHTML to enforce one-to-one label -> input association. Flexbox seemed a bit redundant, since even with the non-nested syntax I'd think it would lay out inline and you can just add some padding in the same way.
- 8n4vidtmkvmk 2y agoThe alignment is not exactly the same when you just put them side by side. Flex can center the radio with the text a bit nicer. Otherwise it sits above the text baseline I believe.
- notduncansmith 2y agoThis was my first thought. The entire text label should toggle the radio or checkbox, not just the box and the padding.
- dmix 2y agoBootstrap moved from <label><input></label> in 4.0 to <input> + <label> in 5.0 for radios/checkboxes [1]. I was curious about why but my guess is that it adds some simplicity for theming when repositioning/padding either the label or input. [1] https://getbootstrap.com/docs/5.3/forms/checks-radios/ https://getbootstrap.com/docs/5.3/forms/checks-radios/
- parasti 2y agoThey more than likely made that decision to be able to style the label based on input state using the + sibling selector. I use that trick for literally every visible input now.
- abdusco 2y agoI think it's for material design inspired focus animations. :has selector wasn't a thing, so you have to use + sibling selector to target the label of a focused input input:focus + label {} label:has(input:focus) {}
- Ciantic 2y agoIncidentally Bootstrap 5.3 seems to have the same problem as the article describes. There is a gap which doesn't do anything if clicked, right between the radio button and the label.
- robin_reala 2y agoEven with nesting you still need for/id attributes to make it accessible to common voice command software: https://www.tpgi.com/should-form-labels-be-wrapped-or-separate/ https://www.tpgi.com/should-form-labels-be-wrapped-or-separa...
- rafram 2y agoThat’s the voice control software’s problem.
- robin_reala 2y agoAt the end of the day it’s your users’ problem. Ideally their assistive tech would work, but if it doesn’t and you’ve got an easy fix then you should implement that fix.
- 7bit 2y agoI disagree. Of course you could fix that. But that would mean that you can fix a thousand and one issues that's caused by other softwares erroneous content handling. Which leads to nothing but bloat and introduces just more code that could come with more bugs. If your software works and is designed as intended, then sometimes it stays the users problem. Unfortunate, but otherwise problems will stay forever.
- robin_reala 2y agoYour software isn’t working, because the user cannot use it. Your UI is always a combination of whatever hardware and software come together to give an experience. Everyone chooses to marginalise certain segments of users’ technologies – I don’t support IE any more of course – but I typically won’t drop support for technologies that are vital assistive technologies for that segment of users. (If you need a personal story to bring it home, the only way my dad, a programmer in the 70s-90s, could continue to use computers when he suffered from MND / ALS, was to use voice control software.)
- wagthedog 2y ago[dead]
- mattlondon 2y agoI think that would not have worked with the grid CSS approach. I guess it is kinda beside the point though as it was just an example to illustrate the point.
- dclowd9901 2y agoJust a note that in a framework like react, this will introduce an error that propagates when people attempt to use something like “google translate” on your site. You’d need to wrap the “Foo” in an element to mitigate.