Focus ring not shown for radio toggles

[jsit]

Draft work happening in #1773

Requirements

• This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• Please check to see if this issue already exists.
• It's a single bug. Do not report multiple bugs in one issue.
• It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

When the "toggle"-style radio buttons are focused, there should be a ring to let the user know they're focused. This doesn't show up, because the <label> and <input> fields are in the wrong order.

Label needs to be sibling element to input, like this:

            <input
              id={`${this.id}-subscribed`}
              type="radio"
              className="btn-check"
              value={"Subscribed"}
              checked={this.state.type_ == "Subscribed"}
              onChange={linkEvent(this, this.handleTypeChange)}
              disabled={!UserService.Instance.myUserInfo}
            />
            <label
              htmlFor={`${this.id}-subscribed`}
              title={I18NextService.i18n.t("subscribed_description")}
              className={`btn btn-outline-secondary 
              ${this.state.type_ == "Subscribed" && "active"}
              ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
            `}
            >
              {I18NextService.i18n.t("subscribed")}
            </label>

Steps to Reproduce

1. Tab until the focus is on a radio toggle
2. See that there is no focus ring

Technical Details

Latest main

Lemmy Instance Version

main

Lemmy Instance URL

No response