Issue Summary

The group label is not associated with its group of radio buttons. The group-level label helps to completely convey the purpose of individual radio controls in the group.

Elements name:
Group label- Run this job in
Radio buttons- Agent environment, Docker container

Location of the elements: Radio buttons, under the "Isolate build" heading section, in the "Create job" modal.

Steps to Reproduce

1. In the "Add task / Script task" page, add any task in the task list and click on the "Save and continue" button. Then the "Plan configuration - Stages - Plan contents" page will display.
2. Click on the "Create stage" button. Then the "Create a new stage" modal will display. Click on Create button.
3. Then the Stage will be added in the "Plan configuration - Stages - Plan contents" page. Then click on the "Add job" link, in the table.
4. Then the "Add a new job" modal will display. Click on the "Create a new job" link.
5. Then the "Create job" modal will display.
6. Check the group associated with the above-mentioned radio buttons.

Actual Results

Actual results

Expected Results

Expected Results

Fix Information
RULE :
Group labels MUST be programmatically-associated with the group if the individual labels for each element in the group are insufficient on their own.

HOW TO FIX:
Fix this issue by using ONE of the following techniques:
1. Use the fieldset/legend technique:
a. Enclose the group label in a <legend> element.
b. Enclose the <legend> element and all of the related form fields in a <fieldset> element.

<fieldset>
<legend>Preferred contact method</legend>
<label for="email">Email</label>
<input type="radio" id="email" name="contact">
<label for="phone">Phone</label>
<input type="radio" id="phone" name="contact">
</fieldset>

2. Use the ARIA group/labelledby technique:
a. Enclose the group label in a container such as a <div> or a <p> and give it a unique id attribute value.
b. Enclose the related form controls in a container such as a <div>.
c. Apply the role="group" and aria-labelledby attributes to the container.
d. Make the value of the aria-labelledby attribute match the value of the id attribute on the group label container.

<p id="contact-label">Preferred contact method</p>
<div role="group" aria-labelledby="contact-label">
<label for="email">Email</label>
<input type="radio" id="email" name="contact">
<label for="phone">Phone</label>
<input type="radio" id="phone" name="contact">
</div>

Screenshot

Workaround

workaround

Bug Ref: 459572