[4.0] Render label by brianteeman · Pull Request #25085 · joomla/joomla-cms

brianteeman · 2019-06-02T09:02:44Z

There is an option "hiddenLabel" for a form field. But instead of "hiding" the label it doesn't render the label at all. This causes accessibility issues because every form field input must have an associated label.

This PR changes it so that instead of the label not being rendered at all it is rendered with a class of sr-only instead.

Testing

Add the following field to any form

		<field
			name="test"
			type="text"
			label="Hidden"
			hiddenLabel="true"
		/>

Before and After applying the PR there will be no visual change BUT if you view the source you will see that the code has changed

Before

<div class="control-group">
	<div class="controls">
		<input type="text" name="jform[test]" id="jform_test" value="" class="form-control">
	</div>
</div>

After

<div class="control-group">
	<div class="control-label sr-only">
	        <label id="jform_test-lbl" for="jform_test">Hidden</label>
	</div>
	<div class="controls has-success">
		<input type="text" name="jform[test]" id="jform_test" value="" class="form-control valid form-control-success" aria-invalid="false">
	</div>
</div>

There is an option "hiddenLabel" for a form field. But instead of "hiding" the label it doesn't render the label at all. This causes accessibility issues because every form field input must have an associated label. This PR changes it so that instead of the label not being rendered at all it is rendered with a class of sr-only instead. ### Testing Add the following field to any form ` <field name="test" type="text" label="Hidden" hiddenLabel="true" /> ' Before and After applying the PR there will be no visual change BUT if you view the source you will see that the code has changed ### Before ` <div class="control-group"> <div class="controls"> <input type="text" name="jform[test]" id="jform_test" value="" class="form-control"> </div> </div> ` ### After ` <div class="control-group"> <div class="control-label sr-only"> <label id="jform_test-lbl" for="jform_test">Hidden</label> </div> <div class="controls has-success"> <input type="text" name="jform[test]" id="jform_test" value="" class="form-control valid form-control-success" aria-invalid="false"> </div> </div> `

richard67 · 2019-06-02T09:24:38Z

layouts/joomla/form/renderfield.php

 $class = empty($options['class']) ? '' : ' ' . $options['class'];
 $rel   = empty($options['rel']) ? '' : ' ' . $options['rel'];
 $id    = $name . '-desc';
+$hide  = empty($options['hiddenLabel']) ? '' :  ' ' . "sr-only";


@brianteeman What happens if someone adds a field where the hiddenLabel option is not empty but false: hiddenLabel="false"?

I think your code right now would also set the sr-only class in that case.

Hmm, on the other hand I see it is like that without your PR, too.

you wanna fix that, too? or wanna leave this pr as it is and i shall test?

richard67 · 2019-06-02T09:54:53Z

I have tested this item ✅ successfully on f855283

I tested this with the TinyMCE editor plugin, which has such a field (field with name="configuration" in fieldset with name="basic").
Without this PR, the field is not rendered. With this PR, it is rendered with sr-only class.