Currently when using fieldset in our horizontal grid the layout is broken (this seems to be a bug with css grid) so the following code:
<fieldset class="pf-c-form__group">
<legend class="pf-c-form__label">Can we follow up via email?</legend>
<div class="pf-c-form__horizontal-group">
<div class="pf-c-check">
<input class="pf-c-check__input" type="radio" id="horizontal-radio1" name="horizontal-radios">
<label class="pf-c-check__label" for="horizontal-radio1">Yes</label>
</div>
<div class="pf-c-check">
<input class="pf-c-check__input" type="radio" id="horizontal-radio2" name="horizontal-radios">
<label class="pf-c-check__label" for="horizontal-radio2"> No</label>
</div>
</div>
</fieldset>
Is this:
<div class="pf-c-form__group">
<label class="pf-c-form__label" for="horizontal-radio1">Can we follow up via email?</label>
<div class="pf-c-form__horizontal-group">
<div class="pf-c-check">
<input class="pf-c-check__input" type="radio" id="horizontal-radio1" name="horizontal-radios">
<label class="pf-c-check__label" for="horizontal-radio1">Yes</label>
</div>
<div class="pf-c-check">
<input class="pf-c-check__input" type="radio" id="horizontal-radio2" name="horizontal-radios">
<label class="pf-c-check__label" for="horizontal-radio2"> No</label>
</div>
</div>
</div>
This works but causes an issue with a11y. The first <label> has the same id as the first .pf-c-check <label> which fails out a11y check. We need to investigate the best way to fix this.
#949 removes the offending for=horizontal-radio1 from the first <label> but will now causes this to fail in a screen reader.
Reactions are currently unavailable
Currently when using fieldset in our horizontal grid the layout is broken (this seems to be a bug with css grid) so the following code:
<fieldset class="pf-c-form__group"> <legend class="pf-c-form__label">Can we follow up via email?</legend> <div class="pf-c-form__horizontal-group"> <div class="pf-c-check"> <input class="pf-c-check__input" type="radio" id="horizontal-radio1" name="horizontal-radios"> <label class="pf-c-check__label" for="horizontal-radio1">Yes</label> </div> <div class="pf-c-check"> <input class="pf-c-check__input" type="radio" id="horizontal-radio2" name="horizontal-radios"> <label class="pf-c-check__label" for="horizontal-radio2"> No</label> </div> </div> </fieldset>Is this:
<div class="pf-c-form__group"> <label class="pf-c-form__label" for="horizontal-radio1">Can we follow up via email?</label> <div class="pf-c-form__horizontal-group"> <div class="pf-c-check"> <input class="pf-c-check__input" type="radio" id="horizontal-radio1" name="horizontal-radios"> <label class="pf-c-check__label" for="horizontal-radio1">Yes</label> </div> <div class="pf-c-check"> <input class="pf-c-check__input" type="radio" id="horizontal-radio2" name="horizontal-radios"> <label class="pf-c-check__label" for="horizontal-radio2"> No</label> </div> </div> </div>This works but causes an issue with a11y. The first <label> has the same id as the first .pf-c-check <label> which fails out a11y check. We need to investigate the best way to fix this.
#949 removes the offending for=horizontal-radio1 from the first <label> but will now causes this to fail in a screen reader.