Drop useless text faking a label in horizontal forms example

[ffoodd]

Because those example are often used as sources through copy-pasting, avoid using fake labels with text in divs seems a best practice in our docs.

We might as well turn it into a label but this could lead to wrong pattern usage too, since it would require two pertinent labels.
Since we're only documenting horizontal layout using grid, switching this an offest use case feels better.

If you agree with that, it should be backported to v4 as well.

[patrickhlauke]

i'm actually wondering...as there's an invalid fieldset/legend for the radios there before it, if we could do two things:

• fix up the fieldset/legend to be valid (the legend needs to be the first child of the fieldset

<fieldset class="row mb-3">
  <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
  <div class="col-sm-10">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="">
      <label class="form-check-label" for="gridRadios1">
        First radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
      <label class="form-check-label" for="gridRadios2">
        Second radio
      </label>
    </div>
    <div class="form-check disabled">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="">
      <label class="form-check-label" for="gridRadios3">
        Third disabled radio
      </label>
    </div>
  </div>
</fieldset>

• use the same approach for the checkbox example, i.e. something like

<fieldset class="row mb-3">
  <legend class="col-form-label col-sm-2 pt-0">Checkbox</legend>
  <div class="col-sm-10">
    ...
  </div>
</fieldset>

[patrickhlauke]

randomly, i think there were other instances of borked fieldset/legend constructs somewhere that came up during automated scans ... maybe those can be tackled in a similar way?

[ffoodd]

@patrickhlauke Indeed!

FWIW, the "checkbox" one would feel very wrong to me, using fieldset and legend for a single checkbox. And as I said, it's an opportunity to show an .offset-* utility too, since this specific example is for grid usage with forms.

But I'll try to tackle fieldsets accordingly, the report on @XhmikosR' PR should help to spot other borked occurrences.

[ffoodd]

Only found a single occurrence flagged by pa11y-ci, in docs/overview#disabled where we used an aria-label instead of a fieldset. Even though I know it's pretty good from an accessibility perspective, a fieldset feels better in our docs.

Easy to revert a commit if I'm wrong ;)

[XhmikosR]

This will probably need a manual backport, any help is welcome :)