[NuGet.org Bug]: Checkboxes have different "styles"

[robertmuehsig]

Impact

It bothers me. A fix would be nice

Describe the bug

Hi,

I noticed that some checkboxes uses the wrong style. I guess this is how the checkbox should be appear:

Notice the "white"-checkmark and the focus around the checkbox + label.

Some checkboxes, like the "unlist" checkbox, are currently look like this:

Notice the "black"-checkmark (which is hard to see) and the focus is only around the checkbox, but not the label.

The reason behind the issue is, that the structure is wrong on these checkboxes, e.g.:

                        <div class="row-checkbox-label">
                            @Html.ShowCheckboxFor(package => package.Listed, customClass: "brand-checkbox")
                            @Html.ShowLabelFor(package => package.Listed, "List in search results.", isrequired: false)
                        </div>

...should be...

                        <div class="row-checkbox-label">
                            <label class="brand-checkbox">
                                @Html.ShowCheckboxFor(package => package.Listed)
                                <span>List in search results.</span>
                            </label>
                        </div>

... which would result in this:

I assume that all ShowCheckboxFor...(customClass: "brand-checkbox") are affected by this issue:

Repro Steps

Try to unlist some packages - the checkbox is not correct.

Expected Behavior

"Readable" checkboxes.

Screenshots

No response

Additional Context and logs

I would be happy to fix this with a PR (if my analysis is correct and the proposed fix looks good to you).

[erdembayar]

@ryuyu
Is this issue could our accessibility CSE address?

[robertmuehsig]

@erdembayar I could send you a PR for this issue if you want. Just wanted to ask first if my analysis is correct.

[erdembayar]

@erdembayar I could send you a PR for this issue if you want. Just wanted to ask first if my analysis is correct.

Currently waiting for @ryuyu to take a look, I'm not really familiar with this accessibility requirements.

[ryuyu]

This looks like a real issue. Great catch @robertmuehsig!
If you want to send a PR for this, please feel free and tag me directly and I'll pull it in.
If not, we will pick it up soon.

Really appreciate the report!