Remove unnecessary classes and ids from labels
stevepiercy opened this issue · comments
<label> in BS4 does not have any classes or ids in its attributes. It has only the for attribute. Remove any default classes and ids.
The question arises for "required". Without it, there's no marker to show a field being required.
What do you think about this solution?
https://stackoverflow.com/a/76871043/2214933
I think less markup is better. But I do not know whether this visual only solution is best for accessibility. I assume by virtue of the required attribute on the input, that screen readers would inform the user.
Answering my own question: https://www.accessibility-developer-guide.com/examples/forms/required/#using-html-5-client-side-validations.
Therefore the CSS visually-only solution is fine.
The ":has(+...)" does not work on every browser. It does not, on my firefox but does on my chromium.
After fiddling around in the templates, I also fail to see how we'd use a purely CSS solution with composite fields, like the date parts. The label is then linked to several inputs lost in the depths of HTML markings. This is also true for other complex fields that can't just be input:required or select:required
maybe a solution would be : https://getbootstrap.com/docs/5.0/forms/floating-labels/#example
Then the label is AFTER the field and can be selected without advanced CSS that don't work everywhere
So for example, doing one of these?
<div class="bd-example">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address (required)</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password <span class="text-danger">*</span></label>
</div>
</div>
For the former, translations would be better supported, it would be more accessible, and it would avoid an abstraction of a red * to show that the field is required. We could adapt this approach for radios and checkboxes, too. The downside is that there would be longer text instead of a *. What do you think?
If we go the full text way ('required'), then we do not need to change anything in the html structure. The proposed floating labels were meant to allow an easier CSS selector to apply a red asterisk. I, myself, think a visual cue is probably cheaper (we just keep what we currently have with a class='required').