I have tested this item ✅ successfully on c53b0c6

I have tested this item ✅ successfully on c53b0c6

It fixes #32366 and #32275

Agree this solves the original issue but here is the difference between using bootstrap button and switcher:

To compare I modified the Cassiopea Sticky header field to

				<field
					name="stickyHeader"
					type="radio"
					label="TPL_CASSIOPEIA_STICKY_LABEL"
					class="btn-group"
					default="0"
					filter="integer"
					>
					<option value="0">JNO</option>
					<option value="1">JYES</option>
				</field>

There is no background color difference between Yes and No.
Also, is this totally a11y compliant?

@infograf768 regarding the Sticky Header option you have

here's how it should work

In regards to a11y, I don't think there are any issues when compared to previous version.

@infograf768 I will provide a fix for the layout to work with btn-group-yesno asap, a small bug I found.

Adding indeed btn-group-yesno is much better

@thednp
You should also consider adding a legend for a11y, as we have for the switcher.

Roger that, stay close for the updated layout.

Alright, I've changed in my dev so that this layout will do the following:

• if you use class="btn-group" for any type="Radio" field, it should work as expected, which means the container of the input options will use class="btn-group", no change here
• however, if you use class="btn-group-yesno" for type="Radio", it will also use .btn-group CSS class, because .btn-group-yesno" CSS class does not exist
• so you don't have to use something like class="btn-group btn-group-yesno" for type="Radio" to achieve the same thing as I've showcased in the image attached above

Now about a11y, @infograf768 I don't see why a visible <label> need to have a legend for our buttons layout here.

@infograf768 the switcher layout indeed is a special case, it needs to tell screen readers what's the option about since there is no visible <label>, only a hidden <legend> which I'm sure readers check.

You think we need to add <legend> for type="Radio" fields when using this very buttons layout?

You think we need to add <legend> for type="Radio" fields when using this very buttons layout?

Maybe @chmst can have a look on that, too.

I'm also not happy with the last change, that looks like a hack to me, that str_replace.

A legend is necessary (visually hidden).

@chmst I will add <legend> then, no problem.

@richard67 and @infograf768 you don't have to use class="btn-group btn-group-yesno", just class="btn-group-yesno", but if you REALLY think that's the way to do it, no problem, change incoming.

but if you REALLY think that's the way to do it, no problem, change incoming.

It would be B/C with J3. As we have already so much non B/C in j4, let's not add one. ;)

@richard67 and @infograf768 you don't have to use class="btn-group btn-group-yesno", just class="btn-group-yesno", but if you REALLY think that's the way to do it, no problem, change incoming.

@thednp Your str_replace would not be safe for the case someone uses a custom class like e.g. my-fancy-class-yesno for some reason. You should have done a regex replace to make sure you only replace what you want to replace ;-) But for B/C we should revert that completely, like @infograf768 said.

@chmst @infograf768 and @richard67 done.

See commit note.

The switcher__legend class exists in css, but not the radio__legend

Yes, the .radio__legend has just been created. But I was referring to the fact that the CSS for .switcher__legend is redundant, unless it serves a purpose for J3? I'm not sure.

imho, switcher_legend css as well as radio-legend are totally useless as the only thing switcher_legend does is setting the font-size for a visually-hidden legend.
But let's @drmenzelit comment on that.

When I click the button it changes from disabled to enabled. But the two hidden checkboxes don't change checked status. I find this whole thing very confusing!

@ceford it's the same here, but it's OK, you can check the checked status via JavaScript, here's how:

• open Inspector (assume you use a Chrome based browser)
• right-click on an option, then select Inspect, make sure the <input> element is selected
• in the browser console, type in $0.checked, it should return the current state

It's how the browser engine works now, it won't update the checked attribute, but internally it always knows the current state, as it renders your .btn elements properly according to the real checked state.

Hmm, I now get

Hmm, I now get ...

@infograf768 I guess you mean that space between the "No" and "Yes" buttons, right?

@infograf768 @richard67 that's what my previous fix was about. my implementation wasn't perfect as Rich pointed out, but would have solved that. So yea, you need to use class="btn-group btn-group-yesno" to have it working without spacing between.

Forget it
Typo in the xml
I had class="btn-goup btn-group-yesno"

instead of
class="btn-group btn-group-yesno"

all ok

sorry

I have tested this item ✅ successfully on 13fe5a0

I have tested this item ✅ successfully on 13fe5a0

RTC

Not sure why this is RTC as there are outstanding issues. There is no point in adding a class to the legend that doesn't exist in the css. It serves no purpose as the legend is never visually displayed. Or do I miss something?

Not sure why this is RTC as there are outstanding issues. There is no point in adding a class to the legend that doesn't exist in the css. It serves no purpose as the legend is never visually displayed. Or do I miss something?

We have such classes according to BEM elsewhere, too, as once added by @ciar4n , as far as I remember.

on something that is hidden? That makes zero sense.

@thednp Could you remove the radio__legend from the class of the legend? Thanks in advance.

Back to pending.

@thednp Could you remove the radio__legend from the class of the legend? Thanks in advance.

Done.

I have tested this item ✅ successfully on 9aabd48

I have tested this item ✅ successfully on 9aabd48

rtc
let’s get rid of switcher__legend code and css in another pr

@infograf768 I would do it rn if I knew where's the source.

@thednp find ./ -type f -exec grep -Hn "switcher__legend" {} \; in a Linux shell or findstr /s /c:"switcher__legend" *.* in a Windows Command window will help you to find out when executed in the Joomla root folder.

But for SCSS sources in the build folder it needs a git clone of course, that's not included in a normal installation package.

Added #32377 in regards to #issuecomment-776805109

Boy I wish we had the same involvement for #30816

Tks