@tecpromotion it would be great if you could test again this version - much much simpler code with no css changes

I have tested this item 🔴 unsuccessfully on 501d2f7

I have tested this item 🔴 unsuccessfully on 501d2f7

I have tested this item 🔴 unsuccessfully on 501d2f7

Needs changes — radio fields get the <span>, but checkboxes are not covered, required radio fields lose their inline validation message, and the label text changes colour.

Test fields: custom fields "Test Radio" (radio, required) and "Test Checkboxes" (checkboxes, required) on articles.

Verification

Finding 1 — checkboxes are not changed

Title, description and testing instructions say radio and checkboxes. The check is $field instanceof RadioField; CheckboxesField extends ListField, so its label is still <label for="fieldset-id">. Same for RadiobasicField (also extends ListField, also renders a fieldset; from the code, not tested).

The description also says the id is removed. The id is still there; only for is removed.

Finding 2 — required radio fields lose the inline validation message

validate.js finds the label with label[for="<fieldset id>"], adds the class invalid and appends the message to it (markInvalid, markValid, removeMarking). Without for nothing is found: the radio field only gets the generic alert at the top, while the checkboxes field next to it still shows "One of the options must be selected" in red.

Finding 3 — the display does change

Atum colours label elements, the span inherits the .control-label colour instead: radio labels are now grey (rgb(73, 80, 87)) next to dark blue labels of all other fields (rgb(0, 27, 76)). In the article sidebar "Featured" becomes rgb(33, 37, 41). Position and font size are unchanged.

Finding 4 — duplicate ids in subforms

joomla-field-subform renumbers the group label of a radio fieldset with row.querySelector('label[for="<old id>"]'). The span is not found, so every added row keeps the template id. After adding two rows in Plugins → FileSystem - Local the id jform_params__directories__directoriesX__thumbs-lbl exists twice.

Suggested fix

Findings 2 and 4 need the two scripts to find the element by id (#<fieldset id>-lbl) instead of label[for]; Finding 3 needs the label colour rule (and label.invalid) to apply to the span, e.g. via a class on it.

Screenshots

"Before" = same test site with renderlabel.php from 6.2-dev. Test fields: custom fields "Test Radio" and "Test Checkboxes" (both required) on articles. All at 1440px, Atum.

Finding 2 — required radio field loses the inline validation message

Article saved with both required fields empty. Before: both labels turn red and show "One of the options must be selected". After: only the checkboxes field does, "Test Radio" stays unmarked.

Before	After

Finding 3 — label colour changes (article, Fields tab)

Before: "Test Radio" has the same dark blue as every other label. After: it is grey (rgb(73, 80, 87) instead of rgb(0, 27, 76)), "Test Checkboxes" below it is unchanged.

Before	After

Finding 3 — label colour changes (Articles → Options)

Same effect on the options page: the labels of the switches ("Title", "Linked Titles", "Intro Text" …) are grey, the labels of the select fields ("Choose a Layout", "Position of Article Info") stay dark blue. Position and font size are unchanged.

Before	After

Thanks @tecpromotion i didnt think to check the colour or the highlighting on error. I will look into that

The checkboxes was my fault - I forgot to commit the last change (I have done now)

I have also corrected my description about the id being removed - it was of course the for= that is removed

This pull request has conflicts, please resolve those before we can evaluate the pull request.

jiust need to look at the subforms now from @tecpromotion report as everything else should be fixed

@tecpromotion i believe all the issues you raised have now been resolved

@tecpromotion i believe all the issues you raised have now been resolved

@brianteeman all four findings from my first test are resolved. One cosmetic leftover: the required * no longer turns red with an invalid label (one-line fix below).

Re-test

Also checked:

• Articles → Options: 0 <label for> pointing at a fieldset, 55 spans.
• Frontend article form (Cassiopeia): validation message and red marking work for both fields; label colours are the same as before the PR.
• eslint and stylelint on the changed files: clean.

Leftover — * stays dark blue in an invalid label (Atum)

.control-label span:not(.invalid):not(.valid):not(.form-control-feedback) also matches the nested span.star. Save a new article with an empty Title:

Same for the * of the radio and checkboxes spans. Matching only the direct child fixes it (tested, light and dark: label, * and message are all red, normal state unchanged):

> span:not(.invalid):not(.valid) {
  color: var(--login-label-color);
}

css changes made

css changes made

@brianteeman your screenshot shows the red * — nice. I think the commit for it may not be pushed yet: the PR head is still 327340c from 9 October, and there the * is still rgb(0, 27, 76). Happy to re-test as soon as it's up.

@tecpromotion refreshed but i think you were wrong as github showed that the css change was committed after the head you refer to

I have tested this item ✅ successfully on 7354c4e

@brianteeman thanks. 649e2dd is dated 10 October, but it reached the PR with today's push at 13:47 UTC (327340c → 7354c4e); GitHub sorts the commits by commit date, so it looks older than it is here.

I have tested this item ✅ successfully on 7354c4e

@brianteeman thanks. 649e2dd is dated 10 October, but it reached the PR with today's push at 13:47 UTC (327340c → 7354c4e); GitHub sorts the commits by commit date, so it looks older than it is here.